Kairos Studio
A site that feels like the pitch.
View live demo
Overview
Kairos is a concept site for a boutique creative studio. I built it as a playground for cinematic motion — the kind of site where the experience itself is the argument for the work.
The Challenge
Motion-heavy sites are easy to get wrong — janky, slow, or distracting. The challenge was choreographing pinned scroll sequences and a 3D hero that still felt smooth and intentional rather than showy.
The Solution
A React site built like a film — pinned scroll sequences, cinematic case-study reveals and a cursor that morphs with context. Locomotive Scroll for smoothness, GSAP for choreography, and a Three.js hero.
What I built.
Cinematic hero
Three.js particle system reacting to the cursor across parallax layers.
Pinned case studies
GSAP-pinned scroll sequences that reveal work as narratives.
Context-aware cursor
Cursor morphs into text, arrows or play buttons based on the hover target.
Seamless transitions
Custom route transition system — no white flash between pages.
Smooth scroll
Locomotive Scroll synced to the GSAP ticker for buttery motion.
Performance-first
96/100 Lighthouse on the build with zero jank.
The process.
Positioning
Decided what the site should make a visitor feel in the first seconds.
Design
Motion-first design with animated prototypes.
Build
React, GSAP, Three.js, Locomotive Scroll.
The Impact
"Kairos was my playground for cinematic motion — GSAP-pinned scroll sequences, a Three.js hero, and a context-aware cursor. I built it to learn choreography, not just animation."
Next project