Video frame sequence hero
60+ frames extracted and played on scroll
This is a concept project — not a real brand. Built as a design experiment to showcase D-LAB's capabilities.
CASE STUDY
Atlas
Cinematic Scroll Experience
GSAPScrollTriggerVideo FramesLenisThree.js
OVERVIEW
Project snapshot
Project Type
Concept / Design Experiment
Timeline
1 week
Role
Design & Development
Tools
Next.js, GSAP, ScrollTrigger, Lenis, Three.js, Tailwind CSS
THE CHALLENGE
How do you make scrolling feel cinematic?
Atlas was an experiment in scroll-driven storytelling — turning a simple webpage into an immersive experience where every scroll tick reveals something new.
THE APPROACH
How we built the experience
- Scroll-scrubbed video frame sequences tied to scroll position
- Pinned sections with staggered content reveals
- Horizontal scrolling gallery with parallax
- Premium typography with Space Grotesk and Libre Caslon Display
- Lenis smooth scrolling for buttery feel
- Fully responsive across all devices
KEY FEATURES
What's inside
Pinned specs section
Counter animations tied to the scroll journey
Design philosophy section
Split layout with parallax depth and editorial pacing
Horizontal scroll lookbook
A horizontal gallery that rewards exploration
Custom hover effects
Polished transitions and interaction details throughout
Performance
Optimized for smooth motion on mobile devices
RESULTS
Atlas demonstrates that web experiences can feel as cinematic as a film. Every interaction is intentional, every animation serves the narrative.