Make AI finally work for you
Teaches the assistant to build polished UI animations with Motion (motion.dev) for React: animated product mockups, chat replays, typing effects, and staggered reveals, with a complete animated chat example included.
A Vellum plugin that teaches your assistant to build polished UI animations with Motion for React.
Ask for an animated product mockup, a chat conversation replay, a typing effect, or a staggered card reveal, and the assistant follows the patterns in this plugin instead of improvising. The patterns come from a real build: an animated Slack-style chat inside a phone frame, with ghost typing on a slide-up keyboard, a typing indicator, a card carousel, and a link preview.
One skill, motion-design, containing:
bun install && bun run dev.assistant plugins install vellum-ai/motion-design
Or copy the directory into your workspace at plugins/motion-design/.
Once installed, just ask your assistant for an animation. The skill activates automatically when the request matches. For example:
The assistant scaffolds a Vite + React project, pulls the right patterns from the skill's references (script-driven playback, springs, ghost typing, enter/exit transitions), and verifies the result visually in a browser before calling it done.
To point it at the worked example directly: "use the chat-mockup example from the motion-design plugin as a starting point."
The bundled example animates a Slack mobile conversation on loop: messages arrive with spring physics, a typing indicator bounces, a keyboard slides up and ghost-types a reply character by character, a villa carousel staggers in, and a link preview card pops with a reaction. Run it:
cd skills/motion-design/examples/chat-mockup
bun install
bun run dev
MIT