# API / developer launch — typed code call + response

## Format (read first)
- 1280×720 (16:9), 30fps, 9.0s = 270 frames
- Target: Single HTML file

## Brief
A developer launch film (9s) for Ledgerly. The hero is real code — it must be legible and syntax-colored. Calm, precise, technical. No stock 'hacker' clichés (no matrix rain, no green-on-black glow).

## Look
- Palette (background, accent, text): #0d1117, #58a6ff, #e6edf3
- Type: Monospace for code (ui-monospace / JetBrains Mono fallback) 26px; sans for headline 64px/800.

## Beats (exact timings)
1. 0.0–0.8s — A rounded code card (radius 18px, 1px border at 12% white) scales from 0.96 to 1 and fades in, centered, 900px wide. Three window dots top-left.
2. 0.8–3.2s — Type the request "curl api.ledgerly.dev/v1/balance -H "Authorization: Bearer $KEY"" at 28 chars/sec with a blinking block caret (530ms period). Syntax colors: command, URL, flags, string.
3. 3.2–3.6s — Caret disappears; a small spinner (12px) runs for 300ms.
4. 3.6–5.4s — A status pill "200 OK" pops in (green, 6% overshoot). The response "{ "currency": "USD", "available": 48200.15 }" streams in line by line, 90ms per line, each line fading up 8px.
5. 5.4–7.0s — The card slides up 120px and dims to 40%. Three endpoint chips "/balance", "/transactions", "/webhooks" drop into a centered row below it with 90ms stagger — each in its own band, never overlapping the card.
6. 7.0–9.0s — Everything except the background fades out over 350ms. "Ledgerly" wordmark and the line "Ship it in an afternoon." rise in, centered. Hold ≥ 1.0s.

## Motion rules
- Typing speed must be constant and believable; never animate code characters individually with bounces.
- Keep code static once typed — no wobble, no glow pulses.
- Use a single accent color for interactive states (caret, status pill, chips).

## Known failure modes — avoid these
- Closing line colliding with the endpoint chips — give the end block its own vertical band.
- Long request lines wrapping mid-flag — shorten or break after a flag, never inside a string.

## Build
- Output ONE self-contained HTML file. No CDNs, web fonts, images or scripts from URLs.
- The stage is exactly 1280×720 and scales to fit the window (letterbox) while keeping the aspect ratio.
- Expose window.__addmotion = { width: 1280, height: 720, fps: 30, duration: 9, seek(t) } where seek(t) renders the exact frame for time t in seconds.
- Make every frame a pure function of t: compute positions from t (with easing functions you define) rather than accumulating state. Use requestAnimationFrame only to call seek(performance.now()/1000 % duration) for live preview.
- If you use CSS @keyframes, seek(t) must set animation-play-state: paused and a negative animation-delay of -t seconds on every animated element.
- To export MP4, step seek(t) frame by frame in a headless browser, screenshot each frame, and encode with ffmpeg.

## Done when
- [ ] Request and response readable at 720p
- [ ] Closing frame held ≥ 1.0s
- [ ] No element overlaps another in any frame
- [ ] You scrubbed the start, middle and end of every beat and nothing overlaps, clips or jumps

Before writing code, restate the beat list with frame numbers. Then build it in one pass.