Motion design video: ClipUGC showreel

and this new prompt is specific for making mobile app motion video using Claude Code Opus 5.5. Prompt: Make a motion design video about this project, "like it's your showreel for a résumé". Go all out. Hard rules: - Every frame is drawn in code (HTML/CSS/SVG/canvas + GSAP) and rendered with Hyperframes. No templates, no After Effects, no stock footage. - The music is synthesized from scratch in a Node script (no samples, no stock tracks). Every cut, tap and impact is locked to its beat grid, and UI sounds land on the exact frames of the actions they belong to. - Only real material and real facts from this repo. Never invent features, numbers, testimonials or UI. - 18-25 seconds. Obey any writing-style rules the repo has (tone, banned words, punctuation). STEP 0: SETUP (assume nothing is installed; check each item, install only what's missing, report what you did) - Node.js 22+: `node -v`. If missing or older: macOS `brew install node@22`, Linux `nvm install 22`, Windows `winget install OpenJS.NodeJS.LTS`. - FFmpeg + ffprobe: `ffmpeg -version`. If missing: macOS `brew install ffmpeg`, Debian/Ubuntu `sudo apt install ffmpeg`, Windows `winget install Gyan.FFmpeg`. - Hyperframes CLI (via npx, no global install): `npx -y hyperframes --version`, then `npx hyperframes doctor`. Node, FFmpeg, FFprobe and Chrome must be ✓. If Chrome is missing, run `npx hyperframes browser ensure`. Whisper/Kokoro/MusicGen are not needed. - Hyperframes agent skills: `npx -y hyperframes skills`. Read hyperframes-core, hyperframes-animation, hyperframes-keyframes, hyperframes-creative and hyperframes-cli before writing code. - Optional storyboard discipline: `npx skills add https://t.co/wA84OlG57G --skill brag`, or `git clone --depth 1 https://t.co/wA84OlG57G` and copy `skills/brag/` to `~/.claude/skills/brag/`. Read its SKILL.md + references. - Local runtime assets (the render must never hit the network). In a temp dir: `npm init -y && npm i gsap@3 @fontsource/<font>`. Copy `gsap.min.js` to `brag-output/composition/assets/js/` and the `*-latin-<weight>-normal.woff2` files to `assets/fonts/`. Prefer the project's own fonts. - Remotion is not needed. Don't install it. - Ask before anything that needs sudo. STEP 1: READ THE PROJECT AND PICK THE MODE Read the README, theme/design tokens (exact colors, fonts, radii), logo/app icon, key flows and UI copy strings. Then pick: - MODE A, web product / SaaS / CLI / library: 1920x1080. Cinematic stage (dark unless the brand is clearly light). Hero moments are a code-drawn logo ignite, kinetic type, product media walls, a node graph of the pipeline, and a terminal if there's a CLI. - MODE B, mobile app: 1080x1920 vertical. Use the app's own theme (light or dark, exactly as the app ships). The hero is real app screens inside a code-drawn phone. Motion should feel like iOS/Android: springy bounces, screen push transitions, a finger touch indicator with ripples, UI pieces lifting out of the phone in 3D, and the finished result bursting out of the phone to full screen. If both exist (site + app), ask me which one, or do the one the prompt names. STEP 2: GATHER REAL MATERIAL - Mode A: screenshots, demo videos, real output samples, CLI commands, real counts from docs. - Mode B: find plain real screen captures, in this order: 1. Store screenshot folders without marketing frames (fastlane/metadata, distribution/store_screenshots, etc.). 2. The project's screenshot/preview tooling, if it can render them. 3. Simulator/device recordings. Skip marketing composites. Also grab the real app icon (iOS AppIcon 1024 or the Android launcher icon), sample output videos if the app produces media, and the official store badges. Use the repo's own badge files if they exist; otherwise get them from Apple's marketing tools and Google's Play badge page. Never redraw or alter a badge, and scale both to the same visual height. - Transcode every video small: `ffmpeg -i in.mp4 -t 5 -an -vf "scale=540:-2,fps=30" -c:v libx264 -crf 22 -pix_fmt yuv420p -movflags +faststart out.mp4`. - Mode B, measuring: scale each capture to a fixed width (e.g. 641px) with a grid: `ffmpeg -i s.png -vf "scale=641:-1,drawgrid=w=50:h=50:t=1:c=red@0.4" g.png`. Look at it and record the rects of every button, card, text field and video tile you will animate. In code, convert with K = screenWidthPx / 641. In zsh write `${i}` not `$i` next to a colon, because `$i:l` is a zsh modifier and breaks ffmpeg filter strings. STEP 3: PLAN (write brag-output/brag-plan.md) One-line pitch, angle, hook (first 2s), scenes with exact durations on a bar grid, copy per scene (max ~5 words per title, one accent word; readable text holds ≥0.3s per word), and the audio arc. Shape: Hook → Reveal → 3-4 highlights that show the real product in use → lockup with CTA (URL for web; icon + store badges for apps). - Mode B default arc: app icon pops, gets tapped and opens into the phone like an app launch → hook title → the core flow as numbered steps (one screen per step, with a real interaction on each: tap, pick, upload, type) → processing sheet → beat drop: result reveal with confetti, output bursting to full screen → a variety beat (cards fanning out) → icon + name + tagline + badges. Pick the tempo first (e.g. 120 BPM = 0.5s beats, 2s bars) and put scene changes, taps and drops on the grid. STEP 4: MUSIC (brag-output/work/synth.mjs: pure Node, no deps, 44.1k stereo 16-bit WAV written with Buffer, seeded noise) - Match the mood. Dark/cinematic products get minor key, saw pads, 808 kick, risers, booms. Light/friendly apps get major key (e.g. F-C-Dm-Bb), marimba/pluck motif, soft round kick, claps + snaps, shaker, bouncy bass, bright chord stabs in the drop. - UI sound kit, placed at the same times the picture uses (share one constants block between synth and composition): tap blip, bubble pop, swish for screen pushes, whoosh-up for launches/lift-outs, thud + chime for drops/uploads, typing ticks, success chime, confetti sparkles. - Sidechain the pads/bass off the kick. Schroeder reverb, tanh soft clip, normalize to -1 dBFS, fade the tail. Clamp every envelope input to [0,1] and throw on NaN (NaN renders silence). - Check with `ffmpeg -af ebur128` (aim for about -13 to -16 LUFS) and a `showwavespic` image. If the kick dwarfs the melody, rebalance. STEP 5: BUILD (brag-output/composition/index.html, one composition) Root div with data-composition-id/width/height/duration/fps, and one paused GSAP timeline registered at window.__timelines[id]. The music is an <audio id="..."> with data-start/data-duration. - Mode A toolkit: SVG path draw (pathLength=1 + dashoffset) with a spark head tracing the logo, then ignite (flash, shockwave, particle burst, camera shake, elastic punch); per-letter kinetic type; 3D flips, zoom-out walls, 3D carousels with whips; node graphs with pulses on beats; terminal typing; drifting ghost wordmark, embers, glow pulsing with the kick envelope, grain, vignette. - Mode B toolkit: - Phone frame (bezel, dynamic island, drawn status bar "9:41" + icons, 44px top pad so the island doesn't collide with captured headers). - Each screen is a layer (img + overlays) inside a clipped screen. Screen pushes: old one to xPercent -30 + dim, new one from 100 → 0 (~0.45s, power3.inOut). - Live <video> overlays placed exactly on the capture's thumbnails/tiles. - Finger indicator (translucent circle) that travels, presses (scale 0.8) and leaves an orange ripple, plus a short darken on the pressed button's rect. - Typing: cover the captured text field with a same-colored div, type into it char by char, then remove the cover so the real capture shows. Cover pre-selected chips/states the same way and reveal them at the end. - Lift-outs: stage-level cards that start exactly over the in-screen rects (compute via K, with the phone at rest), spring out in 3D to big sizes around the phone, float, then return to the same rects. Show a placeholder "hole" in the screen while they're out. - Result burst: a stage-level full-frame video starts scaled/positioned exactly over the in-phone video rect and expands to full bleed. Before placing UI over it, check where its own burned-in captions/watermarks appear across its whole duration. - Confetti/particles on a canvas. STEP 6: HYPERFRAMES GOTCHAS (all hit in real builds) - Load GSAP and fonts only from local files (@font-face to local woff2). - Never put a <video data-start> inside a wrapper with data-start. Scenes are untimed divs; every video carries its own data-start/data-duration, muted playsinline, no crossorigin. - Reveal hidden things with autoAlpha/opacity INSIDE the tween's destination (fromTo {autoAlpha:0} → {autoAlpha:1}). A bare tl.set(el,{visibility:"visible"}) can be skipped by cold-seek render workers, and the element stays invisible in the MP4 even though snapshots and the browser look fine. - Hide screens/scenes that are off-stage with autoAlpha 0. Clipped-but-present text gets flagged as occluded. - Put the FX canvas BENEATH text layers (under the phone in Mode B; spawn confetti above the phone so it shows). Draw vignettes inside the canvas. Full-frame overlay divs above text fail the occlusion check. - No CSS transform on anything GSAP tweens. Set initial states in fromTo. For one element use set + to, not two fromTo calls. Don't overlap two tweens on the same property of the same element. - No template literals inside querySelector/selector strings (the bundler's CSS parser crashes); concatenate strings instead. - Canvas and any computed 3D transforms are driven from one clock tween's onUpdate as a pure function of time. Seeded PRNG, no Math.random/Date, no repeat:-1. - Display text: line-height ≥1.1 + padding so masked letters don't clip. - Contrast: brand accent colors on light backgrounds often fail. Use a darker accent shade for text, and dark text on bright buttons. - If something renders wrong, debug in a real browser: serve the folder (`python3 -m http.server`), add a temporary `window.__timelines = window.__timelines || {}`, seek the timeline, read computed styles, then remove the debug line. STEP 7: VERIFY `cd brag-output/composition && npx hyperframes check` until 0 errors (lint, layout, motion, contrast). Snapshot every scene and mid-transition (`npx hyperframes snapshot --at t1,t2,...`), look at every frame, and fix overlaps, clipped text, empty areas and anything hidden. STEP 8: RENDER AND DELIVER `npx hyperframes render --quality delivery --output ../brag.mp4`. Verify with ffprobe (duration, audio stream), a 1fps contact sheet (`-vf "fps=1,scale=W:H,tile=CxR"`) and the frames at each strong cue. Pick the strongest settled frame as brag.jpg and bake it in as frame 0: `ffmpeg -i brag.mp4 -i brag.jpg -filter_complex "[0:v][1:v]overlay=0:0:enable='eq(n,0)'[v]" -map "[v]" -map '0:a?' -c:v libx264 -crf 16 -pix_fmt yuv420p -c:a copy -movflags +faststart out.mp4` (quote '0:a?' in zsh). Write share-copy.txt (1-2 plain sentences). Tell me where the files are, give one line on the creative angle, and offer the other aspect ratio.

I asked Claude Opus 5.5 to make me a motion design with a sound for ClipUGC Detailed prompt is in gist: https://t.co/OXg4qtD4WO