Launch Keynote

# Visual style: Launch Keynote

An Apple-keynote product-reveal aesthetic: a pitch-black stage, luminous product imagery, huge tight-tracking headlines and one electric-blue accent. The signature is a scroll-scrubbed frame sequence - a sticky canvas plays a pre-rendered product animation as you scroll, one product and one message per viewport, like a trillion-dollar product page.

## Philosophy
The launch-keynote creed: the page is a product unveiling, not a flyer. The whole screen is a pitch-black stage where light falls only on the product, and the audience is pulled forward one viewport at a time - one message per screen, one reveal per screen.

Core principles:
- Pitch-black stage (#000000): no card borders, no decorative texture. Black is an infinitely deep backdrop and the product lights itself. Whitespace is dramatic tension
- One product, one message per viewport: each screen carries a single claim. Scroll is the narrative beat, never a pile of information
- Frame-by-frame reveal (scroll-scrub): the signature. A sticky full-screen canvas plays a 96-frame pre-rendered animation as you scroll - the product spins, disassembles, lights up, and the scrollbar is the playhead
- Huge, tight tracking: hero headlines use a system SF-grade sans, clamp up to ~7rem, tracking pulled tight (-0.03em), weight contrast of 600 against 400 for tension
- One electric blue (#2997FF): the entire site has a single accent, on links, CTAs and key spec numbers. Everything else is black, near-white (#F5F5F7) and mid gray (#86868B)
- Spec grids: technical numbers land in a calm, restrained, monospaced-aligned grid of large figures that reads as credible

Design principles:
- Performance line: the frame sequence uses webp frames + IntersectionObserver lazy-loading, preloading 96 Image objects only when the section nears view; a poster paints first to prevent a blank frame; rAF throttling reads scroll position once per frame, never layout-thrashing
- No CLS: every image and the canvas carry an explicit aspect-ratio; canvas is devicePixelRatio-aware but capped at 2x to avoid a memory blowup
- Fallback: under prefers-reduced-motion, skip the scroll wiring and statically render the final frame with all callouts visible
- Accessibility: give the decorative canvas aria-hidden; critical information always lives in the text layer, never baked into the frames

## Do
- Pitch-black #000000 stage, no borders or texture, the product self-lights, whitespace is tension
- One product and one message per viewport; scroll is a narrative beat, not stacked info
- Frame-by-frame reveal: a sticky full-screen canvas plays a webp frame sequence on scroll, scrollbar as playhead
- Lazy-load the frame sequence only in view (IntersectionObserver); paint the poster first to avoid a blank frame
- Huge, tight hero type: a system SF-grade sans, clamp up to ~7rem, tracking -0.03em
- One electric-blue #2997FF accent for links/CTAs/key numbers; everything else black, near-white #F5F5F7, mid gray #86868B
- Present specs as a calm grid of large numbers; explicit aspect-ratio to prevent CLS
- Under prefers-reduced-motion, statically render the final frame with all callouts visible

## Don't
- Never use rainbow gradients or a second accent (beyond the one electric blue it is all black/white/gray)
- Never read offsetTop / getBoundingClientRect per frame inside a scroll handler (layout thrash)
- Never preload all 96 frames on page load (IO lazy-load or it is a data disaster)
- Never bake critical information into the frame images (frames may not load; reduced-motion shows one frame)
- Never pile on card borders and rounded decoration that break the infinite depth of the black stage
- Never ignore prefers-reduced-motion or a devicePixelRatio cap

## Rules for the AI
# Launch Keynote Design System

You are an expert frontend developer specializing in Apple-keynote product-reveal interfaces. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Launch Keynote
- **Essence**: The page is a product unveiling; a pitch-black stage, a scroll-scrubbed frame sequence, one product and one message per viewport
- **Mood**: Premium, cinematic, restrained, trillion-dollar product page
- **Inspiration**: apple.com product pages, keynote reveals, flagship hardware launches

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Rainbow gradients or a second accent color | Beyond one electric blue it is all black/white/gray |
| Reading offsetTop / getBoundingClientRect per frame in a scroll handler | Layout thrash |
| Preloading all frames on page load | Data disaster; lazy-load via IntersectionObserver |
| Baking critical info into the frame images | Frames may not load; reduced-motion shows one frame |
| Piling on card borders and rounded decoration | Breaks the infinite depth of the black stage |
| Ignoring prefers-reduced-motion or a devicePixelRatio cap | Accessibility + memory blowup |

## Required

### Pitch-black stage + one electric blue
- Background is always #000000, raised surface #1D1D1F, text near-white #F5F5F7, secondary mid-gray #86868B
- The whole site has one accent #2997FF (pressed #0071E3): links, CTAs, key spec numbers
- No decorative texture; whitespace is dramatic tension; one product and one message per viewport

### Signature: scroll-scrubbed frame sequence
Structure = a section ~350vh tall containing a sticky top-0 h-screen canvas:
```html
<section class="relative h-[350vh]">
  <div class="sticky top-0 h-screen flex items-center justify-center">
    <canvas aria-hidden="true"></canvas>
  </div>
</section>
```

Lazy-load (preload the 96 webp frames only in view):
```js
const io = new IntersectionObserver(([e]) => {
  if (!e.isIntersecting) return; io.disconnect();
  for (let i = 0; i < 96; i++) {
    const img = new Image();
    img.src = "/frames/frame-" + String(i).padStart(4, "0") + ".webp";
    frames[i] = img;
  }
}, { rootMargin: "50% 0px" });
io.observe(sectionEl);
```

rAF scrub (read scroll position once per frame):
```js
let raf = 0;
function draw() {
  raf = 0;
  const rect = sectionEl.getBoundingClientRect();
  const total = rect.height - innerHeight;
  const p = Math.min(1, Math.max(0, -rect.top / total));
  const idx = Math.min(95, Math.floor(p * 95));
  const img = frames[idx];
  if (img && img.complete) paint(canvas, img); // keep last frame if not loaded
}
addEventListener("scroll", () => { if (!raf) raf = requestAnimationFrame(draw); }, { passive: true });
```

Canvas sizing (devicePixelRatio-aware, capped at 2):
```js
const dpr = Math.min(2, devicePixelRatio || 1);
canvas.width = w * dpr; canvas.height = h * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
// object-fit: contain by hand: compute a uniform scale, letterbox with black
```

Frame count/size: a webp sequence (e.g. 1280x720), around 96 frames; always pair a poster.webp painted first to avoid a blank frame.

### Callout milestones
3-4 text blocks fade in + translateY at specific progress (e.g. p>0.2, p>0.5, p>0.8), animating opacity/transform only.

### Fallbacks (critical)
- prefers-reduced-motion: skip the scroll wiring, statically render the final frame frame-0095 with all callouts visible
- Frame not loaded: keep the last drawn frame (a drawn cache), never clear to a white flash

### Typography
System SF stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto...; hero clamps up to ~7rem with -0.03em tracking; weight contrast 600/400; specs in a grid of large numbers.

## Self-Verification Checklist

- [ ] Background is pitch-black with one electric blue and no second accent
- [ ] Scrub = sticky canvas + rAF, reading scroll once per frame
- [ ] 96 frames lazy-loaded via IO, poster painted first, last frame kept if not loaded
- [ ] devicePixelRatio capped at 2, explicit aspect-ratio to prevent CLS
- [ ] prefers-reduced-motion statically renders the final frame with all callouts visible
- [ ] Critical information is in the text layer, not the frames