motion-graphics
From the author
Creates showreel-grade motion graphics videos entirely from code — HTML scenes rendered frame by frame in headless Chrome with real motion blur, plus an original score composed for each video on the same beat grid. It directs the film itself from whatever the person gives — their words, a site, a GitHub repository, an app, screenshots, their own video clips and photos, or reference clips — and sets the pace and the energy of the music from them. Use for any promo, ad, launch video, explainer, reel, Shorts or TikTok, intro, kinetic type or logo animation for a business, product, app, site, bot, channel or person, even when all you have is a link or a name.
Install
npx skills add Mort1d/motion-graphics-skills --skill motion-graphics -a claude-code
Installs to .claude/skills/motion-graphics/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
- Ships scripts we have not reviewedLow
Why 76
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- vid-motion-graphicsVarnan-Tech/opendirectoryGenerates motion graphics videos (MP4) from a content brief. Multi-scene HTML/CSS animations rendered frame-by-frame in headless Chromium via Playwright, assembled with FFmpeg. 1080×1080 default, 16:9 (1920×1080) and 9:16 (1080×1920) supported. 5 style presets. Trigger when user says "create a video", "motion graphic", "animated video", "make a reel", "create an explainer", "animated infographic", or "short video".Testing★ 686
- make-videoBintzGavin/heliosMake videos drawn with code: motion graphics, launch and explainer videos, animated shorts, animated charts and data, logo reveals, social clips, music visualizers, UI demos and GIF loops. Write one HTML page that draws any frame from its time t, render it frame-exact to MP4 with Helios, check stills and contact sheets, and add a soundtrack. Use when the user asks for one of these as an MP4, GIF or animation file. Not for live-action or AI-generated realistic footage or editing camera video.Media★ 123
- animateOneWave-AI/claude-skillsGenerate animated videos and motion graphics from natural language descriptions. Creates a standalone Vite + React project with Framer Motion scenes that auto-play in the browser. Use when the user wants to create animations, motion graphics, video intros, animated presentations, or product demos.Browser★ 378
- video-by-referenceishuagrawal/skillsMake a fully code-generated animated video at the highest achievable visual and design quality (with an original synthesized soundtrack) whose look, sound, editing and pacing are learned from a reference video — in whatever style that reference uses (flat 2D, 3D/CG, anime, painterly, pixel art, hand-drawn, kinetic type, stop-motion feel…). Studies the reference frame-by-frame and by audio analysis, writes a measured style bible, derives an original story, picks a rendering approach that fits the style, builds a deterministic browser animation, renders it to MP4 with headless Chrome + ffmpeg, and QA-reviews it. Use this whenever the user shares a video/YouTube link or clip and wants an animation, short, trailer, teaser, explainer, mascot or character video "in the style of", "like this", "inspired by", or "with the vibe of" it — or asks you to study a video's art style, sound, camera, transitions or narrative and then make something similar — even if they never say "reference" or "skill".Media★ 73
- cineticLeonxlnx/cineticDirect, build and render premium cinematic motion design from code — launch films, product and feature videos, looping feature animations for landing pages and social, logo stings and reveals, UI walkthroughs, app demos, kinetic type, teasers, trailers, intros and promo clips. Use this whenever the user wants any video, animation, motion graphic or animated demo made with Remotion, HyperFrames, HTML/GSAP or React, or asks to storyboard, time, score, render, polish or critique one — even if they only say "make a video about X", "animate this feature" or "we need a launch clip". It supplies concept and copy discipline, type and colour taste that defers to a supplied brand, a beat-locked timeline that drives both picture and a code-made soundtrack, choreography and transition craft, real product UI in motion, film-grade finishing (true motion blur, no banding, BT.709, sync-checked mux) and a measured self-critique loop on contact sheets and renders.Design★ 836
- motion-adfabricioctelles/skillsProduce a short motion-graphics video ad — a 15s Facebook/Instagram/TikTok spot — as a rendered MP4. Researches the destination landing page so every on-screen claim matches it, pulls real product imagery off the live site, animates one paused GSAP timeline in a single HTML page, and renders it frame-accurately through Playwright and ffmpeg. Use this whenever the user wants a video ad, promo video, animated ad, "an ad for my product", Meta/TikTok/Reels creative in video form, a 9:16 or 1:1 cut of an existing spot, or a re-render of an earlier ad with a different hook, hero or CTA — including when they never say the words "motion graphics". Not for animating UI inside an app, not for static image ads, and not for long-form or voiceover-led video.Marketing★ 120
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in