# Explainer — how it works in 3 steps

## Format (read first)
- 1920×1080 (16:9), 30fps, 12.0s = 360 frames
- Target: Single HTML file

## Brief
An explainer (12s) for Ledgerly: "How Ledgerly works". Friendly, clear, flat illustration style built from simple shapes (no external images).

## Look
- Palette (background, accent, text): #fbf8f3, #ff6b4a, #22223b
- Type: Rounded sans. Title 72px/800, step labels 40px/700, numbers in 96px circles.

## Beats (exact timings)
1. 0.0–1.5s — Title "How Ledgerly works" writes on with a mask reveal; underline grows beneath it.
2. 1.5–4.5s — Step 1 "Connect your bank": numbered circle pops in (overshoot 8%), a simple shape-built icon animates (e.g. two nodes connecting), label slides up.
3. 4.5–7.5s — A dashed connector draws to Step 2 "Set your goals", which animates in the same pattern with its own icon motion.
4. 7.5–10.5s — Connector to Step 3 "Get a weekly plan", same pattern. Previous steps dim to 60%.
5. 10.5–12.0s — All steps return to 100%, the row scales to 0.9, and "Ledgerly" logo appears below. Hold.

## Motion rules
- Same entrance pattern for every step — repetition is clarity.
- Icons are built from circles/rects/lines only.

## Known failure modes — avoid these
- Inventing complex illustrations that look broken — keep icons to ≤ 5 primitives each.

## Build
- Output ONE self-contained HTML file. No CDNs, web fonts, images or scripts from URLs.
- The stage is exactly 1920×1080 and scales to fit the window (letterbox) while keeping the aspect ratio.
- Expose window.__addmotion = { width: 1920, height: 1080, fps: 30, duration: 12, 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
- [ ] Each step label readable for ≥ 2s
- [ ] Connector lines meet circles exactly
- [ ] 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.