Welcome to the Time Machine! This is an interactive, scroll-driven web experience that takes you on a journey through different eras of history and time.
The site is built with Astro and heavily utilizes GSAP (GreenSock) and Lenis to create a smooth, immersive scrolling experience. We step through various "eras" (like the Modern Era, Ancient Rome, the Cretaceous period, and the Future), blending 3D-like parallax layers, SVG animations, and dynamic typography to make the history feel alive.
- Astro: For blazing-fast performance and static site generation. It keeps the heavy lifting on the server and ships minimal JavaScript to the client.
- GSAP (GreenSock): The backbone of our animations. We use
ScrollTriggerextensively to tie animations directly to the user's scroll position, creating scrubbable, timeline-based transitions between eras. - Lenis: For buttery smooth scrolling. Native browser scrolling can feel a bit rigid, so Lenis gives us that premium, fluid momentum that pairs perfectly with GSAP.
- Vanilla CSS: We kept the styling native and scoped using Astro's built-in component styling, sprinkled with modern CSS features like
color-mix, fluid typography (clamp()), andbackdrop-filterfor those nice glassmorphism effects.
The core of the experience lives in src/components/, broken down by Era. Because this is a continuous, unbroken journey, the eras are stacked within a single view (index.astro). As you scroll, custom GSAP logic handles the transitions—fading out the old era, managing the overlapping z-indexes, and bringing the new era into focus without skipping a beat.
If you want to spin this up on your own machine, just run the usual commands:
npm install- grab all the dependenciesnpm run dev- start the local dev server atlocalhost:4321
To build the static site for production:
npm run build
Enjoy the journey through time!