Motion Anything

✨ The agentic motion layer — an open-source, chat-native motion engine. Describe the feeling; your AI ships the animation.

Generate Convert Improve

Install / Use

npx skills add nexu-io/motion-anything

Installs into whichever agent you are using.

About this skill

Quality Score

0/100

README

motion-anything

A project in the <a href="https://github.com/nexu-io/open-design">nexu.io · Open Design</a> family — the same team's take on motion. If motion-anything clicks for you, <a href="https://github.com/nexu-io/open-design">Open Design</a> is where the full agent-era design studio lives.

Describe the feeling — your AI ships the animation. The agentic motion layer: a local-first, chat-native motion engine. Generate animated pages and launch videos from one sentence, then edit motion on the running page, component by component — 4 triggers, 13 motion verbs, spring easing, a full keyframe editor. Driven by 8 coding-agent engines + BYOK (Claude Code · Codex · Cursor · OpenCode · Grok Build · Hermes · Gemini · Open Design Cloud), armed with 403 curated motion recipes, wired into the Open Design ecosystem (59 DESIGN.md brand packs · 58 HyperFrames video templates · 112 HTML prototype templates · 2,680 icons), and exported to anything: JSON · CSS · React · Lottie · MP4 · GIF · portable skills. Zero npm dependencies. No watermark. No per-render fees.

<img src="docs/assets/hero.jpg" alt="motion-anything — Anything becomes motion, on your laptop. Editorial dark banner with light-mode app windows: the component-motion workbench and the launch-video compositor, plus a stats row — 403 motion recipes, 230 portable skills, 2,680 icons, 59 design systems." width="100%" /> <a href="LICENSE"><img alt="License" src="https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square" /></a> <a href="#engines"><img alt="Engines" src="https://img.shields.io/badge/engines-8%20CLIs%20%2B%20BYOK-111?style=flat-square" /></a> <a href="#the-library"><img alt="Recipes" src="https://img.shields.io/badge/motion%20recipes-403-8b7cf6?style=flat-square" /></a> <a href="#export-anything"><img alt="Export" src="https://img.shields.io/badge/export-JSON%20%C2%B7%20CSS%20%C2%B7%20React%20%C2%B7%20Lottie%20%C2%B7%20MP4%20%C2%B7%20GIF-9b59b6?style=flat-square" /></a> <a href="#quickstart"><img alt="Quickstart" src="https://img.shields.io/badge/quickstart-1%20command-green?style=flat-square" /></a> <a href="#architecture"><img alt="Zero deps" src="https://img.shields.io/badge/npm%20dependencies-0-ff6b35?style=flat-square" /></a> <a href="#the-library"><img alt="Design systems" src="https://img.shields.io/badge/design%20systems-59-1abc9c?style=flat-square" /></a> <a href="#the-library"><img alt="Video templates" src="https://img.shields.io/badge/HyperFrames%20video%20templates-58-e67e22?style=flat-square" /></a> <a href="#the-library"><img alt="HTML templates" src="https://img.shields.io/badge/HTML%20prototype%20templates-112-3498db?style=flat-square" /></a> <a href="#the-library"><img alt="Icons" src="https://img.shields.io/badge/icons-2680-f39c12?style=flat-square" /></a> <a href="#open-design-ecosystem"><img alt="Portable skills" src="https://img.shields.io/badge/portable%20skills-230-8b7cf6?style=flat-square" /></a> <a href="https://github.com/nexu-io/open-design"><img alt="Family" src="https://img.shields.io/badge/family-nexu--io%2Fopen--design-ff7043?style=flat-square&logo=github&logoColor=white" /></a> <a href="https://x.com/OpenDesignHQ"><img alt="Follow on X" src="https://img.shields.io/badge/follow-%40OpenDesignHQ-000000?style=flat-square&logo=x&logoColor=white" /></a> English · <a href="README.zh-CN.md">简体中文</a>

Showcase

Every tile below is a live, dependency-free recipe from the library — real GPU shaders, canvas engines and kinetic text, faithfully ported so they run with two <script> tags on any page (no React, no three.js, no build step). All tiles are animated GIFs recorded from the actual previews.

<table> <tr> <td width="50%"><a href="recipes/slides/fx-typewriter-multi/"><img src="docs/assets/effects/typewriter-multi.gif" alt="Typewriter multi — terminal-style lines typing in sequence" /></a></td> <td width="50%"><a href="recipes/web/shiny-text/"><img src="docs/assets/effects/shiny-text.gif" alt="Shiny text — a highlight band sweeps across the label" /></a></td> </tr> <tr> <td><a href="recipes/slides/fx-typewriter-multi/">typewriter-multi</a> · kinetic text Terminal-style multi-line typing with live cursors — agent-boot energy.</td> <td><a href="recipes/web/shiny-text/">shiny-text</a> · kinetic text A sheen sweeps across text-clipped gradient type. One class to use.</td> </tr> <tr> <td width="50%"><a href="recipes/web/star-border/"><img src="docs/assets/effects/star-border.gif" alt="Star border — a slow light circles the button border" /></a></td> <td width="50%"><a href="recipes/web/rotating-text/"><img src="docs/assets/effects/rotating-text.gif" alt="Rotating text — words cycle in place" /></a></td> </tr> <tr> <td><a href="recipes/web/star-border/">star-border</a> · ambient CTA A slow light orbits the border of your call-to-action. Pure CSS.</td> <td><a href="recipes/web/rotating-text/">rotating-text</a> · kinetic text One line, many claims — words cycle in place with a soft travel.</td> </tr> <tr> <td width="50%"><a href="recipes/web/magnet-lines/"><img src="docs/assets/effects/magnet-lines.gif" alt="Magnet lines — a grid of lines tracks the pointer" /></a></td> <td width="50%"><a href="recipes/web/elastic-slider/"><img src="docs/assets/effects/elastic-slider.gif" alt="Elastic slider — a springy gradient fill follows the drag" /></a></td> </tr> <tr> <td><a href="recipes/web/magnet-lines/">magnet-lines</a> · interactive A field of compass needles that swivel toward your pointer.</td> <td><a href="recipes/web/elastic-slider/">elastic-slider</a> · feedback A slider whose fill overshoots with a spring — tactile, GPU-safe.</td> </tr> <tr> <td width="50%"><a href="recipes/web/bounce-cards/"><img src="docs/assets/effects/bounce-cards.gif" alt="Bounce cards — a stack fans out with a bounce" /></a></td> <td width="50%"><a href="recipes/web/strands/"><img src="docs/assets/effects/strands.gif" alt="Strands — flowing luminous fibers" /></a></td> </tr> <tr> <td><a href="recipes/web/bounce-cards/">bounce-cards</a> · entrance A card stack fans out with a staggered bounce as it enters the view.</td> <td><a href="recipes/web/strands/">strands</a> · GPU shader Luminous fibers drifting like hair in water — a quiet hero backdrop.</td> </tr> <tr> <td width="50%"><a href="recipes/web/silk/"><img src="docs/assets/effects/silk.gif" alt="Silk — flowing silky fabric waves" /></a></td> <td width="50%"><a href="recipes/web/waves/"><img src="docs/assets/effects/waves.gif" alt="Waves — perlin-warped line field with a pointer wake" /></a></td> </tr> <tr> <td><a href="recipes/web/silk/">silk</a> · GPU shader Flowing fabric, ported from a three.js scene to a single fragment shader.</td> <td><a href="recipes/web/waves/">waves</a> · canvas 2D A perlin-warped line field with a pointer wake — organic, editorial, calm.</td> </tr> <tr> <td width="50%"><a href="recipes/web/faulty-terminal/"><img src="docs/assets/effects/faulty-terminal.gif" alt="Faulty terminal — CRT glitch grid" /></a></td> <td width="50%"><a href="recipes/web/pixel-blast/"><img src="docs/assets/effects/pixel-blast.gif" alt="Pixel blast — drifting pixel pattern with click ripples" /></a></td> </tr> <tr> <td><a href="recipes/web/faulty-terminal/">faulty-terminal</a> · GPU shader A glitching CRT grid for cyber / dev-tool moods.</td> <td><a href="recipes/web/pixel-blast/">pixel-blast</a> · GPU shader · interactive A drifting pixel pattern that ripples outward from every click.</td> </tr> </table>

Kinetic text

Motion is not only backgrounds — text is a first-class citizen. These run on plain DOM, dependency-free:

<table> <tr> <td width="50%"><a href="recipes/web/decrypted-text/"><img src="docs/assets/effects/decrypted-text.gif" alt="Decrypted text — glyphs resolve into ACCESS GRANTED" /></a></td> <td width="50%"><a href="recipes/web/text-scramble/"><img src="docs/assets/effects/text-scramble.gif" alt="Text scramble — a techy decode reveal between phrases" /></a></td> </tr> <tr> <td><a href="recipes/web/decrypted-text/">decrypted-text</a> · kinetic text Random glyphs resolve left-to-right into the real line — hacker-movie energy, one attribute to use.</td> <td><a href="recipes/web/text-scramble/">text-scramble</a> · kinetic text Decode-reveal between any phrases, programmable via <code>scrambleTo(el, text)</code>.</td> </tr> <tr> <td width="50%"><a href="recipes/web/count-up/"><img src="docs/assets/effects/count-up.gif" alt="Count up — stats rolling from zero to their values" /></a></td> <td width="50%"><a href="recipes/web/true-focus/"><img src="docs/assets/effects/true-focus.gif" alt="True focus — a focus frame hops word to word, blurring the rest" /></a></td> </tr> <tr> <td><a href="recipes/web/count-up/">count-up</a> · kinetic text Numbers roll up to their value on view — the stat-block moment, eased properly.</td> <td><a href="recipes/web/true-focus/">true-focus</a> · kinetic text A focus frame hops word to word while the rest stays blurred — spotlight your claim.</td> </tr> </table> 35 of the library's distinctive effects are faithful dependency-free ports — see <a href="ATTRIBUTION.md">ATTRIBUTION.md</a> for sources and permissions. The full library holds 403 recipes.