# App launch — phone mock + store buttons

## Format (read first)
- 1080×1080 (1:1), 30fps, 8.0s = 240 frames
- Target: Single HTML file

## Brief
A launch film (8s) for Ledgerly, a mobile app. It should feel confident and premium, never busy. One idea per beat. The viewer must be able to read every caption.

## Look
- Palette (background, accent, text): #0b0b0f, #7c5cff, #f5f5f7
- Type: One geometric sans (Inter or system-ui). Captions 56px/600, tagline 72px/800, letter-spacing -0.02em.

## Beats (exact timings)
1. 0.0–1.2s — Background fades from black. A rounded phone frame (radius 56px, 420×860 at 1080 square, 6px bezel) rises 120px from below with a spring (stiffness 120, damping 14). Soft shadow grows with it.
2. 1.2–3.0s — Screen 1 inside the phone: a minimal UI card stack that builds in 3 staggered rows (80ms apart). Caption left of the phone: "Track every account" slides in 40px from the left, ease-out-cubic 500ms.
3. 3.0–4.6s — Screens slide horizontally inside the phone (translateX -100%, 450ms ease-in-out-quint) to Screen 2. Caption swaps with a 12px vertical crossfade: "Budgets that adapt".
4. 4.6–6.0s — Same transition to Screen 3: "Weekly money check-in". The phone tilts 6° on Y for depth, then settles back.
5. 6.0–8.0s — Captions clear. The phone scales to 0.62 and glides to top-center (ease-in-out-cubic 800ms). The wordmark "Ledgerly" (88px/800) and tagline "Your money, finally calm." fade up below it, then two store badges ("Download on the App Store", "Get it on Google Play": black pills, white text, 64px tall) pop in with 6% overshoot, 100ms apart. Hold the final frame ≥ 1.0s.

## Motion rules
- No linear easing anywhere except opacity-only fades.
- Every element enters with a direction and leaves with one. Nothing just appears.
- Max two things moving at once. Text never moves while it is being read.
- Spring for physical objects (the phone), cubic/quint curves for UI and text.

## Known failure modes — avoid these
- Captions overlapping the phone on square formats — reserve a left column of 380px for text.
- Store badges drawn with real brand logos — use plain text labels unless official assets are supplied.

## Build
- Output ONE self-contained HTML file. No CDNs, web fonts, images or scripts from URLs.
- The stage is exactly 1080×1080 and scales to fit the window (letterbox) while keeping the aspect ratio.
- Expose window.__addmotion = { width: 1080, height: 1080, fps: 30, duration: 8, 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
- [ ] All three captions readable for ≥ 1.1s each at 1× speed
- [ ] Final logo + badges frame held ≥ 1.0s
- [ ] Nothing overlaps the phone's safe area or the 64px frame margin
- [ ] 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.