Event countdown — days to launch
A flip-style countdown to an event date with the event name and a call to action.
Prompt
# Event countdown — days to launch
## Format (read first)
- 1080×1080 (1:1), 30fps, 6.0s = 180 frames
- Target: Single HTML file
## Brief
A square teaser (6s) for "Launch Week" on June 12 · 10am PT. A big number counts down from 5 to 0 with flip-card motion, then reveals the event.
## Look
- Palette (background, accent, text): #101014, #4ade80, #fafafa
- Type: Number 420px/900 tabular; event 88px/800.
## Beats (exact timings)
1. 0.0–3.5s — Flip-card numbers count from 5 down to 0: each change is a top-half/bottom-half flip with perspective (rotateX), 280ms, evenly spaced.
2. 3.5–4.3s — On 0, the card splits and slides apart, revealing "Launch Week".
3. 4.3–6.0s — "June 12 · 10am PT" and a pill button "Set a reminder" fade up. Hold.
## Motion rules
- Flip must use perspective ≥ 800px and backface-visibility hidden.
## Known failure modes — avoid these
- Flip halves misaligned by 1px — split with clip-path on one element, not two separately sized boxes.
## 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: 6, 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 number visible for at least 250ms
- [ ] Date + CTA held ≥ 1s
- [ ] 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.