SwapnilDawar2004/motion-piece

motion-piece — graphics in code, footage only where it's needed

The Claude Motion tutorial's main lesson: generated clips + editable code graphics means you only regenerate the broken shot, never the whole video. Code graphics cost 0 credits and change in seconds. AI startups ask for SaaS and launch videos more than anything else.

What tends to work (adjust to the user's taste)

• "Motion graphics" usually means kinetic type + UI + constant movement, not abstract particles.
• Characters and story often beat type alone. For a launch video, give it a tiny human moment if it fits.
• Little text on screen; every word big, short, and clear.
• Real product words only (for example, for a note-taking app: quick capture, search, shared notebooks, offline sync). Never invent features.
• Read ~/.claude/skills/taste/taste.md before planning.

Don't make the default Claude look

Code-made motion videos are starting to look the same everywhere: masked text rising out of a line, soft glowing orbs, spring pop-ins, glass cards, gradient words, the same easing. If a frame could be from anyone's Claude video, change it. Before building:

• Start from the user's work, not from defaults. Pull the look from style.md, the brand files, and the user's own past films (riso grain, painterly dabs, 16mm gate, HD pixel art, cut paper, whatever they've made). Reuse their own effects before inventing new ones.
• Music first. Get the track from sound-pass (the user's own music first) and time every big move to its beats (beats.json). The music sets the pace, not the code.
• Pick 1–2 signature moves for this film and use nothing else; ban the default moves above unless the brand needs them.
• Use open-source effects: brush strokes (p5.brush), particles (tsParticles), shader transitions (gl-transitions / xfade-easing), animated text (moving-letters). Only with a clear licence (MIT/Apache/CC0) and after reading the code; never run downloaded code blind; credit the author where the licence asks.

Step 0 — Ask the user first (always)

Before planning, run the intake in ~/.claude/skills/taste/intake.md: brand, fonts, colours, references, preferences, music, effects. Each answer can be "skip".

Step 1 — Plan the beats

Decide length (15–30s default), aspect (16:9; 9:16 for Reels/Shorts; 1:1 for feed) and 4–7 beats: hook → what it is → how it works (2–3 product moments) → proof or payoff → logo/CTA. Each beat says which parts are code (type, UI, counters, charts, transitions, logo) and which, if any, are footage (a person, a real place, a physical product shot).

Default to all-code. Add footage only when a beat needs a real human or physical moment. Footage clips come from the factory (asset-sheet → kling-prompt), muted, 3–5s each.

Show the plan to the user as one short card ("Make it" / "Change it") together with the film's credit cost (0 if all code).

Step 2 — Build it as a Claude Motion film

• Start a Motion artifact from the Motion artifact type (find it with the Artifact tool's quickstart or type listing), with a real title (the film's name) and auto_open: "after_first_write". Then follow the instructions that the create result carries — they are the authority on how a Motion film is filled (its store documents, scene modules, assets, the score) and on what it refuses (no existing songs, no other companies' logos or proprietary designs, no known characters).
• Its first step asks Style / Colors / Length. If the intake (Step 0) already answered them, use those answers; otherwise let the Motion type ask its questions.
• Brand: use the company's real colours, fonts and logo when the user owns or works for it, or has its brand kit.
• Footage: upload each clip as a video asset to the film (mp4, small — 480p/720p is enough for a muted insert). Clips play muted; the film's score is composed in code.

Step 3 — Review

Motion films have their own page with scrubbing and comments. For the user's decision, export or record the finished film to MP4 only if the type's tools allow it; otherwise send the film's link ("Watch it, then decide") with Ship it / Change it. Optionally show it on a review page (see ~/.claude/skills/taste/desk.md). Changes come back as one-line reasons or comments on the film's timeline; fix only what's named.

When Motion isn't the right tool

• Needs voiceover, lip-sync or real dialogue audio → build the graphics in Motion, export, and assemble with VO in rough-cut (or a plain code pipeline: index.html + render.mjs → MP4).
• Needs to be longer than ~60s, or edited further in Premiere → export MP4 from Motion and cut in Premiere; overlays wanted as separate layers → transparent ProRes from the code pipeline.
• The tutorial showed exports to After Effects and Blender; that is not a confirmed Motion feature here — don't promise it.

Revisions

Lock what works, change only what the user names. Keep the existing plan/files, edit only the named parts (e.g. "grain stronger", "one style for all visuals", "text pops more", "snappier pacing"), add any new references they send, and re-render. Never rebuild from scratch for a note.

Never

• Never use another company's logo, UI or proprietary design unless the user works there or has that company's own brand kit.
• Never use a real song as the score.
• Never put AI-generated text inside footage — all text is code.