motion-graphicslisted

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.
JagZ999/explainer-video · ★ 1 · Web & Frontend · score 74

Install: claude install-skill JagZ999/explainer-video

# Motion Graphics — the super-skill One home for building polished 2D motion-graphics in plain HTML (no After Effects). Distilled from launch-reel + SaaS-explainer references (Pinterest "2d motion graphics" / "saas promotional video"; YouTube "What a Story", Beyond Motion, Zelios, think3, MotionDesigners.Pro, Nadim Sheikh, Behance). Two things live here: 1. **[PLATTER.md](PLATTER.md)** — the named menu of ~40 moves, grouped into 7 sub-skill families, each with what it looks like, its reference, and a render-safe build. 2. **assets/[motion.css](assets/motion.css) + [motion.js](assets/motion.js)** — drop-in building blocks (24 JS helpers + matching classes). Every effect scales by `--R` and is driven by **logical time `t`**, so it survives slow-clock capture. ```html <link rel="stylesheet" href="assets/motion.css"> <script src="assets/motion.js"></script> ``` ## Serving "the platter" When the user asks for **the platter / a menu of motion skills / what effects can you do**, list the families below with their one-line looks (pull the tables from PLATTER.md). When they ask for a **family letter** (e.g. "give me the background ones"), list just that group. Then offer to wire any subset into their piece. ## The sub-skills (families) | | Family | What it covers | Key moves | |---|---|---|---| | **A** | **Text motion** | how words enter & emphasize | Word-Rise · Keyword-Sweep · Gradient-Hero · Scramble-Decode · Ticker-Roll · Motion-Blur-Slide · Mixed-Type · Bold-Key | |