Overview

Ochi is a design-engineering challenge — reproducing a globally acclaimed agency's landing page down to the micro-interaction level, using modern React tooling instead of vanilla JS.

Challenge

The original Ochi site relies on browser-native scroll events and custom cursor behavior that doesn't translate cleanly to React's re-render model. The challenge was achieving pixel-perfect fidelity while maintaining 60 fps throughout and keeping the bundle lean.

• Custom cursor — a magnetic cursor that morphs on hover required useRef + requestAnimationFrame
• Locomotive Scroll integration — needed a careful shim to work inside Next.js App Router
• Typography animations — word-by-word reveal had to be imperatively wired without layout thrash

Solution

• Replaced Locomotive Scroll with a custom useScrollProgress hook backed by IntersectionObserver, eliminating the external dependency while matching the feel
• Built the cursor as a fully composable <MagneticCursor> component that uses usePointerMove to drive CSS transforms at native-event speed
• Used Framer Motion's staggerChildren with split-text spans for the word-reveal — zero layout thrash, declarative API

Outcome

Scored 97 on Lighthouse Performance despite being animation-heavy. Received interest from 3 potential clients who found the demo via a Twitter post.