"The light you see left its source 10,000 years ago."
A 3D interactive scrolling experience built for the Techfest IIT Bombay College Ambassador task. The concept traces the origin of modern technology backward through time — from a smartphone to a Sumerian counting tablet, from a solar panel to the first flame — arriving at a single human being sitting by a fire, looking up at the sky.
Every modern technology is built on a discovery made decades or centuries ago. As you scroll, you fly backward along a beam of light through time. Each stop is a Techfest domain. The visual metaphor: you are following light that left a dead star long before you were born.
https://excalibur677.github.io/dead-star
The experience opens on a single pulsing star. Text appears slowly: "This star no longer exists." As the user scrolls, the camera moves backward along a Z-axis beam of light, passing through six technology domains, each with a rotating 3D artifact and a whisper of the discovery's origin. The journey ends at a campfire — the origin of all of it — before zooming out to reveal the fire as a star. Full circle.
The emotional arc is intentional: most tech fest websites are hype machines. This one is quiet and profound.
| Layer | Technology |
|---|---|
| 3D Rendering | Three.js r134 |
| Scroll Animation | GSAP 3.12 + ScrollTrigger |
| Smooth Scroll | Lenis 1.0.42 |
| Fonts | Cormorant Garamond, Inter (Google Fonts) |
| Deployment | GitHub Pages |
| Build Tool | None — vanilla JS, runs from CDN |
dead-star/
├── index.html # DOM layer structure, scene triggers, CTA
├── style.css # Canvas fixed positioning, sticky text layout, typography
└── main.js # Three.js scene, GSAP timeline, Lenis sync, all logic
Lenis + GSAP sync pattern:
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add(time => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);All three systems share one clock. This eliminates the desync between smooth scroll progress and ScrollTrigger firing positions that breaks most Three.js + GSAP implementations.
Camera-driven scene management:
Instead of per-scene state machines, a single ScrollTrigger moves the camera along the Z-axis from z = 5 to z = -200. All 3D objects sit at fixed world-space positions. Scenes are not managed — the camera simply flies through them.
DOM layering:
z-index 1 → <canvas> fixed, full viewport
z-index 2 → #dom-layer scrollable, text content
z-index 3 → #ui-layer fixed HUD (year counter)
z-index 100 → #transition-overlay black fade for CTA exit
Text sections use position: sticky inside 300vh tall scene triggers, so each text block stays centered on screen while its parent scrolls past.
| Scene | Z Position | Content |
|---|---|---|
| 0 | z = 5 | Opening star, hero text |
| 1 | z = -10 | Beam forms, scroll hint |
| 2 | z = -30 | Computing — circuit board artifact |
| 3 | z = -60 | Energy — electromagnetic coil |
| 4 | z = -90 | Robotics — articulated arm |
| 5 | z = -120 | Biotech — DNA double helix |
| 6 | z = -150 | Space Tech — satellite |
| 7 | z = -180 | Cognition & AI — neural network |
| 8 | z = -190 | Approaching origin text |
| 9 | z = -195 | Campfire, origin text |
| 10 | z = -198 | Zoom out reveal |
| 11 | — | CTA — ca.techfest.org |
All artifacts are built from native Three.js geometry. No external 3D models or assets.
- Computing — PCB board with wireframe chip overlays and circuit trace lines
- Energy — Two concentric electromagnetic coils, iron core cylinder, lightning bolt trace
- Robotics — Multi-segment arm: base → joint → upper arm → joint → claw
- Biotech — Double helix: two spiral BufferGeometry curves, rungs, glowing node dots
- Space Tech — Satellite body with solar panel arrays and dish antenna
- AI — 18-node neural network with proximity-based edge connections
No build step required.
git clone https://github.com/Excalibur677/dead-star.git
cd dead-star
npx serve . --listen 3000Open http://localhost:3000.
Requires an internet connection on first load for CDN assets (Three.js, GSAP, Lenis, Google Fonts).
- Pixel ratio capped at 2 to prevent overdraw on high-DPI screens
- Exponential fog set on the scene to naturally cull far objects
- Beam particles use additive blending with
depthWrite: false - Fire animation runs in the render loop only when opacity > 0
Sumit Kumar B.Tech CSE, Pimpri Chinchwad University (2024–2028) College Ambassador, Techfest IIT Bombay
GitHub: Excalibur677