Verdant
A premium nature editorial that dissolves into a scroll-driven cinematic 3D journey, then hands off to calm first-person exploration — all in the browser.
Three.js · GSAP ScrollTrigger · cannon-es · Browser-native
Experience flow
Landing dissolves into cinema, then hands off to calm first-person exploration.
- 01
Landing
An editorial hero over a live 3D forest — brand, headline, and a quiet invitation to begin.
- 02
Scroll descent
GSAP ScrollTrigger drives the camera along a path into the world. The page stops behaving like a page.
- 03
Character approach
A procedural hiker walks the trail toward the campfire as the cinematic handoff completes.
- 04
Ignition
Fire lights at the journey’s end — the signal that story yields to play.
- 05
Explore
Desktop free-play: hunt, craft, build, and survive the night. Mobile keeps the cinematic story; exploration asks for desktop.
Why this exists
A reference for scroll → cinematic → gameplay handoffs — and proof of craft for interactive web.
Scroll → cinema → play
Most marketing sites stop at the scroll. Verdant is a reference for handing off from editorial into space, motion, and gameplay without a hard cut.
Three.js + GSAP architecture
Typed phases and an event bus coordinate cinematic direction, character paths, and gameplay systems — readable showcase code, not an infinite engine.
World systems
Terrain, forest, wildlife, weather, and building sit alongside cannon-es player physics and a calm survival loop.
Built to be cited
Open technical showcase for agencies and portfolios: a live deploy for impact, the source for credibility. MIT, not a commercial product.
Enter the experience
This project needs the full viewport. Open it in a new tab and let the page become a world.
Want something at this level?
Tell us what you are building — we will shape the path with you.