Master prompt: code-drawn motion showreel with synthesized music, for web products and mobile apps (Hyperframes + GSAP + Node synth)

A developer published a reusable master prompt for coding agents that generates 18-25 second motion-design showreels for web products and mobile apps, with every frame drawn in code via Hyperframes and GSAP and the soundtrack synthesized from scratch in a Node script. The prompt directs the agent to auto-install Node 22, FFmpeg and the Hyperframes CLI, read the target repo's design tokens and real UI material, then choose between a 16:9 cinematic product reel or a 9:16 mobile reel using real app screens inside a code-drawn phone. All cuts, taps and UI sounds are locked to a synthesized beat grid, and the prompt forbids stock footage, templates and invented features.

Paste into Claude Code or any coding agent from the root of any project. It installs what it needs, then decides between a web/product reel 16:9, cinematic and a mobile app reel 9:16, real app screens in a phone . Every frame is drawn in code with Hyperframes + GSAP, and the music is synthesized from scratch with every cut and tap on the beat. 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://github.com/latent-spaces/brag --skill brag , or git clone --depth 1 https://github.com/latent-spaces/brag 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.