Launch Keynote

STYLEKIT_STYLE_REFERENCE
style_name: Launch Keynote
style_slug: launch-keynote
style_source: /styles/launch-keynote

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

# 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

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

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

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] 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