Loading...
Loading...
Found 10 Skills
This skill should be used when the user asks to "animate a headline", "make a kinetic typography video", "do a split-text reveal", "stagger text by character/word/line", "make a lyric or caption video", "animate a variable font weight", "put text on a path", or "create an animated title card". Covers reveal techniques in CSS, GSAP SplitText, Framer Motion, and Remotion.
Make kinetic typography in Remotion: animated text, title cards, a headline reveal, rotating words, a highlighted phrase, a line that morphs into its payoff, or a run of bold statements. Uses snapcn's text components (@snapcn/text-reveal, type-morph, text-highlight, word-flip, punch-lines, text-swell and more), which pivot scale on the measured baseline so type doesn't judder or shake the way hand-animated text does in a browser. Triggers: kinetic typography, animated text, text animation, title animation, typography video, headline animation, text reveal, "animate this line", "make the words pop".
Use when turning a song into a kinetic-typography or motion-design music video, lyric video, visualizer or K-pop style MV with Scenario, landscape or vertical 9:16 for TikTok, Reels and Shorts: a generated subject sheet, style frames and footage, plus a deterministic JavaScript/three.js engine for lyric type, mattes and tracked graphics timed to sung onsets. Also for revising, recutting or cutting teasers from such a video.
This skill should be used when the user asks to "draw every frame in JavaScript", "make an animation with no image assets", "animate this in code / on a canvas", "make a hand-drawn style animated video", "turn this into a short animated film", "make an animated explainer drawn in code", "make an animated story / picture book of my photos", or "make a zero-asset animation like the Opus 5.5 ones". Produces a single self-contained HTML file whose frames are computed on an HTML canvas (seekable, deterministic), renders it to MP4, and self-checks the result. Pairs with the soundtrack skill for code-synthesized music. NOT for charts from data (use chart-animation), pure text motion (use kinetic-typography), or 3D/WebGL (use threejs-animation / shader-glsl from webgl-animation-skills).
This skill should be used when the user asks to "make an animated illustration", "animate an illustration", "make a generative motion piece" / "动态平面", "turn AI-generated art into something that moves", "make a poetic or ambient motion piece / motion poem", "make a visual metaphor", or "combine AI-generated visuals with code-driven motion". Covers generating isolated illustration assets with AI, compositing them as sprites, frame-accurate deterministic rendering, and the craft of expressive, concept-driven motion. NOT for data charts (use chart-animation), pure text (use kinetic-typography), or 3D/particles (use webgl-animation).
Create videos with code (Canvas / HTML-CSS-SVG / WebGL shaders / Three.js / Remotion / HyperFrames / Manim + code-synthesized sound), rendered frame by frame with Playwright and FFmpeg. It asks what the user wants to create (an idea, source material such as an article, script, product page or codebase, or a reference video), proposes three distinct video plans with shot-by-shot visual summaries, renders a key-frame still or a few-second preview for each, and, after the user confirms one, writes the full brief and builds the finished MP4. Use it whenever someone wants Claude to create, animate or render a video, motion graphic, animated explainer, product promo, kinetic-typography piece, pixel-art or retro animation, or UI motion demo, or wants to recreate the look of a reference video in code—including requests such as “make a video,” “make a video with code,” “create an animation,” “make a promotional video,” “help me recreate this video,” or “Opus, make a video.” Also use it when the user has AI-generated character clips (green screen) and wants code-built scenes around them. Do not use it for generating footage with video models, editing in Premiere/CapCut/AE, or subtitling an existing video.
Pixel art + kinetic typography explainer frame, pure CSS loop, video recordable
Use when animating multi-part objects, character appendages, fabric, hair, or any motion requiring realistic drag, momentum, and settling behavior.
Make a short, design-led motion graphic in Remotion, where the motion is the message: kinetic typography, a title card, a stat count-up, a logo sting or brand reveal, a social-proof overlay, an image-gallery opener or burned-in captions. Usually under 10s, up to about 30s. Built from snapcn's hand-tuned Remotion components (@snapcn/text-reveal, type-morph, punch-lines, logo-flicker, count-grid, orbit-gallery and more) so the type and timing look designed, not generated. Triggers: motion graphics, kinetic typography, remotion motion graphics, animated text, title animation, logo animation, logo sting, brand reveal, intro animation, animated stat, "make this line animate", "motion graphic with Claude Code".
Create reusable black-background white-text opening animations for new videos. Use when the user asks for "黑底白字开场", "纯黑加白字", "白色文字逐渐出来", "一个个字出来", "打字效果", "打字音效", "字体变化开头", "opening title animation", "kinetic text opener", or a short black-and-white intro before a HyperFrames, Remotion, ffmpeg, SaaS/product, tutorial, commentary, or course video. This is for original opener creation, not pixel-level reference matching.