Updated 1mo ago
by cblain100-prog
motion-design-claude-code
Motion design de lancement façon agence avec Claude Code + HyperFrames (HeyGen), sans savoir coder : la méthode en skill, les patterns de 56 films, les modèles et 3 exemples.
20 GitHub stars (20)
- 11 skills (11 skills found in its SKILL.md files)
- 13 forks (13 forks)
- 1mo ago last update (Last updated 1mo ago)
Install
Skills CLI
npx skills add cblain100-prog/motion-design-claude-code
Asks which skills and agents to install. Just one: npx skills add cblain100-prog/motion-design-claude-code --skill hyperframes-animation — add -g for every project.
Claude Code
git clone https://github.com/cblain100-prog/motion-design-claude-codecp -r "motion-design-claude-code/.claude/skills/hyperframes-animation" ~/.claude/skills/
Copies the hyperframes-animation skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.
Plugin
/plugin marketplace add cblain100-prog/motion-design-claude-code
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
In the author's own words, from each skill's SKILL.md.
-
hyperframes-animation
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP…
.claude/skills/ on GitHub (opens in a new tab)hyperframes-animation/ SKILL.md -
hyperframes-audio
Use when audio already placed in a HyperFrames composition needs to be mixed: fade-in/fade-out, crossfade, track gain or volume, volume automation, ducking, a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), automation envelopes drawn on a track's volume or any effect parameter, or one sub…
.claude/skills/ on GitHub (opens in a new tab)hyperframes-audio/ SKILL.md -
hyperframes-cli
Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, timeline, history, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing…
.claude/skills/ on GitHub (opens in a new tab)hyperframes-cli/ SKILL.md -
hyperframes-core
The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
.claude/skills/ on GitHub (opens in a new tab)hyperframes-core/ SKILL.md -
hyperframes-creative
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.
.claude/skills/ on GitHub (opens in a new tab)hyperframes-creative/ SKILL.md -
hyperframes-keyframes
Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, o…
.claude/skills/ on GitHub (opens in a new tab)hyperframes-keyframes/ SKILL.md -
hyperframes-registry
Search, install, and wire registry blocks and components into HyperFrames compositions. Use BEFORE hand-building any named visual — whenever a brief, a user, or a storyboard names a look, effect, treatment, or transition such as CRT scanlines, glitch, chromatic aberration, film grain, a shimmer sweep, a chart, a code or terminal window, a map, or a confetti burst — because roughly 400 hosted item…
.claude/skills/ on GitHub (opens in a new tab)hyperframes-registry/ SKILL.md -
hyperframes
Entry point for HyperFrames work inside the motion-launch workspace: read this first to make, create, edit, animate, or render a HyperFrames video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-…
.claude/skills/ on GitHub (opens in a new tab)hyperframes/ SKILL.md -
media-use
Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine;…
.claude/skills/ on GitHub (opens in a new tab)media-use/ SKILL.md -
motion-design
Makes an agency-grade launch motion design film (30 to 60 s, 16:9, voice-over) in this repository with HyperFrames and the pinned HeyGen skills, in 5 steps the user validates (script, voice, storyboard, animation, music and sound effects), then checks, delivery and, only if asked, distribution. Use when the user asks here for a launch, promo, landing page or product motion design video, or "a fil…
.claude/skills/ on GitHub (opens in a new tab)motion-design/ SKILL.md -
product-launch-video
Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes.
.claude/skills/ on GitHub (opens in a new tab)product-launch-video/ SKILL.md
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.