Time Machine

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.

The Tech Stack

• 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 ScrollTrigger extensively 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()), and backdrop-filter for those nice glassmorphism effects.

How it works

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.

Getting Started Locally

If you want to spin this up on your own machine, just run the usual commands:

1. npm install - grab all the dependencies
2. npm run dev - start the local dev server at localhost:4321

To build the static site for production: npm run build

Enjoy the journey through time!