Life Timeline

The Life Timeline turns a personal chronology into a scroll-driven scene rather than a list of milestones. As you move through the page, the date, location, illustrated background, character state, and event card update together.

It is the same interactive timeline used in the life section of the site, placed here so the implementation can be read as a frontend experiment as well as a personal story.

Scrollytelling often becomes a fragile sequence of hand-positioned animations. This version keeps the narrative in authored time zones and keyframes, so the renderer can derive scene state from scroll position instead of coordinating a separate animation for every moment.

That model is useful beyond autobiography: product history, onboarding, project case studies, learning journeys, and any narrative where a reader should move continuously through changing context.

The timeline stores its story in typed time zones and keyframes. The scroll position is converted into a relative timeline pixel, then into date, location, climate, character state, and the active event. Svelte stores keep those derivations in one place for the scene, HUD, navigator, and event card to observe.

The stage is sticky while an authored scroll track supplies the duration. It listens for scroll and resize events only while mounted, and its wheel handler supports snapping to nearby key moments without replacing normal scrolling.

The scene uses SVG for the illustrated world and Chameleon tokens for interface chrome. The subject art retains its own literal colors, while the HUD and controls change with the site theme.

• A data-driven timeline where scroll position derives the entire visible state
• Coordinated Svelte stores shared by scene, navigation, HUD, and event details
• Sticky-stage scrollytelling with keyboard-accessible navigation controls
• A personal narrative expressed as an interactive system instead of a static list
• Theme-aware interface chrome around authored SVG illustration