It is an immersive, video-led website where six paintings and one film come together as a single story about the hour when the light begins to leave.
The aim was to make a website feel like a film rather than a page. The experience opens with a looping cinematic sequence framed in letterbox, then moves through six full-screen chapters that stack over one another as you scroll. Typography is part of the motion too: titles rise out of a soft blur, and lines of text come into focus word by word.
What went into it:
• Art direction built from a single palette of dusk violet, coral and deep navy
• A full-bleed opening film, encoded for smooth web playback, with a separate crop for mobile
• Sticky “curtain” chapter transitions and scroll-triggered text reveals
• Editorial typography pairing Boska and General Sans
• Fully responsive layouts for desktop, tablet and mobile
• A subtle film-grain overlay and cinematic shading to keep every scene consistent
Built in Framer. The walkthrough above is a 30-second capture of the live site, with original motion graphics and score.
Making a website feel like a film rather than a page is a beautiful brief, Ayush. The sticky curtain chapter transitions and word-by-word text reveals give scrolling its own rhythm, and that dusk violet, coral and deep navy palette holds every scene together.
Colours that refuse to mix, combed on water in a stone trough. The Mordant Vault guards colours that refuse to blend. Float them on water. Comb them. Never, under any circumstance, stir.
I built this project to test Colours that refuse to mix, combed on water in a stone trough. The Mordant Vault guards colours that refuse to blend. Float them on water. Comb them. Never, under any circumstance, stir. The core engineering challenge was sustaining uncompromised 60 FPS rendering using WebGL / GLSL Shaders while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING:
I focused on two core engineering benchmarks:
Precision implementation of shader marbling under continuous interactive user input
Sustained 60 FPS render performance and zero-dependency browser execution
THE TECHNICAL SIDE:
Engineered directly in the browser with WebGL / GLSL Shaders, Canvas2D, Shader marbling. The application runs without third-party frameworks or build-step dependencies, using hardware-accelerated rendering and custom event loops to achieve zero-latency response.
Everything executes in the browser using WebGL / GLSL Shaders, Canvas2D, Shader marbling. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED:
Balancing the mathematical rigors of shader marbling with tactile browser interaction required tuning event throttling and memory allocation to eliminate all garbage collection stutters.
Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF:
The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.
Steer an endless night-flight over a procedural city. NOCTURNE is a night-flight airline for insomniacs. An infinite procedural city passes beneath the wing. Steer with your mouse. Built by Samin Sami.
I built this project to test Steer an endless night-flight over a procedural city. NOCTURNE is a night-flight airline for insomniacs. An infinite procedural city passes beneath the wing. Steer with your mouse. Built by Samin Sami. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Three.js (GLB 3D) while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING:
I focused on two core engineering benchmarks:
Precision implementation of infinite world under continuous interactive user input
Sustained 60 FPS render performance and zero-dependency browser execution
THE TECHNICAL SIDE:
Engineered directly in the browser with Three.js (GLB 3D), Canvas2D, Infinite world. The application runs without third-party frameworks or build-step dependencies, using hardware-accelerated rendering and custom event loops to achieve zero-latency response.
Everything executes in the browser using Three.js (GLB 3D), Canvas2D, Infinite world. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED:
Balancing the mathematical rigors of infinite world with tactile browser interaction required tuning event throttling and memory allocation to eliminate all garbage collection stutters.
Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF:
The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.