Video frame sequence hero
60+ frames extracted and played on scroll
Portfolio case study by D-LAB — a complete, production-quality live build. View demo at atlas-build-three.vercel.app
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 is a portfolio case study in scroll-driven storytelling — turning a webpage into an immersive experience where every scroll tick reveals something new. Built by D-LAB in Sydney, it explores how automotive brands can present vehicles online without relying on heavy video embeds or static image galleries.
The experience combines GSAP ScrollTrigger with Lenis smooth scrolling so scroll position drives cinematic motion: a hero built from 60+ scrubbed video frames, pinned specification panels with counter animations, and a horizontal lookbook that rewards exploration. Three.js adds subtle depth without overwhelming performance on mobile.
Atlas is a portfolio case study — a complete live build demonstrating the level of scroll animation, editorial typography, and interaction polish D-LAB delivers for premium web design projects. View the live demo, then explore related work such as VEIL, MERIDIAN, and Keniye Platform.
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.