Strata
Luxury watch concept page with a sticky-peel scroll mechanic and GSAP motion
Overview
A concept landing page for a fictional luxury skeleton watch, built as a single-page React 19 + TypeScript app on Vite. Sections pin and peel over each other using a CSS sticky mechanic driven by one scroll listener setting a custom property — native scroll is never hijacked — while GSAP with SplitText and ScrollTrigger handles masked headline reveals, scene arrivals, and a scrubbed parallax, all gated behind viewport size and prefers-reduced-motion. The site is served by a Cloudflare Worker via Workers Static Assets, which stamps a strict Content-Security-Policy and other security headers on every response and exposes a CORS-open /ping health endpoint.
A portfolio concept piece for 'Strata Caliber 1', a fictional independent watchmaker releasing a 50-piece skeleton watch. The goal was an editorial, print-inspired product narrative — hero claim, philosophy manifesto, movement architecture, process ledger, specifications, press acclaim, founder letter, all with deliberate restraint rather than template patterns.
The signature 'peel' transition pins each full-viewport section with position: sticky while the next slides up over it; a single rAF-throttled scroll listener feeds a --peel custom property that dims and drifts the covered scene. GSAP is confined to a documented motion brief of three systems (hero load-in, per-section arrivals with masked SplitText line reveals, scrubbed plate parallax), sharing one easing family and gated via gsap.matchMedia so mobile and reduced-motion users get a fully static page.
Sticky-based pinning was chosen over ScrollTrigger pinning to keep native scroll, keyboard access, and find-in-page intact, with the effect enabled only on viewports where every section provably fits. The design system uses @theme tokens and @utility definitions (including a sub-perceptual feTurbulence paper-grain overlay and radial ink-depth washes), with the bespoke stylesheet placed in @layer components so utilities can override it. Every state was verified in a driven Firefox instance at multiple viewport sizes.
Deployed on Cloudflare Workers with run_worker_first routing so the Worker applies security headers (strict CSP, HSTS, frame-ancestors 'none', Permissions-Policy) to asset responses not just API routes. The strict CSP was validated for violations before deploy, and a /ping endpoint returns 200 'pong' with open CORS for uptime checks from any origin.
Stack
UI / Frontend
Animation / 3D
Infra / Deploy
How it works
Hero
Full-bleed product shot with masked headline load-in and the core claim: four hundred hours, one watch.
Philosophy & Architecture
Split scenes state the brand thesis and expose the movement as an exhibit plate with scrubbed parallax.
Process Ledger
A triptych itemizes where the 400 hours go, with per-step hour counts summing to the hero claim.
Specs & Acclaim
Specification grid and asymmetric editorial press quotes provide factual foundation.
Founder Letter
First-person letter shifts the register from the world talking about Strata to the founder addressing the reader.
Reserve CTA
Over the dimmed product restates scarcity and price, opening a pre-filled reservation email.