Hands-On Motion Design with Claude: Full Prompts, Iteration Workflows, and Export Steps

The internet is flooded with claims of "stunning animations from a single prompt," making it sound like typing one sentence instantly delivers a polished animation. In reality, you run into a very different picture: white ceramic looks like cheap plastic, metallic reflections wash out the typography, or the case lid pauses an extra frame when opening. Bridging the gap between "it moves" and "it looks great" comes down to fixing these issues one by one.

When crafting animations with Claude Opus 5.5, start by specifying the design details clearly: the shell material, light positions, camera move timing, and the exact frame the lid begins to open. Claude turns these requirements into animation code; you then pinpoint flaws using still frames and contact sheets, prompting it for revisions with exact frame numbers and parameters. To make the lid open earlier or soften the bounce, simply tweak the corresponding timings and numeric values.

Below, we start with a 4-second title animation to walk through prompting, previewing, adjusting visuals, adding audio, and exporting. Then, we break down the complete workflow for wireless earbuds, liquid chrome typography, and a 3D mascot. Prompts are provided with English originals by default alongside Chinese comparisons, separating initial requests from subsequent revision rounds so you can follow along and understand how a finished piece is fine-tuned.

1. Why generate animation code with Claude

Writing animations in code gives you pinpoint control over revisions. If an earbud lid opens too slowly, modify the timestamp range of the opening action; if metal looks like plastic, adjust the material properties and reflection environment. Product showcases, kinetic typography, and character loops can all be refined step by step this way.

Claude generates HTML and JavaScript based on your specifications, the browser renders the code frame by frame, and FFmpeg stitches those frames into an MP4 or GIF. Your design specifications dictate the visual aesthetic, while the code's timings and parameters govern how it moves.

• Freeze the same frame again: Express visual states as functions of time t. By pinning assets, dependency versions, and the render environment, you can re-render any exact instant to inspect before-and-after changes.
• Tunable parameters: Positions, lighting, camera angles, and easing curves are directly driven by code, giving every revision an exact target.
• Visual feedback loop: Feed still frames or contact sheets back to Claude, call out clipping meshes, washed-out text reflections, or delayed actions by frame number, have it update the corresponding code, and compare changes on the exact same frame.

How to use the prompts: English prompts provide the complete original instructions for generation, with Chinese comparisons available for reference; send whichever version fits your workflow without pasting both. Keep commands, API names, and parameters intact. The follow-up prompts in the case studies represent iterative adjustments made after reviewing previous outputs; for the initial run, send only the initial prompt.

Append the following universal rendering requirements to the end of your prompt. This ensures generated animations are easy to freeze, inspect, and export.

The key is to drive time via external input rather than relying on the computer's system clock. window.renderAt(t) must render any specified timestamp; when the URL contains ?t=, disable the real-time animation loop and set window.__ready = true only after fonts, textures, and scenes are fully loaded. Adding a freeze function without halting background loops can cause screenshots to be overwritten by the next frame.

English prompt

# The render contract: paste it under any motion prompt
Output one self-contained HTML file. Only the libraries the prompt names, pinned to a version.
No network requests except fonts and those pinned libraries.
Every frame must be a pure function of time t, in seconds.
If JavaScript drives any motion, expose window.renderAt(t) that draws exactly that frame.
Animate with CSS keyframes, the Web Animations API, SVG, Canvas 2D or WebGL.
No Date.now, no setTimeout or setInterval starts, no unseeded Math.random.
Loops: render frames 0 to N-1 only, and frame N-1 must flow into frame 0.

# 渲染要求：粘贴在任何动效提示词下方
输出单文件自包含 HTML。仅使用提示词中指明的库，且必须锁定版本。
除字体和上述锁定的库之外，不得发起任何网络请求。
每一帧必须是以秒为单位的时间 t 的纯函数。
若使用 JavaScript 驱动任何动效，必须暴露 window.renderAt(t) 用于精确绘制该帧。
使用 CSS keyframes、Web Animations API、SVG、Canvas 2D 或 WebGL 进行动画制作。
严禁使用 Date.now，严禁使用 setTimeout 或 setInterval 启动动画，严禁使用未设种子的 Math.random。
循环动效：仅渲染第 0 至第 N-1 帧，且第 N-1 帧必须流畅衔接回第 0 帧。

2. Turn vague adjectives into concrete specifications

Words like "premium," "modern," and "sleek" describe a vibe, not an actionable visual blueprint. Left to guess, the model will pick arbitrary materials, lighting, and movements, making it difficult to pinpoint what to change next.

Translate these subjective feelings into concrete design requirements: the shell's material, where the light falls, when the camera pushes in, which frame the lid opens, and which decorative elements to avoid. The earbud experiment below illustrates the difference.

Both versions below use Claude to create a wireless earbud animation. Compare the decorative clutter on the left with the materials, studio lighting, and lid opening on the right:

• Left (Vague Prompt A): Used just 27 words asking for something "cool, premium, and modern." It produced a generic deep-blue background, floating halos, drifting particles, spinning earbuds, and an unprompted marketing tagline.
• Right (Targeted Prompt B): Used 448 English words detailing exact model dimensions, ceramic and chrome shaders, hex values and intensities for a three-point lighting setup, anticipation mechanics before opening, spring physics parameters, and an explicit banned list.

The left version took about 30 minutes to generate as a first draft without follow-up iterations. The right version required 4 rounds across 15 visual revisions (about 90 minutes), plus 12 audio revisions (another 90 minutes). The polished right version came from defining specific design constraints upfront, followed by iterative refinement. Follow the same loop when adapting this: specify clear constraints → inspect the output → iterate.

Here is how to make specifications concrete:

• Turn "premium materials" into exact shader parameters: Satin white ceramic shell #F4F1EC (roughness 0.38, clearcoat 0.35) (lower roughness yields sharper reflections; clearcoat adds a transparent specular top layer), chrome metal parts (metalness 1.0, roughness 0.05), reserving Claude brand orange #D97757 exclusively for the interior charging cradle accent.
• Turn "studio lighting" into a three-point lighting rig: Key light in warm white #FFF4E8 (intensity 3.0, top-front-left, casting soft shadows); fill light in cool tint #E8EEF5 (intensity 0.6, bottom-right to lift deep shadows); rim light in pure white #FFFFFF (intensity 4.0, top-back-right to carve silhouettes), complemented by a studio reflection environment to produce crisp specular bands across metallic edges.
• Turn "dynamic camera moves" into explicit FOV and camera paths: Fix FOV at 30°; swing azimuth from 34° to 10° and ease back; push in starting at 2.0s, raising camera height and lookAt target simultaneously as the earbuds elevate.
• Turn "natural lid opening" into spring physics and anticipation: Between 0.72s and 0.95s before opening, apply an "anticipation" beat—counter-rotate the lid downwards by 1.5°, compress the case vertically by 2%, and hold for 3 frames to store kinetic tension; then snap open to 100° with a damping ratio of 0.6 and ~10% overshoot, settling completely before 1.4s.
• Turn "clean and minimal" into an explicit BANNED list: Strictly forbid purple-blue gradients, glowing orbs, bloom filters, neon lights, floating particles, continuously rotating pedestals, pure black backdrops, and cheesy promotional taglines.

Below is the English prompt for the vague left version, with an expandable Chinese comparison:

English prompt

Create a cool 3D product animation for a pair of wireless earbuds. Make it look premium and modern. One self-contained HTML file using three.js, 960x1080, 6-second loop.

为一副无线耳机制作一段酷炫的 3D 产品动效。使其看起来高级且具现代感。单文件自包含 HTML，使用 three.js，960x1080，6 秒循环。

Here is the full visual prompt for the version on the right. When adapting it, swap in your own product description while keeping the initial motion and shader parameters intact for the first pass; once you see the result, fine-tune individual settings to match your needs.

English prompt

GOAL: a studio product film for wireless earbuds: case opens, buds rise to the viewer, everything clicks shut.
OUTPUT: one self-contained HTML file, three.js 0.160.0 from jsdelivr (importmap), 960x1080.
TIME: 6-second loop, 60 fps = 360 frames, 120 BPM (1 beat = 30 frames). Hits land on beats.

MODEL (1 unit = 1 cm, primitives with bevels): case 6.0 x 4.6 x 2.2, 1.0 edge radius, split at 3.3, back-hinged lid, 0.06 split bevel, 0.045 chrome wire around the seam. Inside: D97757 deck, two dark elliptical wells. Buds: ellipsoid head 1.6 x 1.5 x 1.5, lathed silicone tip, 1.6 oval stem with a chrome end cap, dark grille. Seated heads sit flush with the deck.

LOOK: satin ceramic white F4F1EC (roughness 0.38, clearcoat 0.35), chrome (metalness 1, roughness 0.05), D97757 on the deck only, ink 1C1B1A, tips E4E0DA. Backdrop F0EDE8 center to DEDAD3 corners, dithered. Key FFF4E8 3.0 upper front left, soft shadows; fill E8EEF5 0.6 low right; rim FFFFFF 4.0 upper back right. Reflections: PMREM studio built in code (warm gray dome, overhead and key softboxes, rim strip). Contact shadows, opacity 0.55. Neutral tone mapping, 8% vignette, 2% grain seeded per frame.

SHOTS:
0.0 to 0.5 s: a 2.4-wide studio strip (from 5.5 s) sweeps left to right, glinting across the closed lid and seam.
0.72 to 0.95 s: anticipation: lid presses 1.5 degrees shut, case squashes 2%, hold 3 frames.
1.0 s: lid springs to 100 degrees (damping 0.6, about 10% overshoot, settled by 1.4 s).
1.5 s: buds rise 4.0 out of the wells, right first, left 4 frames later (damping 0.7). From rise frame 8 they tilt 14 degrees outward and turn 35 degrees to camera on a looser spring (damping 0.5): stems swing through and settle.
2.0 s: camera push-in.
2.4 to 4.0 s: hold, buds float 0.05 on a 1 s sine. 3.0 s: second glint crosses the buds.
4.0 s: buds straighten (0.2 s) and descend (easeInOutCubic, 0.45 s), seating with a 0.05 magnetic dip.
4.75 s: lid falls (easeInCubic), shuts exactly at 5.0 s, bounces 3 degrees, settles by 5.3 s; case recoils 1.5%.
5.5 s: next glint starts.

CAMERA: fov 30, never parked. Azimuth 34 to 10 degrees from 5.6 s to 4.0 s (easeInOutSine), back by 5.6 s (easeInOutCubic). Distance creeps 21 to 20.2, pushes to 16 at 2.0 s (easeOutExpo, 0.8 s), returns 4.0 to 5.6 s (easeInOutCubic). Buds up: elevation 12 to 19 degrees, target height 2.3 to 4.2.

BANNED: purple or blue gradients, glow orbs, bloom, neon, lens flares, particles, generic spinning turntables, dark backgrounds, text.

QA: renderAt(t) draws exactly time t, seeded noise only. Stills around every hit; frame 359 flows into frame 0.

GOAL: 一部无线耳机的影棚产品短片：耳机盒打开，耳机升起朝向观众，随后全部卡嗒一声合上。
OUTPUT: 单文件自包含 HTML，通过 jsdelivr (importmap) 引入 three.js 0.160.0，960x1080。
TIME: 6 秒循环，60 fps = 360 帧，120 BPM（1 拍 = 30 帧）。关键卡点落在拍点上。

MODEL（1 单位 = 1 cm，带倒角的基础几何体）：耳机盒 6.0 x 4.6 x 2.2，边缘倒角半径 1.0，在 3.3 处分缝，后置铰链盖，分缝倒角 0.06，接缝处绕一圈 0.045 镀铬线。内部：D97757 托盘面，两个深色椭圆插槽。耳机：椭球头部 1.6 x 1.5 x 1.5，车削硅胶耳塞套，1.6 椭圆手柄带镀铬底盖，深色网孔。耳机放入后头部与托盘面齐平。

LOOK: 缎面陶瓷白 F4F1EC（粗糙度 0.38，清漆层 0.35），镀铬（金属度 1，粗糙度 0.05），仅托盘面使用 D97757，墨色 1C1B1A，耳塞套 E4E0DA。背景由中心 F0EDE8 到角落 DEDAD3 抖动渐变。主光 FFF4E8 强度 3.0 位于左前上方，柔和阴影；辅光 E8EEF5 强度 0.6 位于右下方；轮廓光 FFFFFF 强度 4.0 位于右后上方。反射：代码构建的 PMREM 影棚（暖灰穹顶、顶部与主光柔光箱、轮廓光条）。接触阴影，不透明度 0.55。Neutral tone mapping，8% 暗角，每帧使用固定种子的 2% 颗粒。

SHOTS:
0.0 至 0.5 秒：一条 2.4 宽的影棚光条（延续自 5.5 秒）从左向右扫过，在闭合的盒盖与接缝上划过一道亮斑扫光。
0.72 至 0.95 秒：预备动作：盒盖紧压闭合 1.5 度，盒身下压变形 2%，保持 3 帧。
1.0 秒：盒盖弹开至 100 度（阻尼 0.6，约 10% 过冲，在 1.4 秒稳定）。
1.5 秒：耳机从插槽升起 4.0，右耳先升，左耳滞后 4 帧（阻尼 0.7）。从升起第 8 帧开始向外倾斜 14 度，并在更松的弹簧下朝向镜头转动 35 度（阻尼 0.5）：手柄摆动到位并稳定。
2.0 秒：镜头推进。
2.4 至 4.0 秒：定格停留，耳机在 1 秒正弦周期内悬浮漂动 0.05。3.0 秒：第二道亮斑扫光划过耳机。
4.0 秒：耳机回正（0.2 秒）并下落（easeInOutCubic，0.45 秒），到位时带有 0.05 的磁吸下沉感。
4.75 秒：盒盖落下（easeInCubic），在 5.0 秒准时合上，弹跳 3 度，在 5.3 秒稳定；盒身受冲击回弹 1.5%。
5.5 秒：下一轮亮斑扫光开始。

CAMERA: fov 30，镜头永不停滞。方位角从 5.6 秒到 4.0 秒由 34 度过渡至 10 度（easeInOutSine），在 5.6 秒前返回（easeInOutCubic）。距离从 21 缓慢潜移至 20.2，在 2.0 秒推进至 16（easeOutExpo，0.8 秒），在 4.0 至 5.6 秒返回（easeInOutCubic）。耳机升起时：仰角由 12 度升至 19 度，目标注视高度由 2.3 移至 4.2。

BANNED: 蓝紫渐变、发光光球、bloom、霓虹、镜头光晕、粒子、通用自转展台、深色背景、文字。

QA: renderAt(t) 严格绘制时间 t 的画面，仅使用带种子的噪声。围绕每个关键冲击点渲染静止帧；第 359 帧流畅衔接至第 0 帧。

# Round 1, after the first build (stills at 0, 1.25, 2.9 and 4.9 s)
The white case melts into the backdrop and the chrome reads gray. Drop the studio dome to about a third and push the softboxes, so the unlit sides fall off and the chrome shows dark and bright bands.
The open lid reads as a flat slab. Hollow it: 0.16 rim, 0.62 deep cavity, 0.22 fillet at the ceiling.
The round dark grille reads as an eye. Make it a slim slot.
Two dark marks poke through the bottom of the case: the well floors at 0.3 sit outside the bottom arc, which insets the wall by 0.29 at that height. Raise the floors to 0.5.
The deck reads salmon. Roughness 0.7.
# Round 2, after measuring pixels
Front and top are the same value and the right side vanishes into the backdrop. Key to (-7, 12, 8), rim to (2, 8, -12), still upper front left and upper back right. Overhead softbox 2.2, exposure 0.8.
The glint is a flood light: strip on vs off changes 178,864 pixels because the 60-tall strip lights the whole face. Keep the strip in reflections only (a second PMREM for the specular lookup, the static studio for diffuse) and go back to the 2.4 width from the brief.
Exposure 0.9 and key softbox 4.5 so the ceramic reads white. Deck specular 0.3 so the grazing reflection stops washing out D97757.
Give the wells a 0.07 machined round-over.
The buds read as mouse heads. Move the stem to the outer side, replace the ball tip with a short nozzle and a flattened silicone cap, and move the grille off the head (it read as an eye twice) onto the stem.
Crane faster: reach the high target by 2.3 s, so the heads keep headroom during the push.
# Round 3, after isolating each glint
The first glint is too shy for a hook. Clearcoat roughness 0.08, strip peak 24, and shift the sweep to -80 to 0 degrees so the band is mid-face on frame 0.
The second glint flashes the whole lid cavity (207,791 pixels at 3.3 s) because the strip crosses the mirror direction of the flat faces. Raise it to 8 to 61 degrees elevation, 4.8 wide: only the curved heads and stems catch it.
The hold parks the camera: add a 0.4 dolly creep from 2.8 to 4.0 s. Float the left bud 4 frames behind the right, like its rise.
# Round 4, frame-perfect pass
The anticipation holds 4 frames (57 to 60), not 3: the spring starts at rest exactly on 1.0 s, so the beat frame is still the pressed pose. Release half a frame early (59.5/60 s): frames 57 to 59 hold, including their motion-blur subframes, and frame 60 is the first open frame.

# 第 1 轮，初版构建后（在 0、1.25、2.9 和 4.9 秒截取静止帧）
白色外壳与背景融在了一起，镀铬材质看起来发灰。将摄影棚穹顶光降到大约三分之一并推高柔光箱，使暗面暗下去，让镀铬呈现明暗交替的条带。
打开的盒盖看起来像一块扁平厚板。将其掏空：边框厚度 0.16，内凹腔体深 0.62，顶面内侧倒角 0.22。
深色圆形格栅看起来像一只眼睛。将其改为细长缝隙条。
耳机盒底部透出两个暗印：位于 0.3 的座舱底面超出了底部圆弧外壁（该高度处外壁向内缩进 0.29）。将座舱底面抬高到 0.5。
内衬基座看起来发三文鱼色。粗糙度设为 0.7。
# 第 2 轮，测量像素后
正面与顶面明度相同，右侧淹没在背景中。主光调至 (-7, 12, 8)，轮廓光调至 (2, 8, -12)，仍保持左前上方与右后上方。顶部柔光箱 2.2，曝光 0.8。
掠光变成了泛光照明：开关光条会导致 178,864 像素发生明暗改变，因为高 60 的光条照亮了整个正面。让光条仅存在于反射中（用第二个 PMREM 查找镜面反射，静态摄影棚用于漫反射），并恢复需求文档中的 2.4 宽度。
曝光调为 0.9，主柔光箱调为 4.5，使陶瓷质感显出白色。内衬基座镜面反射设为 0.3，避免掠射反光将 D97757 冲淡泛白。
给座舱开孔边缘添加 0.07 的机械加工圆角倒边。
耳机头看起来像老鼠头。将耳柄移到外侧，用短导音管和扁平硅胶耳帽替换球形耳塞头，并将格栅从头部移到耳柄上（它已经两次被看成眼睛了）。
摇臂升降加速：在 2.3 秒前到达高位目标，以便在镜头推进过程中耳机头能保留上方的构图空间。
# 第 3 轮，单独隔离每道掠光后
第一道掠光太弱，不足以抓住眼球。清漆粗糙度设为 0.08，光条峰值强度设为 24，扫掠角度调整为 -80 到 0 度，使光带在第 0 帧时刚好处于正面中央。
第二道掠光闪亮了整个盒盖内凹腔体（在 3.3 秒处有 207,791 像素），因为光条掠过了平面区域的镜面反射方向。将其仰角抬高至 8 到 61 度，宽度设为 4.8：使仅有带曲率的耳机头和耳柄能捕捉到光芒。
画面定格让摄像机完全静止了：在 2.8 到 4.0 秒加入 0.4 的平移微推。左耳机的浮动比右耳机落后 4 帧，如同其升起动作。
# 第 4 轮，单帧级精修
预备动作定格了 4 帧（57 到 60 帧），而不是 3 帧：弹簧在正好 1.0 秒时处于静止起跳点，导致重拍帧仍停在下压姿态。提前半帧释放（59.5/60 秒）：第 57 到 59 帧保持定格（包括其运动模糊子帧），第 60 帧成为首个开启帧。

# Sound prompt
Score the A/B video. Synthesize everything in code with the Web Audio API, no samples, no downloads. 120 BPM, 6 s loop, 360 frames at 60 fps. Each hit lands 1 frame after its visual event, and so does the bed.
Bed: kick every 60 frames, 16th shaker, bass and pad F, B flat at 120, G minor at 240, C at 300.
Right half only:
44 to 60 reverse swell.
60 lid snap: click, 880 Hz body, 120 Hz thump.
90, 94 magnetic pops, air lift to 119.
96 to 120 push-in swell.
180 to 216, 330 to 30 glint shimmer.
240 to 267 falling swish, 270 seat click.
285 to 300 whoosh into the shut: click, 200 Hz thock, 70 Hz thump; ticks 306, 312.
Hits 3 to 6 dB over the bed, nothing above 8 kHz, mono-safe. Render twice, keep the second pass. 48 kHz stereo WAV, about -14 LUFS, peak -1 dBTP. Mux into the MP4 and check every hit in its decoded audio.
# Sound follow-ups (12), exactly as they were sent
# Round 1, after measuring the first render (80.6% of the energy under 60 Hz, 3.5% in 150 Hz to 6 kHz, median 58 Hz; hits 0.5 to 1.6 dB over the bed; bodies peaking 2.5 to 5 ms after the frame)
1. The sub buries everything. Play B flat, G and C an octave higher (117, 98, 131 Hz), open the bass to 900 Hz, shorten the kick to 80 ms and give it a 190 Hz knock. Raise the pad 5 dB and every hit 6 dB, ticks 6 and 10 dB under the shut.
2. Start every body and thump in cosine phase with a 0.5 ms attack, so the first waveform peak sits on frame + 1.
3. Give the push-in swell a clear peak: 60 ms exponential rise into frame 121, then a 25 ms drop into the camera tail.
4. Duck the bed 4 dB from the shut through tick 2 (frames 301 to 313).
5. Remove the DC: subtract each channel's loop mean.
# Round 2, after measuring the second render (full mix -14.0 LUFS but only -22.9 LUFS in the 200 Hz to 6 kHz phone band; hit stem minus bed stem, K-weighted: snap -0.3, pops -3.1 and -5.2, seat -6.9, shut +2.6, ticks -0.8 and -4.3, push-in -9.3 dB; kick peak 5 ms and snap thump 2.4 ms after frame + 1)
6. The bass still carries the loudness. Drop its sine to a third, open the saw to 1200 Hz, bass 2 dB down, pad 4 dB up and brighter (1600 Hz).
7. Hits to 3 to 6 dB over the bed: push-in swell +8 dB, seat click +6 dB, pops +4 dB, ticks 4 and 8 dB under the shut.
8. Phase every tone so its first waveform peak lands exactly on frame + 1, the kick included (cosine start, 1 ms attack).
# Round 3, after measuring the third render (phone band -17.5 LUFS against -14.0 full; phone-band hit minus bed: snap 6.4, pops 5.6 and 3.5, seat 2.3, shut 8.4, ticks 3.0 and 1.8, push-in 3.0 dB; the kick's first peak is on frame + 1 but its wider second lobe is 10% louder, 2.5 ms later; limiter up to 4.4 dB)
9. Give the kick a 3 ms transient (its level falls to 65% within 3 ms of frame + 1) and the knock 3 dB more, so its largest peak is the first one.
10. Shut 2.5 dB down with the ticks kept where they are (tick 2 then 3 dB up), seat click +2 dB, push-in swell +2 dB.
11. The kick's second lobe is still 6% louder: the knock's negative half lands on it. Knock decay 4 ms, kick attack 0.5 ms. Tick bodies decay in 12 ms so earlier tails cannot flip their lobes.
# Round 4, after decoding the muxed article MP4 in Chrome (offset -0.002 ms, every hit 0.0 to 1.3 ms after frame + 1, but the AAC encode lifts the true peak from -1.3 to -0.4 dBTP)
12. Limit the WAV to -2.2 dBTP so the decoded MP4 stays under -1 dBTP; keep -14 LUFS.

# 声音提示词
为 A/B 视频配乐。使用 Web Audio API 在代码中合成全部声音，不使用采样，不进行下载。120 BPM，6 秒循环，360 帧（60 fps）。每个打击点落在其对应视觉事件后 1 帧，伴奏亦同。
伴奏：每 60 帧一次底鼓，16 分音符沙锤，贝斯与铺底音色和弦为 F，120 帧处为降 B，240 帧处为 G 小调，300 帧处为 C。
仅右半部分：
44 到 60 帧：反向渐强。
60 帧盒盖弹开：咔哒声，880 Hz 琴体共鸣音，120 Hz 闷击声。
90、94 帧磁吸噗声，气流上升至 119 帧。
96 到 120 帧推进渐强。
180 到 216 帧、330 到 30 帧掠光闪烁。
240 到 267 帧下落呼啸，270 帧入座咔哒声。
285 到 300 帧呼啸进入关闭：咔哒声，200 Hz 沉闷撞击声，70 Hz 闷击声；306、312 帧轻微滴答声。
打击点高出伴奏 3 到 6 dB，8 kHz 以上无内容，单声道安全。渲染两次，保留第二次结果。48 kHz 立体声 WAV，约 -14 LUFS，峰值 -1 dBTP。混流合入 MP4 并在解码后的音频中检查每个打击点。
# 声音追问（12 条），原样发送
# 第 1 轮，测量首次渲染后（80.6% 的能量在 60 Hz 以下，3.5% 位于 150 Hz 至 6 kHz，中位数 58 Hz；打击点高出伴奏 0.5 到 1.6 dB；琴体共鸣峰值落后对应帧 2.5 到 5 毫秒）
1. 超低音掩盖了一切。将降 B、G 和 C 提高一个八度演奏（117、98、131 Hz），将贝斯放开到 900 Hz，底鼓缩短至 80 毫秒并赋予 190 Hz 的敲击感。将铺底音色提升 5 dB，每个打击点提升 6 dB，轻微滴答声分别低于关盒声 6 dB 和 10 dB。
2. 将每个琴体共鸣和闷击声以余弦相位起始并设置 0.5 毫秒起音，使首个波形峰值落在对应帧 + 1。
3. 给推进渐强一个清晰的峰值：60 毫秒指数级上升至第 121 帧，随后 25 毫秒衰减进入运镜尾段。
4. 从关盒到滴答 2 期间（301 到 313 帧）将伴奏闪避压低 4 dB。
5. 消除直流偏置：减去各声道的循环均值。
# 第 2 轮，测量第二次渲染后（全局混音 -14.0 LUFS，但在 200 Hz 至 6 kHz 手机频段仅有 -22.9 LUFS；打击点分轨减伴奏分轨，K 计权：snap 为 -0.3，pops 为 -3.1 与 -5.2，seat 为 -6.9，shut 为 +2.6，ticks 为 -0.8 与 -4.3，push-in 为 -9.3 dB；底鼓峰值落后对应帧 + 1 达 5 毫秒，弹开闷击落后 2.4 毫秒）
6. 贝斯依然主导着响度。将其正弦波降至三分之一，锯齿波放开至 1200 Hz，贝斯降低 2 dB，铺底音色提升 4 dB 且更明亮（1600 Hz）。
7. 打击点调至高出伴奏 3 到 6 dB：推进渐强 +8 dB，入座咔哒声 +6 dB，噗声 +4 dB，轻微滴答声分别低于关盒声 4 dB 和 8 dB。
8. 调整每个音色的相位，使首个波形峰值准确落在对应帧 + 1，包括底鼓在内（余弦起始，1 毫秒起音）。
# 第 3 轮，测量第三次渲染后（手机频段 -17.5 LUFS，全局 -14.0 LUFS；手机频段打击点减伴奏：snap 为 6.4，pops 为 5.6 与 3.5，seat 为 2.3，shut 为 8.4，ticks 为 3.0 与 1.8，push-in 为 3.0 dB；底鼓的首个峰值落在对应帧 + 1，但其较宽的第二瓣波形在 2.5 毫秒后响 10%；压限器压降达 4.4 dB）
9. 赋予底鼓一个 3 毫秒的瞬态（电平在对应帧 + 1 后的 3 毫秒内降至 65%），敲击感增加 3 dB，使其最大峰值成为第一个峰值。
10. 关盒声降低 2.5 dB，轻微滴答声保持当前位置（滴答 2 随后提升 3 dB），入座咔哒声 +2 dB，推进渐强 +2 dB。
11. 底鼓的第二瓣波形依然响 6%：敲击声的负半周刚好落在了上面。敲击声衰减 4 毫秒，底鼓起音 0.5 毫秒。滴答声音体在 12 毫秒内衰减，使较早的尾音不会翻转其波瓣。
# 第 4 轮，在 Chrome 中解码混流后的文章 MP4 后（偏移 -0.002 毫秒，每个打击点均在对应帧 + 1 后的 0.0 到 1.3 毫秒，但 AAC 编码将真实峰值从 -1.3 抬高到了 -0.4 dBTP）
12. 将 WAV 限制在 -2.2 dBTP，使解码后的 MP4 保持在 -1 dBTP 以下；保持 -14 LUFS。

3. Adapt this prompt template for your project

A comprehensive prompt must define the goal, output requirements, timing, visuals, motion design, storyboard beats, banned elements, and verification checks. For 3D products, append MODEL dimensions and CAMERA paths.

Each section answers a specific question, minimizing the gaps the model has to guess:

English prompt

GOAL: what the viewer should feel or do, in one sentence
OUTPUT: one self-contained HTML file (or Remotion, HyperFrames), W x H
TIME: seconds x fps = total frames. Loop: yes or no
LOOK: palette in hex, one accent, typeface + weight + size + tracking
MOTION: easing as cubic-bezier, springs as damping ratio, durations in frames
SHOTS: frame ranges, one hero move per shot, how each shot hands off
BANNED: the defaults you never want to see
QA: stills at named frames, a contact sheet, fix, then the full render

GOAL: 用一句话概括观众应该感受到什么或做出什么行动
OUTPUT: 单文件自包含 HTML（或 Remotion、HyperFrames），宽 x 高
TIME: 秒数 x fps = 总帧数。是否循环：是或否
LOOK: 十六进制调色板，一个强调色，字体 + 字重 + 字号 + 字距
MOTION: 缓动以 cubic-bezier 表示，弹簧以阻尼比表示，持续时长以帧数为单位
SHOTS: 帧范围，每个镜头一个核心主角动作，镜头之间如何衔接交接
BANNED: 你绝不想看到的默认样式
QA: 指定帧处的静止帧、多帧拼图（contact sheet），修复，然后导出完整渲染

Set goals and duration before choreographing motion

Begin with GOAL: what this animation communicates. Then define TIME: total duration, frame rate, and frame count. Next, schedule camera and asset choreography across the timeline—avoid piling lid opening, typography reveals, and broad camera sweeps onto the exact same timestamp.

Spotlight one primary action per shot. In multi-element layouts, delay secondary movements by 100–200 ms, scale their travel distance down to 50%–70% of the lead element, and keep ambient background drift below 5% to keep visual hierarchy clear.

Reusable prompt template

Copy the prompt template below directly and replace the bracketed placeholders with your project details before sending it to Claude:

GOAL: [Clarify the core action and emotion of the motion in one sentence, e.g., A premium, minimalist smartwatch rotates to showcase and unfold its core sensor interface]
OUTPUT: One self-contained HTML file, importing specified pinned library versions via jsDelivr importmap only [e.g., three.js 0.160.0], canvas size [e.g., 1080x1080]
TIME: [X]-second seamless loop, [60] fps = [total frames] frames, [120] BPM tempo (1 beat = [X] frames), key hits strictly land on beat frames

LOOK:
- Primary palette & materials: [Provide Hex colors, metalness, roughness, clearcoat parameters]
- Background & environment: [E.g., solid color or subtle noise gradient backdrop, strictly no pure black or cluttered textures]
- Studio lighting: [Define Hex colors, intensities, and placement orientations for key, fill, and rim lights, configure subtle soft contact shadows]

MODEL / CAMERA (3D only):
- Model: [Dimensions, units, relative positions of main body and parts, character proportions that must be maintained]
- Camera: [Field of view, start and end positions, lookAt target, and movement durations]

MOTION:
- Easing curves: Entrance [cubic-bezier(0.16, 1, 0.3, 1)], exit [cubic-bezier(0.7, 0, 0.84, 0)]
- Physics springs: Damping ratio for mechanical structures [0.6-0.7], damping ratio for follow-through secondary motion [0.5]
- Choreography rhythm: Hero action lasts [X] frames, secondary elements staggered by [Y] frames and start when hero reaches 40% completion

SHOTS:
- Frame 0 to F1: [Initial camera state, glint strip sweep or anticipation wind-up action]
- Frame F1 to F2: [Hero core unfolding action, camera follows with subtle push/pull]
- Frame F2 to F3: [Showcase hold period, text or detail reveal, maintain 2% subtle breathing push-in]
- Frame F3 to End frame: [Retract and settle back, smoothly hand off position, deformation, camera, and velocity across loop boundary]


BANNED:
- Strictly ban purple/blue sci-fi gradients, glow orbs, oversaturated bloom, neon outlines, cluttered floating particles, stationary constant-speed spinning turntables, pure black backgrounds

QA:
- Must expose window.renderAt(t) interface; all motion and noise must be completely determined by time t in seconds
- Strictly no Date.now(); random values must use a seeded pseudorandom function
- Stop real-time requestAnimationFrame loop when URL contains ?t=
- Set window.__ready = true once fonts, textures, and scene are ready
- Inspect specified keyframes and adjacent frames first to verify action, text, and loop seams before full export
- Render frames 0 to N-1 only for loops, maintaining periodic continuity in state and velocity

GOAL: [用一句话明确动效的核心动作与情绪，例如：高级极简的智能手表旋转展示并展开核心传感器界面]
OUTPUT: 单文件 self-contained HTML，仅通过 jsDelivr importmap 引入指定版本库 [例如: three.js 0.160.0]，画布尺寸 [例如: 1080x1080]
TIME: [X] 秒无缝循环，[60] fps = [总帧数] 帧，[120] BPM 节拍（每拍 = [X] 帧），关键卡点严格落在拍点帧上

LOOK:
- 主色调与材质: [给出 Hex 色值、金属度、粗糙度、清漆参数]
- 背景与环境: [例如纯色或微噪点渐变底色，严禁纯黑或杂乱纹理]
- 影棚灯光: [定义主光、辅光、轮廓光的 Hex 色值、强度与摆放方位，配置微弱接触软阴影]

MODEL / CAMERA（仅 3D 需要）:
- 模型: [主体与部件尺寸、单位、相互位置、需要保持的角色比例]
- 镜头: [视场角、起止位置、注视点与移动时间]

MOTION:
- 缓动曲线: 进场 [cubic-bezier(0.16, 1, 0.3, 1)]，退出 [cubic-bezier(0.7, 0, 0.84, 0)]
- 物理弹簧: 机械结构阻尼比 [0.6-0.7]，跟随次级动作阻尼比 [0.5]
- 编排节奏: 主角动作持续 [X] 帧，次级元素错开 [Y] 帧并在主角完成 40% 时启动

SHOTS:
- 0 到 F1 帧: [镜头初始状态，扫光或预备蓄力动作]
- F1 到 F2 帧: [主角核心展开动作，镜头跟随轻微推拉]
- F2 到 F3 帧: [展示定格停留期，文字或细节呈现，保持 2% 极微呼吸推镜]
- F3 到 结束帧: [收拢归位，循环边界的位置、形变、镜头与运动速度平滑衔接]

BANNED:
- 严禁紫蓝科幻渐变、发光光球、过饱和 bloom、霓虹描边、杂乱漂浮粒子、原地匀速自转展台、纯黑底色

QA:
- 必须暴露 window.renderAt(t) 接口，所有运动和噪声完全由秒数 t 确定
- 严禁使用 Date.now()，随机值必须使用固定种子的伪随机函数
- URL 含 ?t= 时停止实时 requestAnimationFrame 循环
- 字体、纹理和场景就绪后设 window.__ready = true
- 先看指定关键帧及其相邻帧，确认动作、文字和循环衔接后再导出全片
- 循环动画仅渲染 0 至 N-1 帧，保持周期状态与速度连续

Start with a 4-second title animation

For your first run, build a 4-second "Launch day" title card to master prompting, previewing, and exporting workflows without getting bogged down in complex 3D geometry.

This title card example includes an explicit exit sequence: letters stagger into place, hold for reading comprehension, and retreat downward to loop cleanly into the next cycle. (Frames 76–95 exit choreography added for this guide)

GOAL: Product Launch Day title card: letters rise letter by letter, hold for the audience to read, then return to the initial state.
OUTPUT: One self-contained HTML file, rendered with native CSS/SVG or Canvas, canvas aspect ratio 600x675.
TIME: 4-second seamless loop, 24 fps = 96 frames (frame 0 to frame 95).

LOOK:
- Canvas background: Pure white #FFFFFF
- Typography: Using Geist font (or system default sans-serif bold), font weight 800, font size 120px, slightly tight tracking -0.04em
- Text colors: Main title "LAUNCH" in deep carbon black #0F0F0F, accent word "DAY" in Claude brand orange #D97757

MOTION & SHOTS:
- Frames 0 to 33 (Staggered letter entrance):
  Letters rise from below the canvas clip boundary, without fading in via opacity. Each letter entrance lasts 14 frames, using an explosive ease-out-expo curve: cubic-bezier(0.16, 1, 0.3, 1).
  Letters start staggered 2 frames apart sequentially (L at frame 0, A at frame 2, U at frame 4...).
- Frames 34 to 75 (Absolute reading hold period, approx. 1.7 s):
  All text remains completely still, allowing sufficient cognitive time for readers to read clearly, maintaining text legibility without additional camera movement.
- Frames 76 to 95 (Loop exit phase · Guide adaptation addition):
76–89 frames: Text descends as a whole back into the clip boundary, transitioning with ease-in-out; frames 90–95 maintain the identical initial state as frame 0, with camera also returning to initial state.
  No fade-in or fade-out; check continuity across loop boundary.


BANNED:
- Strictly ban any blue/purple gradients, ban glow filters (drop-shadow/glow), ban disorderly blur fade-ins, ban all letters moving simultaneously.

QA:
- Expose window.renderAt(t) function on the page for external frame-by-frame driving, stop real-time animation when URL contains ?t=; set window.__ready = true once font loading is complete.

GOAL: 产品发布日（Launch Day）标题卡，文字逐字上升、停留给观众阅读，再回到初始状态。
OUTPUT: 单文件自包含 HTML，原生 CSS/SVG 或 Canvas 渲染，画布比例 600x675。
TIME: 4 秒无缝循环，24 fps = 96 帧（第 0 帧至第 95 帧）。

LOOK:
- 画布底色: 纯白 #FFFFFF
- 文字排版: 采用 Geist 字体（或系统默认无衬线粗体），字重 800，字号 120px，字距微紧 -0.04em
- 文字颜色: 主标题 "LAUNCH" 采用极深碳黑 #0F0F0F，强调词 "DAY" 采用 Claude 品牌橙 #D97757

MOTION & SHOTS:
- 0 到 33 帧（字母错峰进场）:
  字母从画布裁切区域下方上升，不通过透明度淡入。每个字母进场持续 14 帧，采用爆发感极强的 ease-out-expo 曲线：cubic-bezier(0.16, 1, 0.3, 1)。
  各个字母依次错开 2 帧启动（L 在第 0 帧，A 在第 2 帧，U 在第 4 帧...）。
- 34 到 75 帧（绝对阅读定格期，约 1.7 秒）:
  所有文字完全静止，留出足够的认知时间供读者清晰阅读，保持文字可读，不加额外运镜。
- 76 到 95 帧（回环退出阶段 · 本指南改编补充）:
76–89 帧：文字整体向下退回裁切区域，用 ease-in-out 过渡；90–95 帧保持与第 0 帧相同的初始状态，镜头也回到初始状态。
  不淡入淡出；检查循环边界的连续性。


BANNED:
- 严禁任何蓝紫渐变、严禁发光滤镜（drop-shadow/glow）、严禁无序的模糊淡入、严禁所有字母同时动作。

QA:
- 页面暴露 window.renderAt(t) 函数供外部逐帧驱动，URL 含 ?t= 时停止实时动画；字体加载完成后设 window.__ready = true。

4. What these motion settings control

"A bit faster" or "too squishy" works as an initial reaction, but pinpointing the exact segment and parameter for Claude makes iterations measurable and repeatable.

Use these values as starting points for your first attempt.

Starting and stopping: easing curves

Use ease-out for entrances so elements arrive swiftly and settle smoothly. Use ease-in for exits, keeping durations 40%–50% shorter than entrances for a crisp dismissal. Reserve linear for constant rotations, progress bars, and looping phases; apply easing curves to any motion requiring distinct starts and stops.

Bounce amount and settling time: damping ratio

Spring physics allow moving objects to decelerate naturally near their targets, often overshooting before snapping back. The damping ratio ζ governs how oscillations decay, while natural frequency controls oscillation speed.

Damping ratio ζ = d ÷ (2 × √(k × m)), where d is damping coefficient, k is stiffness, and m is mass.

Apply spring physics to position and scale for tactile elasticity; keep opacity and color transitions strictly monotonic to avoid visual flicker. Drag the damping slider below to see how identical objects overshoot, oscillate, and settle.

Syncing to beats: convert tempo to frame counts

When cutting to music, calculate keyframe numbers directly from the tempo.

• Frames per beat: FPS × 60 ÷ BPM.
• 120 BPM at 24 FPS: Exactly 24 × 60 ÷ 120 = 12 frames per beat.
• 128 BPM at 30 FPS: 30 × 60 ÷ 128 = 14.0625 frames per beat.
  • Never accumulate rounded integers: Do not round each beat to 14 frames and increment repeatedly! Over 32 beats, rounded frames reach 14 × 32 = 448 frames, while the audio has actually reached 14.0625 × 32 = 450 frames. You will drift 2 full frames behind, creating noticeable audiovisual desync.
  • The correct approach: Calculate each beat's frame index from absolute time and round individually: frame = Math.round(n * (fps * 60 / BPM)).

Reading pauses and action intervals

• Text reading pause: In English, a rule of thumb is 0.3 seconds per word plus a 0.5-second baseline; for other languages or audiences, avoid mechanical formulas and validate reading comfort through real-world user testing.
• Micro-interaction feedback: Start with 100–200 ms.
• Element motion transitions: 200–500 ms.
• Hero reveals: 600–900 ms.
• Stagger intervals: When staggering a list or typography sequence, trigger the next element when the preceding element reaches 30%–50% of its motion path. Pure sequential chaining feels sluggish, while triggering everything at once destroys visual hierarchy.

5. Walk through the workflow from preview to export

Once your prompt is ready, generate and preview the animation, inspect and iterate on visual frames, and finally add audio and render the final video. Follow this practical step-by-step sequence.

When starting out, skip copying all the long case studies at once. Take the fastest path to validate your setup: grab the 4-second title animation prompt from Section 3, attach the universal rendering requirements, and have Claude generate anim.html. Verify that you can pause and inspect frames in the browser; then run through the export steps to output 96 PNGs and encode a silent out/anim.mp4. Once the visuals look right, generate the WAV audio track and mux it into the final final.mp4.

Step 1: Choose how to run your animation

Fast preview: browser playback with screen recording

If you prefer not to install local developer tools, you can run and iterate directly in the browser:

1. Open the Claude web interface and select Opus 5.5.
2. Paste your prompt with complete specifications, adding this note at the end:

   "Please add a real-time frame counter in the corner and support pressing the Spacebar to pause/play at any moment."

3. Run the generated HTML directly in Claude's preview window. Hit the Spacebar whenever an issue catches your eye, note the exact frame index in the top-left corner (e.g., Frame 84), and instruct Claude to fix the problem by frame number.
4. Once satisfied, download the HTML file and open it full screen in local Chrome.
5. Quick screen recording: Ask Claude to hide the frame counter, pause overlays, and debug controls before recording. On macOS, press Cmd + Shift + 5 to capture the window; on Windows, use the built-in Snipping Tool video recording mode. This setup is great for quick rhythm checks on mobile or social feeds.
   • Tip: Some 3D code relying on external shaders or complex importmap modules may hit security restrictions in Claude's web sandbox. If that happens, download the HTML locally and open it in Chrome; if errors persist, feed the browser console logs back to Claude to resolve them.

Frame-accurate export: running locally

To enable headless frame-by-frame capture, eliminate dropped frames, and encode clean, high-bitrate MP4s locally, use the official Claude Code CLI.

Prerequisite setup: Make sure your machine has the official Claude Code CLI installed.

• macOS: Install via Homebrew: brew install --cask claude-code (or run the official install script);
• Windows: Install via winget: winget install Anthropic.ClaudeCode.

Once Claude Code is installed, open your terminal and run the setup commands for your operating system. The macOS snippet assumes Homebrew is installed; on Windows, launch a fresh terminal after installation and use npx.cmd if PowerShell restricts standard npx.

Original macOS initialization script:

# macOS: Node, ffmpeg and a headless browser (Claude Code already installed)
brew install node ffmpeg
mkdir motion-lab && cd motion-lab
npm init -y
npm i -D playwright
npx playwright install chromium
claude            # then type /model and pick Opus 5.5

Original Windows 11 (PowerShell) initialization script:

# Windows 11, PowerShell: the same lab (open a NEW terminal after winget)
winget install OpenJS.NodeJS.LTS
winget install Gyan.FFmpeg
mkdir motion-lab; cd motion-lab
npm init -y
npm i -D playwright
npx playwright install chromium
claude            # then type /model and pick Opus 5.5

Running claude opens an interactive session. Feed it the Section 3 title animation prompt and have it save the output as anim.html in your project root. When running subsequent node and ffmpeg commands, exit the Claude session or open a separate terminal window in the same motion-lab directory. Verify your environment by running node --version and ffmpeg -version to confirm both tools are accessible.

Set up a dedicated headless rendering script in your project root. A "headless browser" runs programmatically without launching a visible window. This script uses Playwright to launch Chromium and open the page with ?t=0. The animation code pauses real-time loops as agreed, sets window.__ready = true once fonts, textures, and scenes are loaded, and the script calls renderAt(t) frame by frame to export individual PNGs.

// Adapted for this guide: stop live animation when ?t= is present; set __ready=true after loading.
// Usage: node render.mjs anim.html seconds FPS width height
import { chromium } from 'playwright';
import { pathToFileURL } from 'node:url';
import { resolve } from 'node:path';
import { mkdir, rename } from 'node:fs/promises';
import { randomUUID } from 'node:crypto';

const [file='anim.html', seconds='6', fps='24', width='1200', height='675'] = process.argv.slice(2);
const S=Number(seconds), F=Number(fps), W=Number(width), H=Number(height);
if (!(S>0) || ![F,W,H].every(x=>Number.isSafeInteger(x)&&x>0)) {
  throw new Error('Seconds must be greater than 0; FPS, width, and height must be positive integers.');
}
const N=Math.round(S*F);
if (N<1) throw new Error('Duration and frame rate must produce at least 1 frame.');
const frameDir='out/frames';
// Preserve previous frames, then export into an empty directory to prevent stale trailing frames.
await mkdir('out',{recursive:true});
try {
  await rename(frameDir,frameDir+'-previous-'+randomUUID().slice(0,8));
} catch (error) {
  if (error.code!=='ENOENT') throw error;
}
await mkdir(frameDir,{recursive:true});
const url=pathToFileURL(resolve(file));
url.searchParams.set('t','0');
const browser=await chromium.launch();
try {
  const page=await browser.newPage({viewport:{width:W,height:H},deviceScaleFactor:1});
  await page.goto(url.href,{waitUntil:'networkidle'});
  await page.evaluate(async()=>{await document.fonts.ready;});
  await page.waitForFunction(
    ()=>window.__ready===true && typeof window.renderAt==='function',
    null,{timeout:60000}
  );
  for(let i=0;i<N;i++) {
    await page.evaluate(t=>{
      // Freeze CSS/WAAPI animations too; renderAt must compute all JavaScript states from t.
      document.getAnimations().forEach(a=>{a.pause();a.currentTime=t*1000;});
      window.renderAt(t);
    },i/F);
    await page.screenshot({path:`${frameDir}/${String(i).padStart(4,'0')}.png`});
  }
  console.log(`Exported ${N} frames, numbered 0 through ${N-1}; viewport ${W}×${H}, FPS ${F}.`);
} finally {
  await browser.close();
}

When testing later case studies, make sure to include the Section 1 universal rendering requirements and explicitly instruct Claude: stop real-time animation loops when the URL has ?t=, and set window.__ready = true once assets finish loading. Otherwise, the capture script may hang or snapshot incorrect frames.

Save Claude's code output as anim.html and the script above as render.mjs in the same directory. This script archives older frames and exports into a clean directory to prevent stale frames from polluting new renders. When ready, run:

node render.mjs anim.html 4 24 600 675

Argument breakdown:

• anim.html: Path to your animation HTML file;
• 4: Total animation duration in seconds;
• 24: Render frame rate (FPS);
• 600: Canvas width in pixels;
• 675: Canvas height in pixels.

Important: Width, height, and frame rate must match your animation settings. For the 6-second 60fps 1080x1080 square canvas case study later on, adjust the command to: node render.mjs anim.html 6 60 1080 1080.

Rendered PNGs will be saved to out/frames. The title animation above should generate 96 images; to compile them into a silent video, run:

ffmpeg -framerate 24 -i out/frames/%04d.png -vf "pad=ceil(iw/2)*2:ceil(ih/2)*2" -c:v libx264 -pix_fmt yuv420p -crf 18 -movflags +faststart out/anim.mp4

The title canvas is 600×675; pad adds 1 pixel at the bottom to produce an even 600×676 dimension required by H.264 / yuv420p encoding without stretching the image. When exporting at 60 FPS, change 24 to 60 in the command. Filter documentation

Start with medium thinking effort. If two consecutive generations from scratch fall short of your expectations, increase the thinking effort; continue specifying material, camera, and motion parameters clearly in the prompt.

Step 2: Review still frames and pinpoint edits for Claude

Examine three core aspects on your initial render: whether geometry and styling match, when movements begin and end, and whether the primary focus is immediately readable. The liquid chrome, earbud, and mascot case studies underwent 10, 15, and 4 visual revisions respectively; the review methods below help pinpoint those issues quickly.

Avoid rewatching full video clips repeatedly when reviewing early code drafts. Instead, use FFmpeg to export a 4x3 contact sheet to inspect key time slices side by side in a single overview:

# Contact sheet: every 12th frame, 4 across, 3 down
ffmpeg -framerate 24 -i out/frames/%04d.png -vf "select='not(mod(n\,12))',scale=400:-1,tile=4x3" -frames:v 1 out/contact.png

Note: The contact sheet command above defaults to sampling every 12 frames (every half second) at 24 FPS to create a 4x3 grid of 12 images, covering the first 6 seconds (144 frames). If you are rendering an 8-second 60 FPS (480-frame) piece like the case studies later, increase the sample interval to every 40 frames or generate two separate contact sheets.

For the 4-second, 24 FPS title animation above, sampling every 8 frames yields exactly 12 overview images. Run this one-liner:

ffmpeg -framerate 24 -i out/frames/%04d.png -vf "select='not(mod(n\,8))',scale=400:-1,tile=4x3" -frames:v 1 out/contact.png

Inspect frames 0, 24, 48, 72, and 95 of the 4-second title animation. When adapting the review instructions below, change frame 96 to 95; to add a 36-frame reading pause, adjust your exit timing and total frame count accordingly.

Once you spot an issue, translate vague impressions into verifiable design checks. Below are 7 practical review prompts you can copy directly based on your needs:

1. Verify storyboard alignment: "Render individual still frames at frames 0, 24, 48, 72, and 96. Describe what you see in each frame from a viewer's perspective in a single sentence. Does this match our prompt's storyboard? Fix any code discrepancies."
2. Eliminate competing motion: "Generate a contact sheet sampled every 12 frames. Call out every frame where two objects compete for visual attention simultaneously, then re-choreograph the hierarchy between primary and secondary motion."
3. Inspect easing with onion skinning: "Composite frames 24 through 47 into an onion skin image at 25% opacity. If spacing between silhouettes is completely uniform, the motion is too mechanical—tighten spacing near keyframe boundaries. Tweak the bezier curves until spacing tightens as expected."
4. Audit velocity curves for abrupt stops: "Plot frame-by-frame line graphs of the hero element's X position and scale. Flag any segments showing straight lines (unnatural linear motion) or sharp right angles (abrupt hard stops), and replace them using our standard easing curves."
5. Senior design review: "Audit this draft like a senior motion design director: list 10 concrete revision notes ordered by visual impact, specifying exact frame numbers and corresponding code changes for each. Implement the top 5 highest-impact items first."
6. Simplify visual clutter: "The current composition feels visually overloaded and busy. Remove 30% of non-essential decorative animations, retaining only the core motion paths that direct the viewer's eye."
7. Add an exit breathing pause: "The ending cuts off too abruptly. Add a 36-frame resting hold before the finish, accompanied by a subtle 2% camera push-in, letting the subject settle into place with a 0.8 damping spring."

Expand below to copy the original English review prompts, matching the descriptions above item by item:

Render stills at frames 0, 24, 48, 72 and 96. Describe each in one sentence as a viewer would. Does that match the shot list? Fix what does not.
Make a contact sheet of every 12th frame. Mark every frame where two things move at once, then fix the hierarchy.
Onion-skin frames 24 to 47 at 25% opacity. Spacing should tighten near the keys. Adjust the easing until it does.
Plot the hero's x position and scale per frame as a PNG chart. Show me where the motion is linear or stops dead, then fix it with our tokens.
Review this like a senior motion designer: 10 notes ordered by impact, each with a frame number and the exact code change. Apply the top 5.
It is too busy. Remove 30% of the motion and keep only the moves that guide the eye.
The ending is abrupt. Add a 36-frame hold with a 2% push, then let it settle on a spring at damping ratio 0.8.

Tackle 1–2 items per revision round and evaluate the updated frames before moving on. Stacking too many conflicting changes at once often triggers full rewrites rather than surgical fixes.

When meshes clip through surfaces on impact or landing, compare adjacent frames side by side to catch the exact frame where deformation or position snaps abruptly:

English prompt

The fix at frame 84 did not hold. Render frames 83 and 85 as PNGs, put them side by side and list every difference you can see. Find the line of code that causes it, fix only that line, then render both frames again.

第 84 帧的修复未生效。将第 83 帧和第 85 帧渲染为 PNG，并排摆放并列出你能看到的所有差异。找出导致该问题的单行代码，仅修改该行，然后重新渲染这两帧。

Step 3: Add audio after the visuals settle

Review your animation on mute first. Confirm the pacing and visual storytelling hold up on their own before introducing audio.

Audio can be choreographed frame by frame: synthesize kicks, clicks, drops, and musical layers with the Web Audio API, then align their triggers to visual beats like lid actuation, floor impacts, and light sweeps.

1. Zero external audio samples required: Every kick, inhale swoosh, magnetic click, and ambient drone is synthesized via the Web Audio API using pure code (sine waves, white noise generators, and exponential decay envelopes).
2. Establish sound event timing: These three case studies place peak audio transients exactly 1 frame after visual contact, which translates to roughly 16.67 ms at 60 FPS. Use frame indices to snap key sound effects precisely to opening, impact, and landing beats.
3. Define audio output targets: Export 48 kHz stereo WAVs mastered to roughly -14 LUFS integrated loudness with true peaks below -1 dBTP. Include both format specs and loudness targets in your prompt.

Export audio to a file first (Guide addition)

Export a standalone WAV file before muxing audio into your MP4. Instruct Claude to leverage the Web Audio API's OfflineAudioContext (which computes audio entirely in memory without real-time playback) to render the mixdown into an AudioBuffer matching the exact animation duration, encode it to a 48 kHz stereo WAV, and present a download button. Download the file into your project root as soundtrack.wav. Keep audio duration identical to video length, calculate sound triggers from your animation FPS and event frames, and preview audio in-browser to verify; offset sound peaks 1 frame after contact only where physical impacts occur.

English prompt

Score this 4-second title animation (96 frames, 24 fps). Synthesize all audio in code using the Web Audio API with zero external sound files. Match the audio duration to the animation and use its 24 fps to convert event frames into audio times. If explicit visual events occur, position the transient audio peak 1 frame after the event frame. Use OfflineAudioContext to render the full stereo mix in memory, encode the resulting AudioBuffer into a 48 kHz stereo WAV, and provide a download trigger for soundtrack.wav; I will place the downloaded file in the project root. Include a preview playback button in the page so I can audition the sound before exporting.

为这个 4 秒（共 96 帧，24 fps）标题动画生成纯代码音效。所有声音均使用 Web Audio API 合成，不引用外部音频素材。音频时长与画面相同，按画面的 24 fps 换算声音事件时间；若画面中存在明确的动作事件（如标题定格），将对应声音的瞬态峰值落在事件后 1 帧。请使用 OfflineAudioContext 离线渲染完整长度的双声道混音，将 AudioBuffer 编码为 48 kHz 立体声 WAV 并提供下载按钮；下载后由我放到项目根目录，命名为 soundtrack.wav。同时在页面上提供预览试听播放控制，便于在导出前核对声画同步。

4. Muxing and packaging command: Use FFmpeg to combine the independently rendered frames and synthesized audio track into the final MP4:

# Music + sound effects, mixed, normalized to -14 LUFS, muxed under the picture
ffmpeg -i out/anim.mp4 -i music.wav -i sfx.wav -filter_complex "[1:a][2:a]amix=inputs=2:duration=first,loudnorm=I=-14:TP=-1:LRA=11[a]" -map 0:v -map "[a]" -c:v copy -c:a aac -b:a 192k -shortest -movflags +faststart out/final.mp4

The command above assumes you already have out/anim.mp4, music.wav, and sfx.wav, outputting out/final.mp4. If Claude generates a single premixed WAV directly, save the file as soundtrack.wav in the project root directory and merge it with the command below; it will not remix already mixed audio.

ffmpeg -i out/anim.mp4 -i soundtrack.wav -map 0:v:0 -map 1:a:0 -c:v copy -c:a aac -b:a 192k -shortest -movflags +faststart out/final.mp4

Listen once with headphones to confirm audio aligns with movement; then play it through phone speakers to check if opening the lid, seating, and clicks sound clear. Phone speakers struggle to reproduce low frequencies below 60 Hz; if the bass is too heavy, boost midrange sound effects so key actions remain audible.

Step 4: Check loop seams after exporting

To ensure a smooth loop, check two things first:

1. Export frames 0 to N−1 to avoid repeating the first frame. In an animation with a cycle of N frames, frame N is mathematically identical to frame 0. If you also export frame N, the video will play two identical frames in a row at the loop seam, appearing visually as a brief pause.
2. Match visual state and velocity. Design objects, camera, lighting, and noise cyclically: a full rotation returns to the same pose, wave oscillations complete integer cycles within the clip duration, and noise is sampled along a closed circular path. Both position and velocity must align seamlessly at the seam.

Use the MP4 command below for visuals with even dimensions; for the 600×675 title animation, use the command with pad above. Once you have an MP4, you can continue exporting a GIF or generating a loop-check video that plays three times in sequence.

# MP4 for an X post: H.264 High, yuv420p, starts playing at once
ffmpeg -framerate 24 -i out/frames/%04d.png -c:v libx264 -profile:v high -pix_fmt yuv420p -crf 18 -movflags +faststart out/anim.mp4

# GIF for an X Article: one palette for the whole clip, 1200 px wide
ffmpeg -framerate 24 -i out/frames/%04d.png -vf "scale=1200:-1:flags=lanczos,split[a][b];[a]palettegen=stats_mode=diff[p];[b][p]paletteuse=dither=bayer:bayer_scale=5:diff_mode=rectangle" -loop 0 out/anim.gif

# Loop check: play it three times back to back and watch the seam
ffmpeg -stream_loop 2 -i out/anim.mp4 -c copy out/loop_check.mp4

The MP4 command combines PNGs into an H.264 video; yuv420p improves player compatibility, and +faststart makes web playback start faster. Change -framerate 24 to your actual render frame rate. The final command concatenates the clip three times in sequence for easy seam inspection.

GIFs use a unified palette across the entire clip to reduce frame-by-frame color shifting. scale=1200:-1 sets the width to 1200 pixels with height scaled proportionally; for square visuals, change this to 1080:-1.

GIFs lack audio, but frame delay quantization alters visual rhythm: 24 FPS is roughly 41.67 ms per frame, whereas GIF uses 10 ms increments. Saving each frame at 40 ms makes 144 frames last only 5.76 seconds; using five 40 ms frames plus one 50 ms frame yields exactly 250 ms for 6 frames, making 144 frames last the full 6 seconds. Use MP4 when you need strict beat synchronization; when exporting GIFs, verify rhythm using this delay distribution.

Troubleshooting common issues

Choose alternative tools by use case

For different project requirements, explicitly specify the engine by name in the OUTPUT field of your prompt rather than letting Claude guess:

6. Try two more complete 3D case studies

Next, practice two distinct types of motion: droplets fusing into text, and a character preparing, jumping, landing, and backflipping. Watch the finished animations first, then build them using the visual prompts, referring to the revision logs whenever issues arise.

Case Study 1: Liquid Chrome Title Opener

• Project specifications: 6-second seamless loop, 60 fps = 360 frames, 1080x1080 square aspect ratio, single-file HTML, based on Three.js 0.160.0.
• Total production time: Around 2 hours for visual construction and 10 follow-up revisions; around 45 minutes for programmatic audio synthesis and 5 revisions.
• Core technical hurdles and gotchas:
  1. The first half uses a full-screen Fragment Shader paired with Raymarching and Signed Distance Fields (SDF) to produce high-viscosity droplet fusion; the second half transitions to a genuine Three.js TextGeometry 3D mesh.
  2. Text thickness parameter in Three.js r160: In r160, TextGeometry reads height to determine extrusion depth. If you casually specify depth: 0.12 in your prompt, Three.js overrides depth, falling back to height or the default value of 50, resulting in letters 50 scene units thick. Specify height: 0.12 directly in your prompt to target this version's API.
  3. Bevel fusion and specular clipping: Initially generated text clumped together due to overly large bevels. This was fully resolved by manually reading glyph physical outlines and explicitly setting 0.09 letter spacing and 0.26 word spacing.

Below is the complete English prompt for liquid chrome; the 416-word prompt can be copied directly, and you can expand the Chinese comparison below for reference:

English prompt

Liquid Chrome: 6 s seamless loop, 60 fps, 1080x1080, one HTML file, three.js 0.160.0 via jsdelivr importmap only.

window.renderAt(t) sets everything from t in seconds; all motion and noise periodic in 6 s; with ?t= never start requestAnimationFrame; window.__ready after font and bake. Quarter-pixel camera jitter, 4 offsets from frac(t*60).

Raymarch blob, 7 droplets and text as one SDF in a full-screen shader. Smooth-min k 0.35, falling to 0.1 as droplets part; each droplet becomes its glyph through mix(dropSDF, textSDF, K). Text: TextGeometry "OPUS 5.5" per glyph, helvetiker_bold from the pinned examples/fonts, size 0.52, height 0.12 (r160 reads height, not depth), bevel 0.03, 10 bevel and 24 curve segments, tracking -0.04 em, period optically centered. Bake the same outlines into a 2048x512 signed distance texture on the GPU, extruded as a rounded box to match the mesh. From 3.3 to 4.7 s cross-fade to the real mesh (creased normals, 35 degrees), same GLSL, reflections traced into the SDF.

Chrome: F0 0.92, Schlick fresnel, roughness 0.04, 3 bounces.

Studio: white floor at y -0.8, soft overhead shadow, contact darkening, 6% reflection, black beyond z 4 (camera side) so letter faces reflect dark. Environment in azimuth and elevation, camera at 0: black camera-side panel 86x57 degrees, softboxes overhead (2.4) and upper left (3.0), black flags at 75 degrees left and right, a D97757 rim strip behind at 149 degrees, 24 up, intensity 1.4, a 2 degree glint strip, intensity 6, tilted 40 degrees, sweeping left to right 3.3 to 4.1 s.

Timeline:
0 to 1.2 s: blob radius 0.62 breathes 3% every 1.5 s, simplex noise 0.05.
1.2 to 1.4 s: squash 10%.
1.4 to 2.1 s: stretch 2.4x wide and pinch into 7 droplets sized by glyph area; each arcs 0.2 up to its glyph, overshoots 7%, stretches along its velocity.
2.2 to 2.9 s: droplets become letters left to right, 3 frames apart, 0.4 s each; bevels start 0.07 puffy and spring flat.
2.9 to 4.8 s: hold.
4.8 s: 6-frame swell, letters slump 0.12 and soften, drain to the center with ease-in, merge at 5.62 s with a 3-bounce wobble (14%, damping 0.25) running through frame 0.

Camera: 30 degree lens, dolly 5.6 to 7.2 by 2.6 s, push to 6.95 in the hold, back to 5.6 by 5.9 s; orbit 7 degrees each way centered on the hold; 6 degrees above.

Post: bloom threshold 1.0, strength 0.3; tone curve linear to 0.9, then a soft shoulder; vignette 7%; grain 1.5% seeded by frame index.

液态铬金属：6 秒无缝循环，60 fps，1080x1080，单文件 HTML，仅通过 jsdelivr importmap 引入 three.js 0.160.0。

window.renderAt(t) 由以秒为单位的 t 设定一切状态；所有运动和噪声均以 6 秒为周期；带 ?t= 时绝不启动 requestAnimationFrame；字体与烘焙完成后设置 window.__ready。四分之一像素相机抖动，基于 frac(t*60) 产生 4 个偏移量。

在全屏着色器中将 blob、7 颗水滴和文字作为单一 SDF 进行 Raymarch。Smooth-min k 0.35，随水滴分离降至 0.1；每个水滴通过 mix(dropSDF, textSDF, K) 变为对应字形。文字：每个字形使用 TextGeometry "OPUS 5.5"，采用固定版本 examples/fonts 中的 helvetiker_bold，大小 0.52，高度 0.12（r160 读取 height 而非 depth），倒角 0.03，10 个倒角分段和 24 个曲线分段，字距 -0.04 em，句点光学居中。在 GPU 上将相同的轮廓烘焙为 2048x512 有符号距离纹理（signed distance texture），挤压为圆角盒体以匹配网格。在 3.3 至 4.7 秒交叉淡入至真实网格（折痕法线，35 度），使用相同 GLSL，反射追踪至 SDF 中。

铬材质：F0 0.92，Schlick fresnel，粗糙度 0.04，3 次反射。

影棚：y 轴 -0.8 处设白色地面，顶部柔和阴影，接触变暗，6% 反射，z 轴 4 以外（摄像机侧）设为纯黑以使字母正面映出暗色反射。环境以方位角和仰角定义，摄像机方位角为 0：摄像机侧设 86x57 度黑色面板，顶部柔光箱（2.4）和左上方柔光箱（3.0），左右 75 度各设黑色挡光板，后方 149 度、仰角 24 度处设 D97757 轮廓光条，强度 1.4，一条 2 度宽的亮斑反光条（glint strip），强度 6，倾斜 40 度，在 3.3 至 4.1 秒由左向右扫过。

时间线：
0 至 1.2 秒：blob 半径 0.62，每 1.5 秒呼吸 3%，simplex noise 0.05。
1.2 至 1.4 秒：压扁 10%。
1.4 至 2.1 秒：横向拉伸至 2.4 倍宽并掐断挤出 7 颗水滴，水滴大小按字形面积分配；每颗水滴向上走弧线 0.2 到达其字形位置，过冲 7%，沿其速度方向拉伸。
2.2 至 2.9 秒：水滴由左至右变为字母，间隔 3 帧，每个用时 0.4 秒；倒角初始鼓起 0.07，随后弹性回弹展平。
2.9 至 4.8 秒：定格停留。
4.8 秒：膨胀持续 6 帧，字母下沉 0.12 并软化，以 ease-in 流向中心，在 5.62 秒融合，伴随 3 次弹跳晃动（14%，阻尼 0.25）并贯穿至第 0 帧。

摄像机：30 度镜头，在 2.6 秒前 dolly 从 5.6 到 7.2，定格期间推进至 6.95，在 5.9 秒前回到 5.6；以定格期为中心向两侧各环绕轨道旋转 7 度；仰角上方 6 度。

后期：bloom 阈值 1.0，强度 0.3；色调曲线在 0.9 前保持线性，随后平缓肩部过渡；暗角 7%；颗粒 1.5%，以帧索引为随机种子。

1. It reads as white plastic, the letter faces only see the black floor so the glint never shows, and the mesh caps reflect bent shards. Make the studio dark (0.1 gray) with only a white cyc behind the subject, 140 degrees wide, from 10 below to 40 up. End the white floor at z 4 so camera-side rays reach the black panel. Flatten the mesh cap normals. Rim strip 12x40 degrees. Blob noise frequency 1.0.
2. The glint is a flare that erases the P: make it 0.6 degrees wide at intensity 3. The rim never reaches the letters: move the D97757 strip behind and up (165 degrees, 42 up, 70x16 degrees) and add a soft D97757 kicker on the right, azimuth 55 to 125, elevation -16 to 10, so every right-facing bevel catches it.
3. The 0.03 bevels fuse every letter pair. Space the glyphs by their measured outlines, 0.09 apart and 0.26 for the word space, and hold the camera at 7.8, pushing to 7.55. The mesh speckles on its bevels: shade it with the SDF gradient so it matches the raymarched text.
4. The outer droplets leave the frame by 8 px around frame 112. Start them at 40% of their glyph position, ease the flight with u^2.4 so the 7% overshoot lands at 1.97 s, and dolly from 1.2 to 2.5 s.
5. While the letters form they look like camouflage and the merged blob looks like crumpled foil. Surface ripple 0.008 at frequency 3.2.
6. A bump pops onto the blob at frame 85. Grow the droplets from radius -0.4 over 1.2 to 1.65 s and regrow the blob from -0.4, so their smooth-min pull fades in.
7. mix(sphere, letter) passes through flat coins. Let each droplet pour into its glyph instead: bake one SDF channel per glyph, reveal each letter inside a sphere growing from its droplet (smooth max 0.05, ease-out, 0.4 s), shrink the droplet into it, join them with smooth-min, and start the puff spring only once the letter is full (damping 0.55, 3 Hz). Melt in reverse, draining from 5.2 s.
8. The glint reaches the O late and leaves the last 5 early. Make it touch the O at 3.3 s and clear the last 5 at 4.1 s (calibrated sweep: azimuth -0.083 to 0.302).
9. The letters vanish before their drops exist and the merged ball inflates. Regrow the drops first (4.88 to 5.1 s, 1.15x glyph size), retract the letters after (5.0 to 5.35 s), and grow the central blob from 5.15 s.
10. The letter faces read as flat charcoal. Add a thin 0.5 horizon strip at -6 degrees inside the camera-side panel, and soften the floor's end over z 3.6 to 4.0.

1. 质感看起来像白色塑料，字母正面只能看到黑色地面导致掠光完全显不出来，且网格封顶面反射出扭曲的碎片。将摄影棚调暗（0.1 灰色），主体后方仅保留白色无缝背景（cyc），宽 140 度，从下方 10 度到上方 40 度。白色地面在 z 4 处截断，使摄像机一侧的光线能到达黑色挡板。将网格封顶法线展平。轮廓光条 12x40 度。水滴熔块噪声频率 1.0。
2. 掠光产生炫光抹掉了字母 P：将其宽度改为 0.6 度，强度设为 3。轮廓光始终照不到字母：将 D97757 光条移到后上方（165 度，仰角 42 度，70x16 度），并在右侧添加一盏柔和的 D97757 侧逆光，方位角 55 到 125，仰角 -16 到 10，让每个朝右的斜边都能捕捉到光。
3. 0.03 的斜角让每对字母粘连在一起。按测得的字形外轮廓设定字间距，字距为 0.09，词间距为 0.26；摄像机保持在 7.8 处，推至 7.55。网格在斜角处出现噪点斑驳：改用 SDF 梯度对其着色，使其与光线步进渲染的文本匹配。
4. 外侧水滴在大约第 112 帧时出画 8 像素。让它们从各自字形位置的 40% 处起步，用 u^2.4 进行飞行缓动，使 7% 的过冲刚好在 1.97 秒落地，并在 1.2 到 2.5 秒间运镜推进。
5. 字母成型过程中看起来像迷彩斑块，融合的水滴熔块看起来像揉皱的锡箔纸。表面波纹设为 0.008，频率 3.2。
6. 第 85 帧时熔块上突然冒出一个凸包。在 1.2 到 1.65 秒内让水滴半径从 -0.4 开始生长，同时让熔块也从 -0.4 重新生长，使其 smooth-min 的拉扯融合平滑淡入。
7. mix(sphere, letter) 过渡时穿过了扁平硬币状结构。改为让每个水滴注入对应的字形：为每个字形烘焙一个 SDF 通道，在从水滴生长出来的球体内显现每个字母（smooth max 0.05，ease-out，0.4 秒），将水滴缩入其中，用 smooth-min 连接二者，且仅在字母完全填满后才启动膨胀弹簧动画（阻尼 0.55，3 Hz）。反向融化，从 5.2 秒开始回流排空。
8. 掠光扫到字母 O 偏晚，离开最后一个 5 偏早。让它在 3.3 秒接触到 O，并在 4.1 秒扫离最后一个 5（校准后的扫掠范围：方位角 -0.083 到 0.302）。
9. 字母在水滴尚未生成前就消失了，且融合的大球出现膨胀。先让水滴重新长出（4.88 到 5.1 秒，字形尺寸的 1.15 倍），随后收缩撤回字母（5.0 到 5.35 秒），并从 5.15 秒开始生长中心熔块。
10. 字母正面看起来像扁平的木炭。在摄像机侧的面板内部 -6 度处添加一条 0.5 宽的细地平线反光条，并在 z 3.6 到 4.0 范围内对地面末端进行羽化柔化。

# Sound prompt
Score this seamless 6 s loop (360 frames, 60 fps). Synthesize everything in code with the Web Audio API, no samples, no downloads. Each hit lands 1 frame after its visual event.
Bed: 120 BPM, four 3/4 bars of 90 frames starting on frames 67, 157, 247 and 337. Kick on 67, 247 and 337, offbeat shaker only where no hit plays, sub and pad on Bm, G, A, D.
Events: squash inhale peaking at 84, stretch glide 84 to 112, pinch bloops at 112, 113, 114 and 120, pour bloops rising through D major pentatonic at 136, 138, 141, 145, 147, 150 and 153, metallic ting at 200 (partials under 8 kHz), shimmer panned left to right until 245, liquid swell from 288 peaking at 303, drips at 309, merge blups at 319, 321, 322 and 325, slurp into a gloop at 337 wobbling at 2.4 Hz.
48 kHz stereo WAV, about -14 LUFS, peak -1 dBTP, no click at the seam. Mux into the MP4.
# Sound follow-ups (5), exactly as they were sent
1. Measured on the isolated hits: the kick and the gloop peak 8 to 11 ms late (a 4x waveshaper and sines that start at phase 0), and the levels over the bed are uneven (ting +10 dB, gloop +1 dB, drips -8 dB, dot drop +1 dB). Build every tonal hit as a buffer whose attack ends on a cosine crest at exactly (F + 1) x 800 samples, with no waveshaper. Put every hit, or pair of hits on the same frame, 3 to 6 dB above the bed (K-weighted, first 60 ms). The mix loses 4.5 dB through a 150 Hz high-pass: cut the sub 4 dB, the kicks 1.5 dB and the kick under the gloop 4 dB, and raise the pad 1.5 dB.
2. Timing is exact now. The hits sit 6.5 to 9 dB over the quieter bed: trim the hit bus 2.5 dB, then the two pinch pairs 1.4 dB, the U and S pinch 1 dB, the swell 1.2 dB and the last pour bloop 0.5 dB, and raise the drips 2.5 dB and the gloop 3 dB, so every hit reads 3 to 6 dB over the bed.
3. The limiter takes 3.4 dB off the gloop because all its partials and the kick crest on the same sample. Put the gloop's even harmonics in sine phase and lower the kick under it 2.7 dB, so the limiter stays under 1.5 dB and the gloop keeps 3 to 6 dB over the bed.
4. Sine-phase harmonics moved the gloop's biggest waveform peak 4 ms after its frame. Keep every gloop harmonic in cosine phase so the peak is on sample 270400, set the 2nd harmonic to 0.2 and the 3rd to 0.08, drop the 4th, and lower the gloop 0.5 dB.
5. The MP4's audio runs 16 ms of codec padding past the video, so the file starts on a hard step and a looping player stops the sound hard at 6.000 s, plays 16 ms of silence and restarts hard. Keep the seamless loop as the master WAV for the two-loop post, and for the single-loop article MP4 add a 2 ms raised-cosine fade to the first and last 96 samples only.

# 声音提示词
为这段 6 秒无缝循环（360 帧，60 fps）配乐。使用 Web Audio API 在代码中合成全部声音，不使用采样，不进行下载。每个打击点落在其对应视觉事件后 1 帧。
伴奏：120 BPM，四个 3/4 拍小节，每小节 90 帧，分别始于第 67、157、247 和 337 帧。底鼓位于 67、247 和 337 帧，后半拍沙锤仅在无打击点播放处发声，超低音与铺底音色和弦为 Bm、G、A、D。
事件：挤压吸气声在 84 帧达峰，拉伸滑音见于 84 到 112 帧，捏取气泡噗声位于 112、113、114 和 120 帧，倾倒气泡声在 136、138、141、145、147、150 和 153 帧沿 D 大调五声音阶上行，金属叮声位于 200 帧（分音低于 8 kHz），闪烁微光声从左至右声像平移直至 245 帧，液体渐强声从 288 帧起在 303 帧达峰，滴水声位于 309 帧，融合噗声位于 319、321、322 和 325 帧，在 337 帧吸入成为粘稠水珠声并以 2.4 Hz 摆动。
48 kHz 立体声 WAV，约 -14 LUFS，峰值 -1 dBTP，循环接缝处无爆音咔哒声。混流合入 MP4。
# 声音追问（5 条），原样发送
1. 对独立打击点测得：底鼓与粘稠水珠声达峰偏晚 8 到 11 毫秒（因 4 倍波形塑形器及相位 0 起始的正弦波所致），且高出伴奏的电平不均匀（ting +10 dB，gloop +1 dB，drips -8 dB，dot drop +1 dB）。将每个有调打击点构建为一个音频缓冲区，其起音在恰好 (F + 1) x 800 个采样点处的余弦波峰结束，不使用波形塑形器。使每个打击点（或同帧成对打击点）高出伴奏 3 到 6 dB（K 计权，前 60 毫秒）。混音经 150 Hz 高通滤波后损失 4.5 dB：将超低音削减 4 dB，各底鼓削减 1.5 dB，粘稠水珠声下方的底鼓削减 4 dB，并将铺底音色提升 1.5 dB。
2. 时间点现已精确。各打击点高出调暗后的伴奏 6.5 到 9 dB：将打击点总线削减 2.5 dB，随后将两组捏取对削减 1.4 dB，U 与 S 处的捏取削减 1 dB，渐强声削减 1.2 dB，最后一个倾倒气泡声削减 0.5 dB，并将滴水声提升 2.5 dB，粘稠水珠声提升 3 dB，使每个打击点均高出伴奏 3 到 6 dB。
3. 压限器将粘稠水珠声压掉了 3.4 dB，因为其所有分音与底鼓在同一采样点达峰。将粘稠水珠声的偶次谐波设为正弦相位，并将其下方的底鼓降低 2.7 dB，使压限器压降保持在 1.5 dB 以内，同时粘稠水珠声保持高出伴奏 3 到 6 dB。
4. 正弦相位谐波让粘稠水珠声的最大波形峰值移到了对应帧后 4 毫秒。将粘稠水珠声的所有谐波保持在余弦相位，使峰值落在第 270400 个采样点，将二次谐波设为 0.2，三次谐波设为 0.08，去掉四次谐波，并将粘稠水珠声降低 0.5 dB。
5. MP4 音频因编解码器填充比视频多出 16 毫秒，导致文件以生硬阶跃开头，循环播放器在 6.000 秒处突兀截断声音，播放 16 毫秒静音后又突兀重启。保留该无缝循环作为双循环推文的母带 WAV；对于文章内的单循环 MP4，仅在开头和结尾的 96 个采样点添加 2 毫秒的升余弦淡入淡出。

Case Study 2: 3D Voxel Mascot and the Five Animation Principles

• Project specifications: 8-second seamless loop, 60 fps = 480 frames, 1080x1080 canvas, Three.js 0.160.0, Geist Mono font.
• Total production time: Around 2 hours for visuals and 4 revisions; around 70 minutes for programmatic audio.
• Frame-by-frame motion verification: This case study set up 71 automated numerical checks, auditing details like the blink at frame 432 and foot placement on every step. The initial render had 6 discrepancies; correcting them before re-rendering ensured storyboard requirements landed on exact frames.
• Code translation of five classic Disney animation principles:
  1. Anticipation: An 11-frame crouch preparing for the jump (scale compressed to 1.2 x 0.75).
  2. Squash & Stretch: The body stretches to 0.85 x 1.28 the instant it leaves the ground, stays airborne for 25 frames, squashes flat to 1.25 x 0.7 upon landing, then recovers via a spring with a damping ratio of 0.55.
  3. Overlapping Action: Limbs do not launch in unison with the torso; arms follow with a 4-frame lag, and legs follow with a 6-frame lag.
  4. Follow-Through: After the body lands and stops, arms settle back into position oscillating at 2.2 Hz with a damping ratio of 0.22.
  5. Arcs: When flipping from pad 5 back to pad 1, the trajectory traces a dashed arc 3.5 units high to execute a 360-degree backflip.

To maintain character recognizability, lock torso and limb proportions first: 0.1 voxel, torso 14×10×8, arms 3×2, four legs 2×3, eyes 2×3. The visuals underwent 4 rounds of revisions; audio retained the first-round arrangement while resolving technical issues with gain nodes and compressors.

Below is the complete English prompt for the 3D mascot; the 399-word prompt can be copied directly, and you can expand the Chinese comparison below for reference:

English prompt

Build a 3D animation-principles loop. One HTML file, three.js 0.160.0 via jsDelivr importmap, Geist Mono from Google Fonts. 1080x1080, 8 s at 60 fps (480 frames), frame 480 equals frame 0. window.renderAt(t) draws any frame from t alone; seeded random only.

Set: a miniature studio. A floating white 12x6 slab on an F4F2EE backdrop. Its top is a timeline: 3 tracks of 0.25 frame cells (EFEEEA), a ruler with frame numbers, 5 keyframe diamonds 2 units apart on the middle track (white fill, 0F0F0F outline). Around it on stands: a key softbox, a rim strip light, a top spot on a boom.
Hero: the pixel Claude mascot as 0.1 voxels: D97757 body 14x10x8, two 3x2 arms, four 2x3 legs, 0F0F0F 2x3 eyes; roughness 0.45, clearcoat 0.3.

Lights, 0 to 1 s: key 3200 K with soft shadows at 0.1 s, rim 7500 K at 0.4 s, top spot 5000 K at 0.7 s. Each clicks on with a 3-frame flicker, and the mascot's eyes glance at it.
Hops, 1 to 5 s: 4 hops to diamonds 2 to 5, landing on frames 105, 165, 225 and 285. Each hop: 11-frame crouch (1.2x0.75), stretch 0.85x1.28 at takeoff, 25 frames of air, squash 1.25x0.7 on landing, spring back at damping 0.55; arms lag 4 frames, legs 6. Each landing lights its diamond FF6A2B, ripples the cells 0.08 high and throws 12 voxel sparks. An FF6A2B playhead carrying a point light moves at constant speed and crosses each diamond on its landing frame.
Flip, 5 to 6.4 s: a dotted arc from diamond 5 back to diamond 1 draws in, then an 18-frame deep crouch and a 360° flip along the arc, 3.5 high, landing on frame 384 while the playhead rewinds under it.
Labels, top left, Geist Mono 28 px: a checklist 01 ANTICIPATION, 02 SQUASH & STRETCH (& in D97757), 03 OVERLAPPING ACTION, 04 FOLLOW-THROUGH, 05 ARCS, in 8E8A83. Each row turns 0F0F0F and fills its FF6A2B diamond on its exact frame: 69 (first crouch), 140 (stretch), 200 (limbs trail), 285 (arms settle), 303 (arc draws).
End: hold, blink at 7.2 s; on frame 468 the lights, diamonds and labels snap off.
Camera: FOV 18, 30° elevation, ±10° orbit over 8 s, 25% push-in tracking the hops, 4% punch-in on the flip landing.
Post: bloom on emissives, depth of field focused on the mascot, 2% grain, 10% vignette, dithered backdrop.

构建一个 3D 动画法则循环动效。单文件 HTML，通过 jsDelivr importmap 引入 three.js 0.160.0，从 Google Fonts 引入 Geist Mono。尺寸 1080x1080，8 秒 60 fps（480 帧），第 480 帧等同于第 0 帧。window.renderAt(t) 仅凭 t 绘制任意帧；仅使用带种子的伪随机数。

场景：微型影棚。在 F4F2EE 背景上悬浮一块 12x6 白色厚板。厚板顶部为时间轴：3 条由 0.25 尺寸的帧单元格构成的轨道（EFEEEA）、带帧数的标尺、位于中间轨道且相距 2 个单位的 5 个关键帧菱形（白色填充，0F0F0F 描边）。厚板周围放置灯架：主光柔光箱、轮廓灯条、悬臂架顶光。
主角：以 0.1 体素构建的像素版 Claude 吉祥物：D97757 身体 14x10x8，两条 3x2 手臂，四条 2x3 腿，0F0F0F 2x3 眼睛；粗糙度 0.45，清漆层 0.3。

灯光，0 至 1 秒：0.1 秒时开启带柔和阴影的主光 3200 K，0.4 秒时开启轮廓光 7500 K，0.7 秒时开启顶光 5000 K。每盏灯开启时伴有 3 帧闪烁，吉祥物的眼睛随之扫视该灯。
跳跃，1 至 5 秒：向菱形 2 至 5 进行 4 次跳跃，分别落在第 105、165、225 和 285 帧。每次跳跃：11 帧蓄力下蹲（1.2x0.75），起跳时拉伸 0.85x1.28，滞空 25 帧，着地压扁 1.25x0.7，以 0.55 阻尼弹簧回弹；手臂滞后 4 帧，腿部滞后 6 帧。每次着地将对应的菱形点亮为 FF6A2B，使单元格产生 0.08 高的波纹并迸射 12 颗体素火花。带有单点光源的 FF6A2B 播放头匀速移动，并在吉祥物着地帧恰好划过对应菱形。
空翻，5 至 6.4 秒：画出一条从菱形 5 连回菱形 1 的虚线弧线，随后进行 18 帧深蹲并沿弧线完成 360° 空翻，腾空高度 3.5，于第 384 帧落地，同时播放头在下方回卷倒带。
标签，左上角，Geist Mono 28 px：检查清单 01 ANTICIPATION、02 SQUASH & STRETCH（& 为 D97757）、03 OVERLAPPING ACTION、04 FOLLOW-THROUGH、05 ARCS，文字为 8E8A83。每行在精确帧变色为 0F0F0F 并填满其 FF6A2B 菱形：69（首次下蹲）、140（拉伸）、200（肢体拖尾跟随）、285（手臂稳定归位）、303（绘制弧线）。
结尾：定格停留，在 7.2 秒眨眼；在第 468 帧灯光、菱形与标签同时瞬间关闭。
摄像机：FOV 18，30° 仰角，8 秒内 ±10° 环绕轨道旋转，追踪跳跃时推入 25%，空翻落地时突进推焦 4%。
后期：自发光物体添加 bloom，景深聚焦于吉祥物，2% 颗粒，10% 暗角，抖动过渡背景。

1. The render is washed out and cramped. Grade so the lit front face reads D97757 and lit diamonds read FF6A2B; drop the fill so lights-off sits near 50% and each click is obvious; lower the key to 28 degrees from the front right and put the cool rim at the back left so it edges the side we see. Pull the wide shot back to 44 units so the whole floating slab and all three stands are in frame, add a soft shadow under the slab, and make sparks 0.075 to 0.12 and ruler numbers bigger.
2. Frame check fixes. Keep every prop out of the label block: track the hops at 45% and hang the top spot at 5.8 on a boom from the back right corner, above the flip. Light each lit diamond with a soft glow from its face, move the playhead light to the front edge of the track and run its line under the diamonds. Start the dotted arc above the mascot's head, keep every tripod foot on the slab, and give the arms a bigger, slower settle (2.2 Hz, damping 0.22) so the follow-through reads.
3. Turn the rim strip's panel toward the camera so its click reads.
4. Make the top spot's click read too: narrow it to a 34 degree pool at 45 cd and give the lamp a glowing lens rim.

1. 渲染画面发灰且拥挤。调色使受光正面呈现 D97757，发光菱形呈现 FF6A2B；降低辅光使关灯状态落在 50% 附近，且每次咔哒亮灯都清晰可辨；将主光降至右前方 28 度，将冷色轮廓光置于左后方以勾勒我们看到的一侧轮廓。将全景后拉至 44 个单位，让整个悬浮板和全部三个灯架都入画，在板下方添加柔和阴影，并将火花改为 0.075 到 0.12，刻度尺数字调大。
2. 单帧检查修复。让所有道具避开标签文字区域：以 45% 追踪跳跃，并将顶部聚光灯通过悬臂挂在右后角 5.8 高度处，位于空翻轨迹上方。让每个点亮的菱形表面泛出柔和微光，将播放头指示灯移至轨道前缘并让其引线从菱形下方穿过。虚线弧线从吉祥物头部上方起笔，确保每个三脚架脚都落在板上，并给手臂一个更大、更慢的稳定缓冲（2.2 Hz，阻尼 0.22），使跟随动作清晰可辨。
3. 将轮廓光灯条的发光面转向摄像机，使其点亮瞬间清晰可辨。
4. 也让顶部聚光灯的点亮瞬间清晰可辨：将其收窄为 34 度、光强 45 cd 的光斑，并给灯具加上发光的透镜外圈。

# Sound prompt
Score this 8 s loop, 480 frames at 60 fps. Synthesize everything in code with the Web Audio API, no samples, no downloads. 120 BPM, 4 bars, F major. Each hit lands 1 frame after its visual event.
Bed: pad voices A3 E4 (key light), C5 (top), G5 (rim), each following its light's flicker. Shaker 8ths from 45, kick and bass from 60, roots F D Bb F by bar; kick and shaker rest 330 to 420, bass holds C, then F at 384.
Clicks: lights 6, 24, 42, off 468.
Crouches 69, 129, 189, 249, 312: creak, inhale riser.
Takeoffs 80, 140, 200, 260, 330: upward swish.
Landings 105, 165, 225, 285, 384: rubber squash pitched by the squash scale, spark tings, 384 biggest.
Label pings A5 C6 D6 F6 A6: 69, 140, 200, 285, 303.
Dot ticks 303 to 318, flip whoosh 330 to 384, blink blip 432.
48 kHz stereo WAV, about -14 LUFS, peak -1 dBTP, seamless loop, mux into the MP4.

# 声音提示词
为这段 8 秒循环（480 帧，60 fps）配乐。使用 Web Audio API 在代码中合成全部声音，不使用采样，不进行下载。120 BPM，4 小节，F 大调。每个打击点落在其对应视觉事件后 1 帧。
伴奏：铺底声部 A3 E4（主光）、C5（顶光）、G5（轮廓光），各声部跟随对应灯光的闪烁。八分音符沙锤从 45 帧起，底鼓与贝斯从 60 帧起，各小节根音依次为 F、D、Bb、F；底鼓与沙锤在 330 到 420 帧休止，贝斯持续保持 C 音，随后在 384 帧为 F 音。
开关咔哒声：开灯 6、24、42 帧，关灯 468 帧。
下蹲 69、129、189、249、312 帧：吱嘎声，吸气上升音。
起跳 80、140、200、260、330 帧：向上呼啸声。
着地 105、165、225、285、384 帧：音调随挤压比例变化的橡胶挤压声，火花叮声，以 384 帧最大。
标签提示音 A5 C6 D6 F6 A6：69、140、200、285、303 帧。
虚线滴答声 303 到 318 帧，空翻呼啸声 330 到 384 帧，眨眼嘟声 432 帧。
48 kHz 立体声 WAV，约 -14 LUFS，峰值 -1 dBTP，无缝循环，混流合入 MP4。

On your first pass, modify only names and text while keeping the example timing and motion parameters intact. On the second pass, change one value at a time and compare renders; keep what works, gradually shaping prompts tailored to your own project.