element-motion
Skill1 starsChanged 4 months agoMITView on GitHub
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".
In this repository16 other files it gives its agents.
- aesthetic-presetsSkill
- audio-stemsSkill
- backgrounds-gradientsSkill
- explainer-videoSkill
- glass-cardsSkill
- kinetic-typographySkill
- mark-driven-groundSkill
- motion-graphicsSkill
- product-motionSkill
- scene-transitionsSkill
- smooth-renderSkill
- text-motionSkill
- travelling-markSkill
- ui-data-motionSkill
- vo-syncSkill
- walkthrough-filmSkill
The file
Files
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).
<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 them and capture drops to ~5 fps. Softness is faked with radial-gradient falloff / translucent fills / directional text-shadow smears. - Drive every time-based helper by your render clock's logical time
t, never wall-clock.
See also
The full menu across all 8 families (A–H, ~56 moves) is the motion-graphics master skill and its PLATTER.md. Ask for "the platter" to get the whole menu.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.