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.
- Timeline-Based Interpolators - Drives fluid motion by interpolating between keyframe-defined scene states using precise timing curves tied to scroll progress.
- Scroll-Driven Animation Tools - Binds animation timelines to scroll position via continuous mapping for frame-accurate synchronisation.
- Scroll-Animation Debugging Workflows - Provides a workflow for inspecting and controlling scroll-triggered animations with a real-time overlay and console commands.
- State Debugging Tools - Toggles a real-time overlay showing timing, active elements, and scene breakdown with console commands for debugging.
- SVG-Based Vector Rendering - Renders complex SVG graphics while preserving gradient definitions and opacity inheritance during dynamic transforms.
- Animation State Debug Overlays - Provides a real-time overlay showing timing, active elements, and scene breakdown with console commands for scene jumping and state export.
- Gradient-Preserving Transform Pipelines - Ships a tree-walking serialiser that maintains gradient definitions and opacity when transforming hand-crafted vector illustrations.
