Overview
Duo Studio is a premium agency-style website rebuild — an exercise in perfecting immersive section transitions, layered scroll storytelling, and type-led design with a stark monochrome palette.
Challenge
The reference design uses clip-path animations and SVG morphing that browsers handle inconsistently. Getting the same effect across Chrome, Firefox, and Safari without a rendering gap required deep knowledge of compositing layers.
- Clip-path transitions — inconsistent GPU acceleration across browsers
- Full-page section snapping — needed smooth inertia without janky scroll jumps
- Performance budget — 3MB of high-res imagery that had to load progressively
Solution
- Used
will-change: clip-pathsparingly and debounced resize observers to avoid paint storms - Implemented a vanilla scroll-snap wrapper with
scroll-behavior: smooth+ Framer Motion exit animations for the between-state feel - All images served as WebP via Next.js
<Image>with blur placeholder — LCP under 1.8s on 3G
Outcome
The site is used as a portfolio piece in client pitches and has been featured in two design inspiration newsletters. LCP on production: 1.6 s.
Creative TechnologyIndustry
Agency WebsiteProject
