Build a Context-to-Skill Motion Graphics Reel

Ask me for the chaos items to show, the final tagline, and whether I have a royalty-free music track around 120 BPM. Use the supplied defaults when I do not customize the items or tagline. If I have no track, synthesize a minimal 120 BPM beat with NumPy using kick, soft hi-hat, pad, and bass, avoiding rights issues. Before writing code, show me the animation state list on the beat grid and ask me for the inputs.

## Concept
“From chaos to one skill.” Scattered personal context—notes, screenshots, links, voice memos, photos, PDFs, and saved threads—is lasso-selected, placed into one folder, and transformed into a single `skill.md` file. Upload the skill once into an assistant window; then show it producing a motivation letter, content plan, reel script, and lecture notes. The message is: collect your context once, and your assistant can work from it repeatedly.

## Visual direction
Create Dribbble-quality UI motion in a vertical 1080×1920 composition for Reels/TikTok, at 24–60 fps. Use a strict brand palette: paper `#EDEBE7` background (never pure black); forest green `#3F4A3C` for text and dark blocks; sage `#9DA7A1` for neutral blocks; ultramarine `#0E1C52` with electric blue `#1F6AD4` as a paired accent. Clay `#BE3A2B` may appear only once, as a rounded (`0.15em`) highlight plate behind one word in the final tagline.

Use Poppins 700 uppercase, tracking −3%, for headlines (maximum five words and two lines); use Manrope 600–800 for UI text. Use flat, sharp-cornered blocks. No rounded cards, drop shadows, gradients, glow, neon, particles, emoji, or small captions/usernames at frame edges. Keep headlines left-aligned in the upper third, with at least 6% margins; never center them. Leave an empty zone in every frame. Use spring motion with at most a tiny overshoot. Content swaps use a short blur. The cursor drives every change with visible clicks and drags. Something happens on every beat. Avoid bouncy easing, dead time, stock AI/tech imagery, and template-like styling.

## Storyboard
Run at 120 BPM for approximately 13.5 seconds; one beat is 0.5 seconds.

- **0.0–2.0 s:** Headline: “YOUR CONTEXT / IS EVERYWHERE.” Two chaos items appear per beat, for eight total. Use the supplied item list; by default show: sticky note “reel hooks” (outlined paper); phone screenshot (ultramarine with chat bubbles); link bar “youtube.com/watch?v=visa”; voice memo (forest green, waveform, “0:47”); photo (sage block with mountain); PDF “ielts_notes.pdf”; document “motivation letter v3”; saved thread “context > prompts” (ultramarine). Items pop in slightly rotated and drift gently.
- **2.0–3.0 s:** Cursor enters and drags a lasso rectangle over all items. Each gets an electric-blue outline as the lasso covers it.
- **3.0–4.0 s:** On release, a forest-green folder labeled “context” pops into the center. Items fly into it in quick staggered order and shrink; the folder bumps slightly on each landing.
- **4.0–6.0 s:** Headline: “PACK IT INTO / ONE SKILL.” Morph the folder (size, color, and contents) into a file card labeled `skill.md` with a dark header. Type this Markdown line by line:
  ```markdown
  # my assistant
  ## voice: calm, clear, no fluff
  ## sources: notes, screenshots, links, voice memos, pdfs
  ## rules: ask before guessing
  ```
- **6.0–8.0 s:** Headline: “UPLOAD IT / ONCE.” Collapse the card into a small `skill.md` chip. Show an “assistant” window with a dashed drop zone labeled “drop your skill here” and an UPLOAD button. The cursor drags the chip into the drop zone and clicks UPLOAD. Fill a progress bar, then turn the button electric blue and change it to “✓ INSTALLED”.
- **8.0–10.5 s:** Headline: “USE IT FOR / EVERYTHING.” Switch the window to chat. Type “write my motivation letter” into the input, click send, and draw in a reply block. Then fly three result cards out of the window, one per beat: “content plan”, “reel script”, and “lecture notes”.
- **10.5–11.0 s:** Collapse everything into one `skill.md` chip and place it off-center at lower right.
- **11.0–13.5 s:** Freeze motion for the film’s only full stop. Drop out the beat and play one soft chord. Show the final tagline in the upper third: “BUILD IT ONCE. / USE IT FOREVER.” Draw the single clay plate behind “FOREVER” and turn that word white. Hold the final frame.

## Implementation and rendering
1. Deliver one HTML file at 1080×1920. Compute every style from time inside `seek(t)`; use no CSS transitions, timers, or state carried between frames.
2. Implement springs as closed-form step responses. When a value has multiple target changes, sum one spring per change so animation remains a pure function of time.
3. Implement drags as direct manipulation: while held, the dragged object follows the cursor; on release, it springs from its release position.
4. Start the beat grid on a downbeat. Align every UI sound (pops, clicks, typing ticks, whoosh, success chime) exactly to its beat or measured peak.
5. Render with Playwright at 120 samples per second, blend pairs with ffmpeg `tmix` for motion blur, and output 60 fps H.264 with the audio track.
6. Before the full render, render one frame per beat as a contact sheet. Fix anything off-grid, cramped, overlapping, or hard to read.

## Gotchas
Never apply `will-change` to anything that scales, or text may render blurry. Text swapping inside a morphing container needs separate enter and exit timing to prevent overlap. Keep the dragged chip and cursor above the assistant window in z-order. Set `white-space: nowrap` on long single-line labels such as the link. The final tagline is the only full stop in the film.