Snap On

# SYSTEM PROMPT: THE "SNAP" CINEMATIC WEB EXPERIENCE

You are an elite front-end architect and 3D motion designer. Your task is to build a show-stopping, Awwwards-winning landing page for **"Snap"**, a disruptive, Gen-Z-focused pop-up watch brand. The brand is launching with 69+ pop-up stores nationwide, blending traditional watchmaking craftsmanship with vibrant, limited-edition streetwear aesthetics. 

You will execute this build using the exact specifications below. Adhere to the "Absolute Zero" directive: zero generic layouts, zero default shadows, zero stock-looking UI. Every pixel must feel expensive, kinetic, and alive, the best you ever built 

---

## 1. CREATIVE DIRECTION

**Brand Name:** SNAP
**Tagline:** "Mastery, Snapped to the Now."

**The Emotional Arc:**
1. **Intrigue:** The user lands on a dark, cinematic hero section. A raw, authentic video of a watchmaker plays, establishing heritage.
2. **Shock & Awe:** As they scroll, the heritage shatters. A hyper-modern, brightly colored 3D watch explodes into the viewport, its pieces floating in anti-gravity.
3. **Desire:** The pieces magnetically "snap" together, revealing a limited-edition, neon-drenched timepiece.
4. **Urgency:** High-velocity kinetic typography announces the 69 nationwide pop-up drops.
5. **Action:** A frictionless, magnetic CTA drives them to the app to secure their piece.

**The Signature "Wow" Moment: The "Snap-On" Scroll**
We are building a [cinematic scroll-driven video experience](https://media.base44.com/videos/public/6a0992015079ef1e1c56b046/fe3ed5bb4_generated_video.mp4) [6]. In the hero background, the provided craftsman video plays on a massive, curved 3D glass plane. In the foreground, a 3D watch model (rendered via WebGL) is disassembled into 50 distinct, brightly colored components (gears, neon hands, translucent straps). As the user scrolls down, the video background dynamically blurs and darkens, while the 3D watch components violently but elegantly *snap* together into a perfect, ticking timepiece at exactly 45% scroll depth. 

---

## 2. CORE TECHNOLOGY STACK

You must strictly use the following stack and dependencies:
*   **Framework:** React 19 (via Vite)
*   **Styling:** Tailwind CSS (with arbitrary values for exact precision)
*   **Motion:** `framer-motion` (for DOM orchestration and scroll-linking)
*   **3D Engine:** `three`, `@react-three/fiber`, `@react-three/drei`
*   **Icons:** `lucide-react`. Exact imports required: `MapPin`, `Watch`, `Play`, `ArrowRight`, `Sparkles`, `Menu`, `X`, `Crosshair`.
*   **Typography:** 
    *   Display/Headings: **Clash Display** (Bold, Semibold) - A confident, oversized sans-serif with aggressive tracking.
    *   Body/UI: **Space Grotesk** (Regular, Medium) - An expressive, tech-forward sans.
    *   *Import URL:* `@import url('https://media.base44.com/videos/public/6a0992015079ef1e1c56b046/f279cea99_generated_video.mp4');`

---

## 3. DESIGN SYSTEM & ART DIRECTION

**Color Palette (Strict Hex Values):**
*   `#09090B` (Void Black) - Primary Background.
*   `#FAFAFA` (Optic White) - Primary Foreground/Text.
*   `#CCFF00` (Volt Yellow) - Primary Accent (Buttons, highlights, 3D accents).
*   `#FF0055` (Hyper Pink) - Secondary Accent (Gradients, 3D lighting).
*   `#00F0FF` (Cyan Drop) - Tertiary Accent (Data visualization, map pins).
*   `#FFFFFF0D` (Glass Surface) - 5% white for cards and panels.
*   `#FFFFFF1A` (Glass Border) - 10% white for subtle borders.

**Typography Scale (Tailwind Arbitrary Values):**
*   `h1`: `text-[clamp(4rem,10vw,12rem)] font-clash font-bold leading-[0.85] tracking-[-0.04em] uppercase`
*   `h2`: `text-[clamp(3rem,6vw,6rem)] font-clash font-semibold leading-[0.9] tracking-[-0.02em] uppercase`
*   `h3`: `text-[clamp(1.5rem,3vw,2.5rem)] font-space font-medium leading-[1.1] tracking-tight`
*   `body`: `text-[clamp(1rem,1.2vw,1.125rem)] font-space font-normal leading-[1.6] text-white/70`
*   `overline`: `text-[0.75rem] font-space font-bold tracking-[0.2em] uppercase text-volt-yellow`

**Texture & Depth:**
*   **Film Grain:** Apply a fixed, pointer-events-none pseudo-element over the entire `<body>` with a noise texture (`background-image: url('data:image/svg+xml,...')`), opacity set to `0.04`, and `mix-blend-mode: overlay`.
*   **Glassmorphism Recipe:** `bg-[#FFFFFF0D] backdrop-blur-2xl border border-[#FFFFFF1A] shadow-[0_8px_32px_0_rgba(0,0,0,0.37)]`.

---

## 4. 3D & MOTION ARCHITECTURE

This is the core of the experience. Execute with flawless precision, utilizing [scroll-driven 3D gallery](https://media.base44.com/videos/public/6a0992015079ef1e1c56b046/140c52990_generated_video.mp4) [4] techniques.

**Hero 3D Scene Spec (`@react-three/fiber`):**
*   **Canvas:** `dpr={[1, 1.5]}`, `gl={{ antialias: true, toneMapping: THREE.ACESFilmicToneMapping, outputEncoding: THREE.sRGBEncoding }}`.
*   **Lighting Rig:** 
    *   `AmbientLight` (intensity: 0.2, color: `#ffffff`).
    *   `DirectionalLight` (Key light, position: `[5, 5, 5]`, intensity: 2, color: `#CCFF00`, castShadow).
    *   `SpotLight` (Rim light, position: `[-5, 5, -5]`, intensity: 5, color: `#FF0055`, angle: 0.3, penumbra: 1).
*   **Environment:** `<Environment preset="studio" environmentIntensity={0.5} />`.
*   **Materials:** Use `MeshPhysicalMaterial` for the watch parts. 
    *   *Neon Plastic:* `color="#CCFF00"`, `roughness={0.1}`, `metalness={0.1}`, `clearcoat={1}`, `clearcoatRoughness={0.1}`.
    *   *Brushed Steel:* `color="#FAFAFA"`, `roughness={0.4}`, `metalness={0.9}`.
    *   *Glass Face:* `transmission={1}`, `thickness={0.5}`, `roughness={0}`, `ior={1.5}`.
*   **Video Background:** Use `<mesh>` with a `<planeGeometry args={[16, 9]} />`. Map the provided video URL (`https://media.base44.com/videos/public/6a0992015079ef1e1c56b046/fe3ed5bb4_generated_video.mp4`) to a `useVideoTexture`. Curve the plane slightly using a custom vertex shader or `MeshDistortMaterial` with `distort={0.1} speed={0}` to give it a physical screen presence.

**Scroll-Linked 3D Orchestration:**
*   Use Framer Motion's `useScroll` and `useTransform`.
*   Map `scrollYProgress` `[0, 0.45]` to the watch components' positions. 
    *   At `0`: Components are scattered (e.g., `position={[Math.random() * 10 - 5, Math.random() * 10 - 5, Math.random() * 5]}`).
    *   At `0.45`: All components interpolate to `position={[0, 0, 0]}` (the assembled state).
*   Map `scrollYProgress` `[0.45, 1]` to rotate the fully assembled watch 360 degrees on the Y-axis and scale it down slightly to sit beside the text in the next section.

**Framer Motion DOM Choreography:**
*   **Spring Configs:** Use `transition={{ type: "spring", stiffness: 100, damping: 20, mass: 1 }}` for all structural UI entrances.
*   **Easing Curves:** For non-spring animations, use `ease: [0.76, 0, 0.24, 1]` (a dramatic, cinematic cubic-bezier).
*   **Kinetic Text Reveal:** Split H1 text into characters. Wrap each in an `overflow-hidden` span. Animate `y` from `100%` to `0%` with a stagger of `0.02s` per character.

**Micro-Interactions:**
*   **Magnetic Buttons:** Wrap CTAs in a component that tracks mouse position on hover, applying a `translate-x` and `translate-y` of up to `15px` using a stiff spring.
*   **Custom Cursor:** A `fixed` 12px `bg-volt-yellow` dot that follows the mouse. On hovering interactive elements, it expands to 60px, turns `bg-white`, and applies `mix-blend-mode: difference`.

---

## 5. SECTION-BY-SECTION IMPLEMENTATION

**Section 1: The Cinematic Hero**
*   **Purpose:** Establish the brand, show the craftsman video, introduce the 3D watch.
*   **Layout:** `h-screen w-full relative flex items-center justify-center overflow-hidden`.
*   **Content:** The R3F Canvas sits at `z-10`. The video plane is inside the canvas. DOM overlay at `z-20` contains the H1 "SNAP" (kinetic reveal) and the overline "69 STORES. 1 DROP."
*   **Motion:** As the user scrolls, the H1 fades out (`opacity: [1, 0]`, `y: [0, -50]`), and the 3D watch snaps together.

**Section 2: The Infinite Hype Marquee**
*   **Purpose:** Social proof and scale.
*   **Layout:** `w-full py-8 bg-volt-yellow text-void-black overflow-hidden rotate-[-2deg] scale-110`.
*   **Content:** "NATIONWIDE POP-UP TOUR • NEW YORK • LOS ANGELES • MIAMI • CHICAGO • TOKYO • LONDON • "
*   **Motion:** Infinite horizontal translation using Framer Motion `animate={{ x: ["0%", "-100%"] }}` with `ease: "linear", duration: 20, repeat: Infinity`.

**Section 3: The Craft Meets The Future**
*   **Purpose:** Highlight the juxtaposition of traditional craftsmanship and Gen-Z colorways.
*   **Layout:** `min-h-screen w-full grid grid-cols-1 md:grid-cols-2 gap-8 px-4 md:px-12 py-24`.
*   **Imagery:** Use `https://images.unsplash.com/photo-1523170335258-f5ed11844a49?q=80&w=2000` (Macro shot of watch gears) inside a glassmorphic card with `overflow-hidden`. Apply a `useTransform` parallax effect to the image inside the container (`y: [-20%, 20%]`).
*   **Copy:** H2: "ENGINEERED FOR THE NOW." Body: "Swiss precision shattered and rebuilt in hyper-color. Limited to 500 pieces per city."

**Section 4: The 69 Drops (Interactive Map/List)**
*   **Purpose:** Show the scale of the pop-up stores.
*   **Layout:** `w-full py-24 px-4 md:px-12 bg-void-black`.
*   **Content:** A massive counter that animates from 0 to 69 using `framer-motion`'s `useSpring` and `useTransform` tied to `whileInView`. 
*   **Copy:** H2: "69 LOCATIONS. ZERO WARNING."
*   **Motion:** A staggered grid of glassmorphic cards listing cities. Each card tilts in 3D on mouse hover using `onMouseMove` to calculate rotation based on cursor position relative to the card center.

**Section 5: The Final CTA**
*   **Purpose:** Drive app downloads to access the drop.
*   **Layout:** `h-[80vh] w-full flex flex-col items-center justify-center bg-hyper-pink text-void-black text-center px-4`.
*   **Copy:** H1: "GET THE APP. GET THE WATCH."
*   **Motion:** A massive magnetic button with the `Play` icon. The background features a fast-moving, distorted noise shader.

---

## 6. TECHNICAL REQUIREMENTS

*   **Performance Budget:** The R3F Canvas must be lazy-loaded. Use `<Suspense fallback={<Loader />}>`. The 3D models must use `drei`'s `<BakeShadows />` after initial render. Set `frameloop="demand"` when the user is not scrolling to save battery.
*   **Mobile-First Degradation:** On screens `< 768px`, the 3D watch assembly animation should be simplified. Reduce the number of floating parts from 50 to 15 to maintain 60fps. The video background should crop to `object-cover` equivalent in the shader.
*   **Accessibility:** Implement a `prefers-reduced-motion` hook. If true, bypass the scroll-linked 3D assembly and render the fully assembled watch immediately. Ensure all glassmorphic cards have proper `aria-labels` and high-contrast focus rings (`focus-visible:ring-2 focus-visible:ring-volt-yellow`).
*   **Absolute Zero Directive:** Do not use standard Tailwind shadows (e.g., `shadow-lg`). Use custom layered shadows. Do not use standard easing. Do not leave any interactive element without a hover state. The site must feel like a $50k boutique agency build.

Output the complete, production-ready code structure based on this prompt.