Audit the token layer and open a pull request.
Livespotlights
Copy-paste motion for Vue: springs, gestures, 3D, and scroll, all themed by your design tokens.
App.vueNuxt
Hover to tilt
follows your cursor
1
<MTilt :rotation-factor="18">2<UButton>Hover me</UButton>3</MTilt>0
+Motion components
0
Copy-paste examples
0
Component categories
0
Config required
AI interfaces, already animated
Chat, reasoning, tool calls, and agents, wired to Motion for Vue and styled with your Nuxt UI tokens.
Reviewer
motion-block agent
Blast radius first: the audit walks every theme token, so landing it cold means a long tail of visual diffs. Better to read the tokens, swap the hardcoded values, then open the pull request.
Done
Found 12 hardcoded colors. I can tokenize them without touching your theme.
Found 12 hardcoded colors 1. I can tokenize them without touching your theme 2.
Expressive faces
Agent avatars
One seed, one permanent identity.
Tokenize the palette
3/6
- Read every component source
- Tokenize the palette
- colors18/18
- spacing12/12
- typography7/9
- Open the pull request
Streaming responsesReasoning tracesTool call cardsTask listsCited sourcesPrompt inputAgent avatarsExpressive orbs
Live components, not screenshots
Every tile below is running on this page right now. Hover, click, and scroll the real thing.
BackgroundsAurora Background
A gradient that drifts behind your content.
EffectsSpotlight
A light that follows the cursor.
EffectsGlow Effect
An animated glow rim for any surface.
CardsStacked Cards
Cards that fan, swap, and settle.
CardsGlass Card
Frosted surfaces with real depth.
TextText Shimmer
A light sweep across a headline.
TextText Scramble
Characters resolve into words.
InteractiveAnimated Tooltip
Springy tooltips for any trigger.
MovementMagnetic
Elements that lean toward the pointer.
Why Motion Block
Everything you need to ship motion
Built on Nuxt UI and Motion for Vue, so components inherit your theme, respect your design tokens, and stay accessible by default.
Theme-aware by default
Components read your Nuxt UI colors and design tokens, so switching themes flows through every animation without overrides.
Powered by Motion for Vue
Springs, gestures, and orchestration come from Motion for Vue, the engine behind some of the smoothest interfaces on the web.
Accessible without asking
Reduced-motion preferences are honored, markup stays semantic, and keyboard and screen-reader users get the full experience.
TypeScript-first API
Props, slots, and events are typed end to end, with sensible defaults and a ui prop for when you need to reach deeper.
3D
Depth that stays smooth
Perspective, tilt, and spring physics that render on the GPU and hold their frame rate.
PerspectiveText3DOrbitalImageWheelAnimatedSpotlightVortexTiltParticles
Browse all components Depth, dimension, motion
Move your cursor
Put your interface in motion
Install Motion Block, drop in a component, and watch your Nuxt UI app come alive. No configuration, no lock-in.