Components

Nuxt Motion Block ships 260+ components across seventeen categories, from a chat transcript to a card that leans toward the pointer. Every page follows the same shape — usage, customization, props, UI slots, accessibility and performance — so once you have read one, the rest read the same way. The sidebar lists every page; this page is the map.

Categories

3D

• 3D Card — a card with perspective that responds to pointer movement.
• Book — a jacket, a spine and a page block drawn with CSS 3D.

AI

Twenty pieces for assistant interfaces, from the transcript down to the character:

• AI Messages — a transcript of chat turns, with the module's six AI states mapped onto Nuxt UI's four.
• AI Message — a single turn: avatar, bubble, actions.
• AI Reasoning — thinking collapsed behind a one-line summary with a measured duration.
• AI Tool Call and AI Task List — an invocation with a status ring, and the plan around it.
• AI Sources and AI Citation — the evidence: a fan of favicons and the inline reference.
• AI Prompt Input — attachments, a live counter, and a submit button that becomes stop.
• AI Orb Face Mouth — the character: nine moods, gaze, and a mouth that talks over any of them.
• AI Conversation — a thread that follows the bottom only while you are already there, and offers a way back when you leave.
• AI Branch — several answers to one question, swapped one at a time under an anchor that never moves.
• AI Approval — the card an agent puts up before it acts, where the chosen option fills the card and the rest collapse away.
• AI Artifact — a generated artifact whose preview and source swap along a shared axis instead of cross-fading.
• AI Context Meter — a ring that shows how full the context window is, changing hue at the thresholds and never changing size.
• AI Suggestions - prompt chips that radiate in from the middle of the row, so no chip reads as the important one.
• Image Generation Panel - a prompt composer, a grid of tiles that resolve from mosaic to sharp, and the batch progress around them.

Backgrounds

• Animated Background — a field that follows interactive elements.
• Background Beams — light beams that converge on a focal point.
• Aurora Background — a slow aurora wash behind content.
• Aurora Curtain — a WebGL aurora of folding light ribbons and film grain.
• Vortex and Meteors — motion you can leave running behind a hero.

Buttons

• Magnetic Button — the button leans toward the cursor.
• Button Copy — copy that confirms itself.
• Theme Toggle and Music Toggle — small switches with the motion built in.

Cards

• Draggable Card — a card you can pick up and throw, with spring physics.
• Evervault Card — a gradient that follows the cursor across the surface.
• Wallet Card — gradient, grain, EMV chip, contactless glyph and a hover sheen.
• Stacked Cards — a stack that rotates itself.
• Glass Card and Glass Panel — frosted surfaces with the blur done properly.
• Mac Terminal — a window that types a scripted shell session.
• Photo Stack - a draggable deck that throws the top card to the back.
• Tilt Card - a surface that leans toward the pointer, with a glare and depth parallax.
• Card Swipe Deck - a swipe deck whose top card is thrown left or right, with stamps, a colour wash and an imperative API.
• Scrollable Card Stack - a profile deck that advances one card per wheel, swipe or arrow key, with the cards behind it receding into depth.

Carousels

• Carousel — embla-backed, with the controls themed.
• Coverflow Carousel — covers recede on either side.
• Reviews Carousel — testimonials on a loop.

Directional

• Direction Aware Hover — the hover response comes from the side the pointer entered.

Effects

• Spotlight — light that tracks the cursor.
• Border Beam and Tracing Beam — a highlight that travels along an edge.
• Siri Orb — an ambient orb that reacts to audio amplitude and assistant state.
• Liquid Metal — a WebGL2 surface that flows like chrome, gold or mercury.
• Gooey Filter — an SVG filter that melts overlapping shapes into one silhouette.
• Pixelated Canvas and ASCII Render — an image redrawn as cells or characters.
• Dither Image — a photo quantised to a small tonal ramp with an ordered or diffused kernel.
• Video Ambient — a player with an ambient glow sampled from its own frames.
• Arcade Pixel — text or sprites drawn through a 5x7 pixel font, with phosphor glow and CRT artefacts.
• Gravity Stars — a drifting starfield that falls towards the pointer and swirls past it.
• Pixel Flow Field — a word or image rasterised into a grid and set adrift by a noise flow field.

Forms

• Animated Input — a field whose focus state moves.
• Animated Toggle and Checkbox — switches with real state changes, not colour swaps.
• Morph Toggle — a switch whose thumb squares off while off and rolls into a circle.
• Animated File Upload — drop zone, progress, done.
• Animated Stepper — a multi-step flow that animates between steps.
• Animated OTP Input — six boxes and a shake on failure.
• Country Picker and Favicon Search — searchable pickers with real listbox behaviour.
• Scrubber and Social Selector — a bounded slider and a row of network toggles.
• Swap Panel — a token swap ticket with a quoted output, a countdown ring and a state-aware action button.
• Form - a schema-driven form whose fields rise in, shake on error and confirm when fixed.
• Auth Form - sign-in and sign-up in one form, with live password rules, provider buttons and a submit button that morphs through its states.
• Digit Roll — a number field whose digits roll, with scrubbing and keyboard stepping.
• Float Input — a label that rises into the border as the field fills.

Interactive

• Dock — the macOS dock, magnification included.
• Dynamic Island — a pill that morphs between five system views.
• Motion Dialog, Drawer and Rich Popover — overlays that animate from where they belong.
• Drag and Drop — sortable lists with a spring handoff.
• Unlock Face ID — a scan that blurs content until it succeeds.
• Code Block — Shiki highlighting with a copy button.
• Fluid Hover Highlight - one plate that travels between the rows the pointer or the keyboard lands on.
• Hover Expand and Hover Image List - panels that trade width on hover, and a link list with a trailing preview.
• Phototab - a square photo panel behind an icon tab bar that slides in on hover.
• Image Metadata Preview - a photo whose metadata panel rises from the bottom as the image lifts clear.
• Count Badge - notification counts, presence dots and pings on the same anchor.
• GitHub Stars Animation - a star count that climbs beside a stack of stargazer avatars.
• Interactive Image Selector - a photo grid that switches into a selection mode with a floating share and delete bar.
• Time Machine Stack - a 3D stack of panels you page through with the wheel, a drag or the arrow keys.
• Job Listing - a list of open roles that opens each posting into a focused detail panel.
• User Account Avatar - an avatar button that opens an account menu for editing a profile and reviewing orders.
• Folder Reveal — a folder with a tab and a front flap, whose cards fan out of the gap.
• Inline Testimonials — quotes opened from the name cited inside the sentence.
• Morph Surface — a dock that grows into the composer it opens, without pushing the page down.
• Power Off Slide — a destructive action behind a handle that has to travel the length of the track.
• Contribution Graph - a year of activity as a keyboard-reachable heatmap.
• Vector Editor Toolbar - drawing tools with variant flyouts, keyboard shortcuts, a travelling active pill and a draggable floating rail.
• Pixel Brush Canvas - a pixel-art canvas with pencil, fill, line and rectangle tools and an undo stack.

Layout

• Animated Group — coordinated enter and exit for a set of children.
• Collision — beams and an explosion where elements meet.
• Breakpoint Indicator — the active Tailwind breakpoint and live viewport size.

Loaders

• Motion Loader — an indeterminate spinner with weight.
• Grid Loader — a grid that fills and empties in sequence.
• Page Preloader — a first-paint cover that gets out of the way.
• AI Loader — three waiting indicators on one shared cycle.
• Content Skeleton — a pulse layer shaped by the content it stands in for.

Movement

• Cursor - a custom cursor with trailing effects.
• Cursor Follow - a dot that becomes a label over anything marked with data-cursor-text.
• Cursor Image Trail — photos that drop in behind the pointer as it travels.
• Magnetic — elements pulled toward the pointer.
• Tilt — 3D tilt from cursor position.
• Force Dot — a dot with physics of its own.
• Magnetic Field — a group where each marked element leans toward the pointer on its own spring.

Navigation

• Expandable Navbar — a bar that opens in place.
• Floating Navbar — a bar that detaches from the top edge.
• Adaptive Toolbar and Collapsible Toolbar — an icon rail that grows into an action bar.
• Breadcrumb, Pagination and File Tree — trails, page ranges and a tree that unfolds.

Scroll

• In View — trigger work when an element enters the viewport.
• Scroll Progress — a bar tied to document position.
• Scroll Velocity — speed, not position, drives the effect.
• Kinetic Type Scroll — each word lifts on its own window of scroll.
• Infinite Slider — a loop that never shows its seam.

Text

• Text Reveal — content uncovered in a chosen direction.
• Text Shimmer and Text Shimmer Wave — a highlight that passes through the glyphs.
• Text Scramble and Text Morph — characters resolving into the real string.
• Typing Text and Word Rotate — the two classic rotation patterns.
• Animated Number, Counting Number and Sliding Number — digits that move instead of swap.
• Number Flow — a fixed-width counter whose digits roll in the direction of the change.
• Ransom Note — a string cut into scraps of mismatched type.
• Shared Axis — one phrase replaces another along a horizontal, vertical or depth axis.
• Blur Out Up, Depth Parallax Words and Per Character Rise — entrances at three units: word, phrase, letter.
• Scale Down Fade and Shimmer Sweep — a single line settling, large or soft.
• Rolling Text — split-flap characters cycling through a glyph ramp before landing.
• Fade Through and Kinetic Center Build — phrase rotation, quiet and loud.
• Scroll Reveal Paragraph — prose that fills in as it travels up the viewport.
• Gravity Letters — glyphs that fall, bounce and spring back into the line.

Transitions

• Transition Panel — swap panels without a jump cut.
• Prism Sweep Transition, SDF Blob Transition and Shader Reveal Transition — shader-driven reveals between two states.
• Aperture Blur Transition — an iris ring that opens from the centre of the panel and swaps the content behind its glow.
• Chroma Blur Transition — a diagonal curtain with a split colour fringe that sweeps across the panel.

Related

The hooks behind these components live under Composables — useMotionBlockUI for theming, useThemeColor for canvas work, and the cursor helpers. For install and prefix configuration, see Usage.