A cinematic landing page concept for a fictional premium real-estate developer. The entire visual world is a procedural Three.js night city (instanced buildings with lit windows, street trees, lamps, moving traffic, a sky dome) choreographed with a GSAP ScrollTrigger-scrubbed camera: an aerial arrival, a street-level glide up the main avenue, a spiral around the tallest tower, and a pull-back to the skyline.
Live demo: ojja.dev/lab/estate
- Zero asset files. Every building, tree, lamp and car is generated at runtime; window textures are painted on a canvas.
- The photography is the scene. The three development "renders" in the projects grid are captured at startup from the same 3D city (three camera vantage points exported as JPEG data URLs), so every visual shares one world.
- Scroll as a camera dolly. The camera rides a Catmull-Rom path scrubbed by ScrollTrigger across the hero and three narrative chapters, then the renderer pauses once solid content covers the canvas.
- Respectful by default.
prefers-reduced-motionrenders a single static frame; all Three.js resources are disposed on unmount.
Next.js (static export) · React · Three.js · GSAP ScrollTrigger · Tailwind CSS v4 · TypeScript
pnpm install
pnpm devThen open http://localhost:3000.
Aldervale is a fictional brand. This is a concept study by Ojja, a digital solutions studio building websites, stores and web apps for businesses across the MENA region.