xiaoxiao8096/code-motion-video-skill

Pure Code Animation Video Production Specification

The visuals, motion, transitions, music, sound effects, typography, and fonts are all produced by code – no video generation models, no sampling, and no AI-generated music. Each phase's output is reviewed by stakeholders before moving to the next step.

Recommended tech stack: Remotion (React) for visuals, Python + NumPy/SciPy for audio synthesis, FFmpeg for final composition. Alternatives include Motion Canvas, Revideo, Manim, HyperFrames, etc.; the workflow remains unchanged.

1. Define Requirements

• Subject (product, brand, person, event), audience, allowed/prohibited names or elements. If not specified, write as if speaking to "any audience."
• Duration (typically 15–60 seconds), aspect ratio (landscape 1920×1080, portrait 1080×1920, or square), frame rate (recommend 60fps for final), distribution channel.
• Read the subject's official materials (website, press releases, documentation). Extract exact quotes: how they describe themselves, core selling points, tone of voice. All facts in the video must come only from these sources.

2. Research Open Source References

Every reference must be verified to actually exist; record its URL, license, and relevance. Do not list anything unverifiable. Common categories:

• Video frameworks and example repos: Remotion, Motion Canvas, Revideo, Manim, HyperFrames, theatre.js, GSAP, Lottie.
• Design systems and color palettes: Radix Colors, Open Color, Tailwind, Catppuccin, IBM Carbon, Primer, Geist, awesome-design-systems.
• Gradient and shader backgrounds: shadergradient, whatamesh, three.js.
• Motion libraries: Motion, react-spring, anime.js, awesome-creative-coding.
• Audio: Tone.js, jsfxr, ZzFX, tonal.
• Fonts: Use only licenses that allow commercial use (e.g., SIL OFL). Common Chinese fonts: Source Han Sans / Noto Sans SC, Source Han Serif, Smiley Sans (italic only, good for titles), LXGW WenKai. Common Western fonts: Inter, Space Grotesk, Unbounded, JetBrains Mono.
• Icons: Lucide, Tabler, Phosphor.
• Copy style guides: chinese-copywriting-guidelines, Humanizer-zh, humanizer, stop-slop.
• Specified logos or assets: Locate original files, confirm license and whether they are trademarked. Unauthorized trademark graphics may only be used for internal previews; obtain permission before public release.

3. Write the Script/Storyboard (No Rendering Yet)

• Theme sentence and overall tone.
• Unified timeline: Define a BPM (e.g., 120 BPM, 2 seconds per bar). Every cut point must fall on a bar line or beat. Record all timings using the frame number at the final frame rate, stored in timeline.json. Visuals and audio share this data.
• Shot-by-shot table: Each scene includes timecode and frame range, on-screen text, visuals, motion (easing curve or spring parameters), and sound.
• Transition table: Each transition is designed individually, including opening and closing. Specify technique (mask wipe, morph, match cut, camera push through, shared element scale, color block wipe, flip, etc.), frame range, easing, carried-over elements, and accompanying sound effect and beat.
• Visual system: Color palette (hex), grid and margins, font pairing (size, weight), background treatment.
• Music: Key, chord progression, structural sections, synthesis method for each instrument, correspondence with cut points.
• Sound effects list: Which SFX for each scene, and how to synthesize them.
• Capture ~4 static style frames using HTML + headless browser, plus 1–2 transition breakdown images (intermediate states stitched into a strip).

4. Visual Direction Alternatives

If the style is undecided or stakeholders object, produce 3–4 distinctly different directions (e.g., bright magazine, warm gradient with glassmorphism, colorful pop stickers, Swiss grid, dark tech). Each direction provides a color palette, background, fonts, and inspiration source. Create one style frame of the same scene for each direction, and a comparison collage for selection. Keep the storyboard and transitions unchanged; only replace the visual style.

5. Production

• Visuals: Use local font files; render only after fonts are loaded. All animations driven by frame number; SVG, CSS, or JS animations that depend on real-time browser timing must be rewritten to compute per frame, otherwise rendering results are non-deterministic.
• Motion: For a lively style, use overshoot springs with squash and stretch; for a restrained style, use smooth easing. Spring bounce may produce negative scale values—clamp as needed.
• Audio: Write custom synthesizers, e.g., detuned sawtooth pads, FM bell, Karplus-Strong pluck, sliding sine kick, filtered noise for hi-hat and clap, sidechain compression, reverb. Sound effects synthesized with noise, sweep, and resonance. Optionally design a 2–3 note brand sound for the logo reveal and ending.
• When writing WAV, ensure bit depth and normalization are correct; otherwise volume may differ by tens of dB. Use FFmpeg to normalize loudness to a target value (e.g., -14 LUFS for web), leaving headroom for peaks.
• Encoding: H.264 + AAC, enable faststart.
• Reduce rendering concurrency if memory is low.

6. Preview

• Render a low-resolution full preview (e.g., 960×540, 30fps) with the final mix, to confirm rhythm.
• Self-checks: Use ffprobe to verify duration, frame count, and audio track; sample frames at regular intervals to create a contact sheet, checking for overlapping elements, missing characters, and tofu blocks; search source code to ensure no unintended content appears.
• When delivering the preview, note known risks, e.g., transitions that may feel too fast, or sounds that were only numerically checked and not auditioned.

7. Copy Polish / Remove AI Tone

• Eliminate phrases like "not only… but also…", triple parallelism, empty slogans, promotional clichés, and abstract noun stacks.
• Write concrete scenes and specific numbers. Use conversational rhythm. One sentence says one thing. Fit into the beat.
• Add spaces between Chinese and English, and between Chinese and digits.
• Provide a before/after comparison table per scene.

8. Final Version

• Content identical to the approved preview; only upgrade specifications: e.g., 1920×1080, 60fps, CRF 16–18, yuv420p, AAC 320k.
• Use ffprobe to verify specifications. Extract key frames from the final video to check clarity. Re-inspect previously fixed issues.
• If the file is too large, produce a compressed sharing version.
• If needed, re-layout from the same timeline to export a vertical or other aspect ratio.

File Structure

project/
  plan_v*.md        Script/storyboard (save a new copy per version)
  frames*/          Style frames and HTML source files
  fonts/  assets/
  timeline.json     Shared timeline for visuals and audio
  video/            Video project
  audio/compose.py  Audio synthesis script
  out/              Previews, finals, screenshots