element-motionlisted

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".
JagZ999/explainer-video · ★ 1 · Code & Development · score 72

Install: claude install-skill JagZ999/explainer-video

# Element Motion (shapes · orbs · particles) Family **C** of the **motion-graphics** super-skill. Drop-in building blocks live in the shared library — from any skill in this plugin: `../motion-graphics/assets/motion.css` + `motion.js`. Every effect scales by `--R` and is driven by **logical time `t`**, so it survives slow-clock capture (see `smooth-render`). ```html <link rel="stylesheet" href="../motion-graphics/assets/motion.css"> <script src="../motion-graphics/assets/motion.js"></script> ``` ## Moves | # | Name | Looks like | Build | |---|---|---|---| | C1 | **Ring Ripples** | concentric rings expand outward | `.tm-rings + mkRings` | | C2 | **Floating Rings (Bokeh)** | outlined circles drift at varied depth, some soft | `.tm-bokeh + tmBokeh` | | C3 | **Orb Bloom** | a bright ring blooms into a big soft glow orb | `.tm-orb + tmOrb` | | C4 | **Converge** | scattered circles drift inward to a focal point | `tmConverge` | | C5 | **Metaball Merge** | two circles stretch & fuse into a capsule | `.tm-meta + tmMeta` | | C6 | **Gooey Blobs** | solid rounded shapes morph & drift | `.tm-goo` | | C7 | **Sparkle Burst** | a 4-point star twinkles/pops | `.tm-spark` | | C8 | **Line-Draw Icon** | an icon strokes itself on | `.tm-draw + tmDraw` | | C9 | **Doodle Connector** | wobbly hand-drawn line links two elements | `.tm-draw on a jittered path` | ## Rules that make these render-safe - **Never `filter:blur()` / `backdrop-filter:blur()`** — headless Chromium/Edge software-rasterizes