Motion Block

Nuxt Motion — v0.1

Motion components,
for Nuxt UI.

292 animated Vue components, typed end to end and wired into your Nuxt UI tokens. Springs, staggers, scroll and 3D — one install away.

Start building GitHub
pnpm add nuxt-motion-block

292 components 800+ examples 17 families MIT

Motion.vueLive
live

An infinite horizon, in four lines.

MRetroGrid
<MRetroGrid
  :angle="58"
  :cell-size="54"
  color="rgba(240,106,60,0.8)"
/>
01 The problem

Every team rebuilds
the same eleven
animations.

The spotlight, the magnetic button, the headline that resolves out of noise — once per project, until it seemed silly to start over.

So we packaged them.
Typed. Themed.
MIT.

292

components, all typed

800+

working examples

17

families to steal from

MIT

no strings attached

02 The agent layer

Agents,
already
animated.

Chat, reasoning, tool calls and cited sources — wired to Motion for Vue and styled with your Nuxt UI tokens.

  1. 01

    Streaming responses

    Tokens arrive as motion, not jumps.

  2. 02

    Reasoning traces

    Reveal the thinking, not just the answer.

  3. 03

    Tool call cards

    Structured calls with live status.

Reviewer

motion-block agent

thinking
Audit the token layer and open a pull request.
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

Assistant, idle
idle
Assistant, thinking
thinking
Assistant, streaming
streaming

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
03 The bench

The kit, live.

Nine components running on this page right now. No recordings, no mocks — hover, click, scroll.

All 292
01Backgrounds

Aurora background

MAurora

02Effects

Spotlight

MSpotlight

03Effects

Glow effect

MGlowEffect

04Cards

Stacked cards

MCardStack

05Cards

Glass card

MGlassCard

06Text

Text shimmer

MTextShimmer

07Text

Text scramble

MTextScramble

08Interactive

Animated tooltip

MAnimatedTooltip

09Movement

Magnetic

MMagnetic

04 The parts

The parts you'd rather not rebuild.

Each component is a Nuxt UI primitive with motion bolted on properly — inheriting your tokens, honoring reduced-motion, and typed before you reach for the docs.

One install

pnpm add nuxt-motion-block

Peer deps install themselves. No config, no plugin order to remember.

  • 01

    Theme-aware by default

    Swap your Nuxt UI palette and every animation follows. No overrides, no second design system.

  • 02

    Motion for Vue inside

    Springs, gestures and orchestration come from motion-v — the same engine behind the smoothest interfaces on the web.

  • 03

    Accessible without asking

    Reduced motion is honored, markup stays semantic, and keyboard and screen-reader users get the whole thing.

  • 04

    Typed end to end

    Props, slots and events are typed, with sensible defaults and a ui prop for when you need to reach deeper.

05 The dimension

3D that doesn't
drop frames.

Perspective, tilt and spring physics on the GPU. It reads as depth, not as a demo — which is the hard part.

  • MPerspectiveText3D
  • MTiltCard
  • MOrbitingCircles
  • MVortex
  • MParticles
  • MRetroGrid
Browse every component
Depth, dimension, motion.

Move your cursor

06 The install

Make something
that moves.

One install, then the components are yours — your theme, your tokens, your taste.

pnpm add nuxt-motion-block

MIT — peers install themselves

Start building View source