JagZ999
UserAnimated product explainer videos with voiceover, music & synced SFX — an interactive Claude Code skill/plugin.
Categories
Indexed Skills (17)
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".
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".
mark-driven-ground
A background that is built AROUND the element travelling through the frame — a logo, a dot, a cursor. Per-beat path rings centred on the landing point, the flight path drawn on the ground, a lit arc that follows the mark and collapses into the landing, a wide soft glow that blooms where it lands and settles for the rest of the chapter, and a colour TRACK that walks the whole frame from one chapter's colour to the next. Use when a background feels decorative rather than connected to the motion, when each section needs its own colour without a visible cut, or when a reference reel has a spark/dot that the background reacts to. Triggers: "background that follows the logo", "rings the dot travels along", "glow where it lands", "colour changes per chapter", "smooth flowing colour fields", "make the background react to the travelling element", "the background should know where the mark is", "spark-driven background".
travelling-mark
Make one brand mark (logo, dot, glyph) TRAVEL through a film as a single rigid object: it lifts off the product's sidebar logo on a hard cut, flies into a title card on a named path (zip, drop, spiral, hops, orbit), lands beside the heading, rides the typed line as a cursor, breathes on the hold, and leaves along an exit (inflate, roll, dive) that also opens the next dashboard around the logo slot. Also covers the opening "round" (one arc-length-parametrised orbit into the sidebar) and the closing "mark as a hole" reveal. Use when a logo should carry the viewer from chapter to chapter, when a reference reel has a spark/dot that leads every cut, or when a client says the logo must never stretch, squash, split or morph while it moves. Triggers: "the logo travels between scenes", "logo flies into the title", "dot that jumps from card to card", "logo lands next to the heading", "logo becomes the cursor", "make the logo leave into the dashboard", "logo must stay rigid", "the plus/mark path", "logo hole reveal at t
walkthrough-film
Build a long-form (2-6 minute) narrated product walkthrough film as a deterministic logical-clock HTML page, then render it per scene and assemble a pacing-warped mix. Use when a product demo is too long for a single-page explainer, when a film must ship in many review rounds or in several brand skins from ONE source tree, when scene durations must be derived from voiceover word timestamps, when a client keeps sending frame-by-frame feedback, or when parallel builder subagents each own part of one film. Triggers: "long product walkthrough video", "chaptered demo film", "white-label this film for another brand", "dark and light versions of the same video", "re-render just one scene", "the render judders / drops frames", "sync the chapters to the voiceover", "film spec for the builders", "version 7 of the video".
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]".
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.