# Logo sting — draw-on, fill, wordmark

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

## Brief
A logo sting (4s) for Ledgerly. Elegant and short. The mark is: A rounded play triangle.

## Look
- Palette (background, accent, text): #0f0f10, #7dd3b0, #f5efe6
- Type: Wordmark in a heavy geometric sans, 160px/800, letter-spacing -0.03em.

## Beats (exact timings)
1. 0.0–1.2s — The mark's outline draws on via stroke-dashoffset (4px stroke, accent color), ease-in-out-cubic.
2. 1.2–1.7s — The fill floods in (opacity 0→1) while the stroke fades; the mark does a 4% scale pulse.
3. 1.7–2.6s — The wordmark "Ledgerly" slides out from behind the mark (masked, translateX -105% → 0), ease-out-expo.
4. 2.6–4.0s — Hold. A subtle 1px light sweep crosses the wordmark once at 3.0s.

## Motion rules
- Total motion budget: under 2.6s, then hold.
- No particles, no lens flares.

## Known failure modes — avoid these
- Dash length shorter than path length — compute getTotalLength() and use it for dasharray/offset.

## 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: 4, 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
- [ ] Logo legible from 1.7s onward
- [ ] Hold ≥ 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.