JagZ999
UserAnimated product explainer videos with voiceover, music & synced SFX — an interactive Claude Code skill/plugin.
Categories
Indexed Skills (14)
audio-stems
Generate and place a video/animation's audio as SEPARATE stems — voiceover, background music, and a time-synced sound-effects track — and optionally a ducked master mix. Use when adding music and SFX to an animation or explainer, when iterating on audio WITHOUT re-rendering the video, when you need whooshes/clicks/typing/risers placed on exact timeline moments, or when the user wants the music/SFX/VO delivered as separate files. Generates music + SFX via ElevenLabs and mixes with sidechain ducking. Triggers: "add music and sound effects", "give me the stems separately", "place a whoosh on each transition", "typing/generating sounds", "background music track", "ducked mix so the voice leads", "SFX synced to the animation".
explainer-video
Create animated, camera-zooming product explainer videos (SVG/HTML style) with voiceover, background music, and synced sound effects. Use when the user wants to turn product screenshots or a screen-recording/demo into an explainer video, an animated walkthrough, a narrated product demo, or a launch/marketing video. The skill interactively interviews the user about design (colors, fonts, scenes, tone), then about the TTS provider (and API key), builds a self-contained animated HTML explainer, renders it to a sharp MP4, and produces separate music & SFX stems. Triggers: "make an explainer video", "animate my product screenshots", "turn this demo into a video", "create a narrated walkthrough", "product launch video".
glass-cards
Build frosted "liquid glass" UI cards/panels on a dark animated background, where a card ZOOMS FORWARD to demo itself and then falls back as the next one rises, plus a gentle camera zoom-in/settle. Use for glassmorphism UI mockups, a product explainer's feature panels, an animated card grid where each card steps forward in turn, or any "frosted glass panels that zoom out and come back" / "liquid glass" look. Triggers: "liquid glass cards", "glassmorphism panels", "frosted glass UI", "cards that zoom forward then fall back", "glass panel zooming out and back", "animated card grid that highlights one at a time", "camera zoom into the scene".
kinetic-typography
Add animated "kinetic typography" to an HTML page — headlines whose words cascade in one after another, a centered hero headline that gets pushed aside as content/cards slide in, top/bottom supporting lines that slide out of the headline, and a fractured/"cracked" word effect. Use when building motion-graphics-style titles, an animated headline reveal, a product explainer's text, or any "the words move like that launch video" request. Triggers: "animate the headline", "kinetic typography", "make the title words fly/rise in", "cracked text effect", "headline that slides aside when the cards come in", "word-by-word reveal".
motion-graphics
Super-skill for motion-graphics videos in HTML/CSS/JS — the launch-reel / SaaS-explainer look. An umbrella over sub-skills for TEXT motion, BACKGROUNDS & GRADIENTS, ELEMENT / SHAPE / PARTICLE motion, GLASS & UI accents, PRODUCT composition, SCENE TRANSITIONS, and UI / DATA motion. Holds a named "platter" of ~40 reusable moves (each with a render-safe recipe) plus a drop-in building- block library (assets/motion.css + motion.js). Use when the user wants to build or restyle an animated title, explainer, launch/promo film, or any motion-graphics piece; make headings/scenes more dynamic; add moving gradients, drifting shapes, glowing rings/orbs, glass UI, transitions, animated charts/counters; match a reference reel; or asks for "the platter of skills / motion skills / a menu of effects". Composes with text-motion, kinetic-typography, glass-cards, smooth-render, vo-sync.
smooth-render
Render an HTML/CSS animation to a smooth, sharp MP4 at native resolution (up to 2K/4K) without choppy motion. Use when a CSS/JS animation (especially glassy/blur/backdrop-filter, gradient, or continuous-motion scenes) renders JANKY or stuttery via screenshot/screencast capture, when you need per-frame-accurate logical-time output with no wall-clock drift, or when muxing audio onto a rendered animation. Triggers: "render my animation to video", "the capture is choppy/stuttering", "export this HTML animation as MP4", "2K render of my web animation", "frames are dropping when I record the page".
text-motion
Kinetic text-motion + gradient + transition toolkit for HTML/CSS motion-graphics videos — the polished "launch reel" look: keyword glow-highlight sweeps, gradient-filled hero words, scramble-decode headlines, ticker-roll word swaps, living color-arc gradient backgrounds with drifting blobs, concentric ring ripples, blueprint grids, and glass UI accents (pills, cursors, prompt cards). Use when making an animated title/heading feel dynamic and varied, adding a moving gradient background, giving each scene its own heading entrance, or matching a reference reel's text motion. Triggers: "make the headings more dynamic", "text motion", "highlight the keyword", "gradient background through the video", "animate the title like that reel", "scramble/decode text", "words rolling like a ticker", "make it more graphic". Complements kinetic-typography (word cascade / hero-push) and smooth-render (capture).
vo-sync
Sync an animation, captions, or cues to a voiceover so visuals land on the spoken words, and pace the timeline tightly to the narration (no dead air). Use when you have (or will generate) a voiceover and want cards/elements/captions to appear exactly when they're mentioned, when card raises feel out of sync with the narration, or when there are long voice-less gaps to tighten. Generates VO with word-level timestamps (ElevenLabs) and computes per-scene durations + cue times from them. Triggers: "sync the voiceover with the animation", "make the cards appear when the voice says it", "the VO is out of sync", "tighten the pacing / remove silent gaps", "land captions on the spoken word", "word-timestamp sync".
aesthetic-presets
Whole-scene aesthetic presets for motion-graphics videos — combinations of background + element + type that read as one recognizable style. Isometric UI (planes on a 30° grid, floating, long shadow), collage/cutout (flat color + photo cutouts + torn-paper stickers + doodle connectors + halftone + timeline), Apple-minimalist (huge negative space, one shape/word, slow eases, thin type), crypto/neon-glow (near-black + starfield + neon edges + spinning 3D token), and dashboard-reveal (UI window rises in, charts grow, counters tick). Use when you want a named look for a whole scene/video, or matching a specific reference style. Triggers: "isometric style", "collage / cutout animation", "Apple-style minimalist", "crypto / web3 neon look", "dashboard reveal", "make it look like [that style]".
backgrounds-gradients
Living backgrounds & moving gradients for motion-graphics videos — the layer that makes a frame feel alive instead of a static slide. Color-arc gradient that shifts per scene with drifting blobs, a soft mesh light-wash that glides across, blueprint line grids, dot-matrix fields, glowing neon curved paths with travelling light-dots, starfields, and grain/paper/paint texture overlays. Use when a scene looks flat or slide-like, when adding a moving gradient behind the whole piece, or matching a reference reel's animated background. Triggers: "moving gradient background", "gradient that shifts through the video", "make the background alive", "mesh gradient wash", "blueprint grid", "dotted background", "neon lines", "starfield", "film grain / texture overlay".
element-motion
Shapes, orbs and particles that move in the frame — the element layer of motion graphics. Concentric ring ripples, floating outlined circles at varied depth (bokeh), a small ring that blooms into a big glow orb, scattered circles converging to a focal point, two circles that stretch and fuse (metaball), morphing solid gooey blobs, sparkle/twinkle bursts, self-drawing line icons, and wobbly doodle connectors. Use when adding animated shapes/particles behind or around content, giving a scene kinetic texture, or matching a reference's circle/orb/particle motion. Triggers: "floating circles / rings", "glowing orb", "particles", "ripples", "metaball / liquid merge", "gooey blobs", "sparkle", "draw-on icon", "hand-drawn connector line".
product-motion
Ways to show the product in a motion-graphics video — composition moves. App icons ring a central hub and connect (integrations orbit), icon bubbles float in space (constellation), a product screenshot rises/tilts in on a gradient (screen reveal), person/logo social-proof chips slide in, and tilted cards fan out in perspective. Use when presenting integrations, an ecosystem, a dashboard/UI screenshot, testimonials, or a set of feature cards. Triggers: "integrations orbit / hub and spoke", "app icons around a logo", "reveal the product screenshot", "avatar chips / social proof", "cards fan out", "show the dashboard".
scene-transitions
Scene-to-scene transitions for motion-graphics videos — the glue between beats, beyond a plain crossfade. A solid shape wipes across to swap scenes, the next scene is revealed through an expanding circle (iris), an outgoing scene is pushed out by an incoming shape, a shape in scene A morphs into an element of scene B (match-cut), an organic blob mask grows to swap (liquid wipe), or content cross-dissolves while a shared gradient persists. Use when cutting between scenes feels abrupt or generic, or matching a reel's slick transitions. Triggers: "scene transition", "wipe between scenes", "circle/iris reveal", "match cut", "liquid transition", "how to transition between sections".
ui-data-motion
UI and data animation for product-demo motion graphics — the mechanics of a SaaS/dashboard reveal. Chart bars grow from the baseline, an SVG line/area draws itself on, a number rolls up to its value (odometer counter), UI cards deal into place, a toggle/tab slides between states, a cursor drives a real UI (click → state change), a notification pops in, and a timeline playhead slides through dates. Use when animating a dashboard, chart, metric callout, feature toggle, or a cursor-driven product walkthrough. Triggers: "animate the chart / bars grow", "draw the line graph", "counter / number ticks up", "cards deal in", "toggle switch animation", "cursor demo of the UI", "notification pop", "timeline scrubber".
Bio shown is the top-scored skill's repo description as a fallback — real GitHub bios land in a future update.