albinotonnina/albinotonnina.com
Albinotonnina.com
This is a personal portfolio website that uses scroll position to drive complex SVG scene animations, creating an interactive storytelling experience. The project is built around a scroll-synchronised animation controller that maps user scrolling to a timeline of interpolated state changes across a directed graph of visual elements, enabling fluid scene transitions.
The site features a real-time animation state debugger that overlays a live HUD showing timing, active elements, and scene breakdown, with console commands for scene jumping and state export. It also includes a gradient-preserving SVG transform pipeline that maintains gradient definitions and opacity inheritance when dynamically transforming hand-crafted vector illustrations.
The project provides a declarative scene composition model for defining scenes as configurations of SVG elements and their animated properties, with a timeline-based interpolation system that drives fluid motion between keyframe-defined states. The documentation covers the scroll-driven scene graph engine and animation debugging workflow.
Features
- Personal Portfolio Generators - Builds a personal portfolio website where narrative and visual elements unfold as the visitor scrolls through the content.
- Declarative Scene Graphs - Defines scenes as declarative SVG element configurations mapped to animated state transitions.
- Scene Graph Engines - Animates SVG scene transitions by mapping scroll position to a timeline of interpolated state changes across a directed graph of visual elements.
- Scroll-Triggered Animations - Animates SVG scene transitions triggered by scroll position with precise timing and smooth interpolation.
