# SaaS feature promo — cursor walkthrough

## Format (read first)
- 1920×1080 (16:9), 60fps, 10.0s = 600 frames
- Target: Single HTML file

## Brief
A feature promo (10s) for Ledgerly introducing Smart Rules. Show, don't tell: a believable product UI, a cursor that moves like a human, and one clear payoff moment.

## Look
- Palette (background, accent, text): #f6f5f2, #2f6fed, #16181d
- Type: System UI sans. UI text 22px; headline 84px/800, letter-spacing -0.03em.

## Beats (exact timings)
1. 0.0–1.5s — A browser-chrome window (radius 16px, soft shadow) fades up 24px. Inside: a sidebar, a list of 5 rows, and a primary button "Create rule" top-right.
2. 1.5–3.2s — A macOS-style cursor enters from bottom-right and travels a curved (bezier) path to the button over 1.4s with ease-in-out; it decelerates in the last 20%.
3. 3.2–3.6s — Click: cursor scales 0.9 for 80ms, button darkens 8%, a ripple expands from the click point to the button edge and fades.
4. 3.6–6.5s — A panel titled "Smart Rules" expands below (height from 0, ease-out-expo 600ms). Three rule rows fill in with 120ms stagger; the list on the left re-sorts with FLIP-style movement (rows slide to new positions, 450ms).
5. 6.5–10.0s — Camera push: the whole UI scales to 0.8 and shifts left; "Your inbox sorts itself now." appears on the right in two lines with a mask reveal per line (100ms stagger). "Ledgerly" small logo bottom-right. Hold ≥ 1.2s.

## Motion rules
- The cursor never moves in a straight line or at constant speed.
- UI changes must look like real state changes (layout reflow), not decorative effects.
- One focal point at a time; dim (opacity 0.5) anything not in focus during the payoff.

## Known failure modes — avoid these
- Cursor drawn too small at 1080p — make it ≥ 36px tall.
- UI text too small to read — 20px minimum at 1080p.

## 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: 60, duration: 10, 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
- [ ] Click moment is unmistakable
- [ ] Re-sort motion is readable, rows never overlap mid-move
- [ ] Headline held ≥ 1.2s
- [ ] 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.