projects
Watchmaking / Scroll storytelling / 2024live

Fleming.Watch.

A watch launch site, animated by scroll, with a CMS the brand runs.

Role
Lead Developer
Where
Fleming Watch · FutureCorp
Built with
Next.js 14 · React 18 · TypeScript · GSAP · Framer Motion · Valtio · Sanity CMS · Vercel

A product and brand site built around a watch launch. The main sections are animated with GSAP ScrollTrigger in scrub mode, so they follow the scroll position instead of running on a timer, while the intro uses Framer Motion. The brand edits content in an embedded Sanity Studio with a live preview, inquiries are emailed through SendGrid, and newsletter sign-ups go to Klaviyo.

Animation follows scrolling

The scroll-driven sections use scrubbed ScrollTriggers, so fast scrolling, slow reading and scrolling back all land on the matching frame of the animation.

Editors see the real page

The Studio shows the site in a preview pane next to the document, using Next.js draft mode and live queries, so drafts appear on the real page before they are published.

Publishing from the CMS

A Vercel deploy tool inside the Studio lets the brand rebuild the site after editing, without touching the code or the hosting dashboard.

Red Tetris