Wordmark Product Teaser With Beat

# Product-Launch UI Motion – Continuous Morphing Animation

Generate a **single-file HTML5 canvas animation** (1440×1440 px) that tells a complete product story through **one continuously morphing shape**. No cuts, no scene transitions—every UI element transforms into the next in **one unbroken take**, driven by **spring physics** and **beat-synced interactions**.

---

## Visual Requirements

**Shape morphology:**  
One rounded rectangle drives the entire narrative. Its `width`, `height`, `borderRadius`, `x`, `y`, and `fillColor` are each **independent spring chains** so position, size, and color morph fluidly without coupling.

**Transformation sequence (24 beats @ 120 BPM):**

1. **Prompt bar** (beats 1–4): Typing animation reveals *{{product-name}}* request character-by-character with a blinking caret (blink only when idle). Cursor clicks **Send** on beat 4.  
2. **Collapse → button** (beats 5–6): Bar shrinks horizontally into a black circular button.  
3. **Progress ring** (beats 7–10): Circle grows a {{accent-color}} stroke that fills in **four discrete steps** (90° per beat). Four rounded chips labeled *Concept*, *Storyboard*, *Motion*, *Sound* spring outward in sync with each quarter-fill.  
4. **Chips → timeline** (beats 11–12): Chips fly into horizontal timeline formation; circle morphs into a **preview window** (rounded rect, black stroke).  
5. **Playhead sweep + content generation** (beats 13–16): A playhead scrubs the timeline clips left-to-right. Inside the preview:  
   - An orbit path draws itself  
   - A planet begins traversing the orbit  
   - The *{{product-name}}* wordmark rises **letter by letter** from behind a horizontal mask line (Inter Black, tracked wide)  
6. **Fullscreen preview** (beats 17–18): Preview window expands to fill the entire 1440×1440 canvas; camera zooms so the content is legible.  
7. **Completion toast** (beats 19–21): Letters drop away one-by-one; planet flies into top-right corner and becomes a **checkmark icon** inside a toast notification. Toast displays: *"Rendered in code · 60 fps"* (Inter Medium, 18 pt).  
8. **Return to prompt** (beats 22–24): Toast morphs back into the **empty prompt bar** at its original position. **Last frame must exactly match frame 1** for a seamless loop.

**Style rules:**

- Canvas: warm off-white (`#FAFAF8`)  
- UI elements: pure black (`#000000`) with {{accent-color}} highlights  
- Typography: Inter (UI at 16 pt Regular, wordmark at 48 pt Black)  
- Springs: `ζ = 0.7` (slight overshoot), `ω₀ = 8 rad/s`  
- **Banned:** crossfades between UI states, gradients on interface elements, particle effects, glows, bouncy easing (`ζ < 0.5`), dead time between beats, stock template aesthetics

---

## Technical Implementation

### Architecture

**Single HTML file** with embedded `<canvas>`, no external dependencies. All animation logic lives inside a **pure `seek(t)` function** that can render any frame from elapsed seconds alone—no CSS transitions, `requestAnimationFrame` state, or mutable variables between frames.

### Spring Physics

```javascript
// Closed-form critically damped spring step response
function spring(t, t0, from, to, zeta=0.7, omega=8) {
  const dt = Math.max(0, t - t0);
  const wd = omega * Math.sqrt(1 - zeta*zeta);
  const env = Math.exp(-zeta * omega * dt);
  const phase = Math.cos(wd * dt) + (zeta / Math.sqrt(1 - zeta*zeta)) * Math.sin(wd * dt);
  return to + (from - to) * env * phase;
}
```

When a property changes target **multiple times** (e.g., the main shape's width goes prompt → button → ring → window → fullscreen → toast → prompt), **sum independent springs** so each transition remains a pure function of `t`:

```javascript
const width = spring(t, 0, 600, 120, ...) + spring(t, beatTime(5), 0, 80, ...) + spring(t, beatTime(11), 0, 400, ...);
```

### Text Rendering

- **Typing effect:** `charsVisible = Math.floor(progress * text.length)`. Caret blinks (`sin(t * 4)`) only when `progress >= 1`.  
- **Text inside morphing shapes:** Render text in a **separate clipping region** with independent fade-in/fade-out springs (`opacity`) so swaps never overlap.  
- **Letter-by-letter wordmark reveal:** Each letter has `clipRect.y` animated by a spring offset by `index * 0.05s`.

### Audio Synchronization

Use **{{audio-track}}** (120 BPM, royalty-free, e.g., Mixkit).  

1. Analyze the track with `Essentia.js` or manual beat-grid marking to find the **first downbeat**.  
2. Align `t=0` to that downbeat.  
3. Place every cursor click, UI pop, chip spring, and chime **exactly on measured transient peaks** (±5 ms tolerance).  
4. Beat grid: `beatTime(n) = startOffset + (n / 120) * 60`.

### Cursor Choreography

Draw a system cursor (black circle, 12 px, white stroke) whose `(x, y)` follows a **Bézier path** sampled by `t`. The path must:  
- Start at the **Send button** position at `t=0`  
- Visit every click target (button, chips, playhead)  
- **Return to the exact starting coordinates** at `t = 24-beat duration` (loop constraint)  

Include a 3-frame scale spring (`0.8 → 1.0`) on each click beat.

---

## Rendering Pipeline

### Step 1: Proof-of-Concept Stills

Render **one frame per beat** (24 PNGs) with Playwright:

```javascript
for (let beat = 0; beat < 24; beat++) {
  await page.evaluate((t) => window.seek(t), beatTime(beat));
  await page.screenshot({ path: `beat_${beat}.png` });
}
```

**QA checklist before full render:**  
- [ ] Text is legible at every zoom level  
- [ ] No overlapping labels or clipped strokes  
- [ ] Springs settle before the next transition starts  
- [ ] Cursor path returns to start position  
- [ ] Beat-synced events land on visible motion peaks

### Step 2: Full Render (60 fps)

```bash
# Capture 1440×1440 @ 60 fps, duration = 24 beats = 12 seconds @ 120 BPM
playwright render --fps 60 --duration 12 animation.html frames/

# Encode H.264 high-quality + normalized audio
ffmpeg -framerate 60 -i frames/%04d.png -i {{audio-track}} \
  -c:v libx264 -crf 16 -preset slow -pix_fmt yuv420p \
  -c:a aac -b:a 192k -af loudnorm=I=-14:TP=-1.5:LRA=11 \
  -t 12 output.mp4
```

---

## Key Gotchas

- **Text swaps:** Fade out old text *completely* (`opacity → 0`) before new text fades in, or they'll render on top of each other.  
- **Clipping during morphs:** If text lives inside the morphing shape, give it a **separate `ctx.save()/clip()/restore()` block** with independent opacity springs.  
- **Loop seam:** The cursor's final `(x, y)` at `t = duration` must equal its initial position at `t = 0` within 1 px, or the loop will visibly stutter.  
- **Spring overshoot on text:** Animating `fontSize` or `letterSpacing` with springs causes readability issues—use **easeOutCubic** for typographic properties instead.  
- **Off-grid beats:** If a click lands between frames (60 fps ≠ 120 BPM divisions), round `beatTime(n)` to the nearest frame time (`Math.round(beatTime(n) * 60) / 60`).

---

**Deliverable:** One `animation.html` file that plays the complete morphing sequence when opened, plus the final `output.mp4` encoded per spec.