Components

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

Categories

3D

• 3D Card — Interactive 3D card with perspective effects that respond to mouse movement.
• Book — A 3D book cover built from CSS perspective transforms, with a spine, page block and a hover tilt.
• Globe — An autorotating, interactive globe rendered in WebGL.

AI

• Agent Avatar — A deterministic, animated pixel avatar generated from a string seed.
• 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 Branch — Several answers to the same question, swapped one at a time under an anchor that never moves.
• AI Citation — An inline citation pill that previews its source on hover or focus.
• AI Context Meter — A ring that shows how full the context window is, changing hue at the thresholds and never changing size.
• AI Conversation — A thread that follows the bottom only while you are already there, and offers a way back when you leave.
• AI Diff — A reviewable code patch with a staggered wipe, a verdict flash, and accept or reject.
• AI Message — One chat turn — role, part-driven content, a copy action and your own actions.
• AI Messages — A transcript of chat turns, with this module's six AI states mapped onto Nuxt UI's four.
• AI Orb — A WebGL2 sphere with colour marbling inside it, lit like a real material.
• AI Orb Face — A character that wears an orb: expression, gaze, breathing, and a fault wobble.
• AI Orb Face Mouth — A character that wears an orb: nine moods, gaze, blinking, and a mouth that talks over any of them.
• AI Prompt Input — The composer: attachments, a live counter, and a submit button that becomes stop.
• AI Reasoning — A model thinking out loud, collapsed behind a one-line summary with a measured duration.
• AI Response — Streamed answer text where words fade in as they arrive and [n] markers become citation pills.
• AI Sources — A collapsed stack of source favicons that fans on hover and expands into a list.
• AI Suggestions — Prompt chips that radiate in from the middle of the row, so no chip reads as the important one.
• AI Task List — A plan the model is working through — nested steps, a derived count, and a check that draws itself.
• AI Tool Call — A single tool invocation with a status ring that keeps its shape through the whole lifecycle.
• 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 — Animated background that follows interactive elements.
• Animated Grid Pattern — A faint lattice with squares that light up at random.
• Animated Spotlight — Animated spotlight effect with customizable gradients and movement.
• Aurora Background — Animated background with aurora-like gradient effects.
• Aurora Curtain — A WebGL aurora of folding light ribbons with film grain, drifting behind any content.
• Background Beams — Animated SVG background with customizable beam paths and gradient colors.
• Background Gradient Animation — Animated background with customizable gradient colors and interactive effects.
• Background Lines — Animated SVG background with customizable coloured lines that move across the screen.
• Background Ripple Effect — Interactive background ripple effect with customizable grid size and cell dimensions.
• Boxes Core — Animated grid of boxes with hover effects and customizable colours.
• Directional Light — SVG-based directional light effect with customizable colours and positioning.
• Dotted Glow Background — Animated dotted background with glowing effects and customizable colours.
• Dotted Map — A flat world map traced in dots, with markers that can pulse.
• Flickering Grid — A canvas of squares that keeps re-rolling its own opacity.
• Hexagon Pattern — A honeycomb lattice drawn as a single repeating SVG tile.
• Interactive Grid Pattern — A grid of cells that lights up under the pointer — an interactive background for heros and empty states.
• Lamp Container — Animated lamp effect container with customizable gradient colors and lighting effects.
• Light Rays — A fan of soft light beams sweeping out of one corner or edge.
• Meteors — Animated meteor shower effect with customizable density and timing.
• Noise Texture — A film-grain overlay generated by a single SVG turbulence filter.
• Particles — A drifting field of dots that scatters away from the pointer.
• Retro Grid — A tilted grid plane that scrolls towards the horizon.
• Shooting Stars — Animated shooting stars effect with customizable colours, speed, and timing.
• Stars Background — Animated starfield background with customizable density and twinkling effects.
• Striped Pattern — A diagonal stripe backdrop drawn from a single repeating gradient.
• Vortex — Animated particle vortex effect with customizable colours, speed, and density.
• Warp Background — A perspective floor grid that scrolls toward the viewer under a glowing horizon.

Buttons

• Button Copy — A copy button that swaps its icon and its label for a checkmark once the clipboard write is done.
• Clip Corners Button — A button whose four corner triangles spring inward on hover, reading as the corners being clipped away.
• Dot Morph Button — A UButton whose leading dot turns from a circle into a pill on hover, sized to the button itself.
• Interactive Hover Button — A pill with a dot that blooms into a full fill while the label slides over.
• Magnetic Button — A button that follows the pointer inside a pull radius and springs back when the pointer leaves.
• Music Toggle — A record that spins while playing, wrapped in a progress ring, with a waveform and a keyboard-seekable slider.
• Pulsating Button — A primary button with a halo that keeps expanding behind it.
• Rainbow Button — A button whose one-pixel border carries a rotating conic gradient.
• Ripple Button — A button that spawns a spreading circle wherever you press.
• Shimmer Button — A dark button with a highlight that keeps sweeping across its face.
• Shiny Button — A bordered button with a light sweep that crosses it on hover.
• Smooth Button — A button with a skewed light sweep on hover and a press scale, wrapped so every UButton prop still works.
• Theme Toggle — A button that advances Nuxt UI's colour mode through light, dark and system, crossfading the glyph that names the current one.

Cards

• App Download Stack — An expandable macOS-style app selector that fanned-stack animates icons and drives a multi-app download flow.
• Apple Invites — A stacked carousel of Apple-style invite cards that auto-advances with 3D-like slide transitions.
• Bento Grid — A responsive grid of cards that reveal more on hover.
• Card Swipe Deck — A deck of cards you throw left or right, with drag-driven stamps, a colour wash, a receding stack and an imperative API.
• Draggable Card — Interactive card that can be dragged around with 3D tilt effects.
• Evervault Card — Cybersecurity-inspired card with dynamic gradient effects that follow cursor movement.
• Expandable Cards — An accordion-like stack that expands a single card at a time with smooth height and rotation animations.
• Figma Comment — A compact Figma-style comment bubble that expands from a dot to reveal the full comment on click.
• Focus Cards — Interactive card grid with hover effects that expand and focus on individual cards.
• Glare Card — Interactive card with dynamic glare effects that respond to mouse movement.
• Glass Card — A layered glass surface whose specular highlight, light sweep and chromatic rim track the pointer.
• Glass Panel — A frosted card with an optional background image that drifts under the pointer.
• Glow Hover Cards — A responsive grid of cards, each with a radial glow that follows the pointer inside it.
• Glowing Stars Card — Card component with animated glowing stars effect and customizable colours.
• Mac Terminal — A macOS-style terminal window that types a scripted shell session, with traffic-light controls and a blinking caret.
• Magic Card — A card whose highlight tracks the pointer across its edge.
• Mail Card — A mail-list card that expands its body on click with a height animation and a rotating chevron.
• Photo Stack — A draggable deck of photo cards. Drag or tap the top card to send it to the back and reveal the next.
• Price Flow — A price counter that slides each changed digit into place with a single, gently staggered transition when the value updates.
• Product Card — A store-ready product tile with a hover zoom, star rating, discount badge, wishlist and add-to-cart states.
• Scrollable Card Stack — A profile deck that moves one card per wheel, swipe or arrow key, with the cards behind it receding into depth.
• Shine Border — A single highlight that travels around the edge of a box.
• Social Hover Card — An inline mention that opens a profile preview on hover or focus, with count-up stats and a follow button.
• Stacked Cards — Animated stack of cards that automatically rotate with smooth transitions.
• Switchboard Card — A card that flips in 3D between a front face and a back face on a driven prop.
• Tilt Card — A card that rotates toward the pointer, with an optional glare and depth-based parallax for nested layers.
• Tweet Card — A social post card with avatar, handle, timestamp and like and repost counts that lifts on hover.
• Wallet Card — A realistic bank-card surface with gradient, grain, EMV chip, contactless glyph and a hover sheen — balance, masked number and optional holder details.
• Wobble Card — Card with a wobble effect that responds to cursor movement.

Carousels

• Carousel — Nuxt UI's carousel with every slide pushed into a 3D coverflow fan.
• Coverflow Carousel — A self-contained coverflow that fans images in 3D, driven by buttons, drag, keyboard or autoplay.
• Reviews Carousel — A snap-scrolling review strip that drifts forward on its own and holds still while hovered.

Directional

• Direction Aware Hover — Card that reveals content based on the direction of mouse entry with smooth animations.
• Direction Aware Hover New — Enhanced image card with content that slides in from the direction of the cursor.

Effects

• Animated Beam — A gradient comet that travels between two elements.
• Arcade Pixel — Text or sprites drawn through a 5x7 pixel font on a canvas, with phosphor glow and an optional CRT overlay.
• ASCII Render — Samples an image or video into a grid of characters, mapping each cell's luminance to a glyph.
• Border Beam — A comet of light that travels around a box's border as a stroked dash.
• Border Trail — An animated border with a trail of particles that travels along its edge — for frames, cards and callouts.
• Brightness slider — A notched exposure-control rail with spring tracking, keyboard support and a progress ring.
• Confetti — A canvas burst of paper pieces, fired on demand — the celebration primitive behind milestones.
• Depth layers — Scroll-driven multi-depth parallax with optional pointer tracking.
• Dither Chart — Renders series data as a canvas chart dithered through an ordered Bayer matrix, with a draw-in animation.
• Dither Image — An image redrawn on a canvas with an ordered or error-diffused dithering algorithm.
• Div Grid — Grid of div elements with customizable size, colors, and interactive behavior.
• Drawing Cursor — Turns pointer movement over its own bounds into a fading, speed-tapered ink stroke on a canvas overlay.
• Emboss Surface — A material surface whose relief is built from stacked shadows or a lit SVG filter, with an optional pointer-tracked light angle.
• Flowing Stroke — A dashed stroke laid along a configurable path that travels on hover or on a loop.
• Glow Effect — Component that adds a dynamic glow effect with customizable colours and animations.
• Glowing Effect — Interactive glowing effect with customizable colours, blur, and proximity detection.
• Gooey Filter — An SVG goo filter that makes overlapping shapes melt into one another as they move.
• Gravity Stars — A drifting starfield whose stars fall towards the pointer, swirl past it and settle back into ambient parallax.
• Icon Cloud — A draggable sphere of logos that keeps turning on its own.
• Iridescent foil — A card that tilts toward the pointer under a banded holographic foil, with a looping sheen and a device-tilt mode.
• Liquid Metal — A WebGL2 surface that flows like metal — chrome, gold, mercury or iridescent oil.
• Mask Container — Dims its content behind a configurable overlay driven by a show prop.
• Orbiting Circles — Place items on one or more rings that orbit a shared centre.
• Pixel Flow Field — A word or image rasterised into a grid of cells and set adrift by a noise flow field, with a pointer wake that scatters cells as you move.
• Pixelated Canvas — Interactive pixelated image rendering with distortion effects and customizable cell sizes.
• Progressive Blur — Component that creates a progressive blur effect in a specified direction.
• Siri Orb — A Siri-style ambient orb that reacts to audio amplitude and assistant state.
• Spotlight — Component that creates a spotlight effect following the cursor.
• Squircle — Superellipse corners, generated as a clip path and tracked on resize.
• SVG Clip Mask — Masks its content with a real SVG clipPath that can morph, step on scroll, or swap on hover.
• Tracing Beam — A beam that follows the user's scroll position down the page — a scroll-linked highlight for articles and docs.
• Video Ambient — A video player with an ambient glow sampled from its own frames.

Forms

• Animated File Upload — Nuxt UI's file upload with a drop zone that lifts on drag and file rows that stagger in from the left.
• Animated Input — A text input whose label floats out of the field on focus or on the first character.
• Animated Number Input — A number input whose digits roll up and down as the value changes.
• Animated OTP Input — A one-time-code input whose digits flip and scale in as each cell is filled.
• Animated Progress Bar — A progress bar whose fill springs to the new value, with an optional shimmer sweep.
• Animated Stepper — A stepper whose content panel slides horizontally in the direction of travel.
• Animated Tags — A tags input whose chips blur in, settle with a layout shift, and fall away when removed.
• Animated Toggle — A switch that plays a quick scale pop when toggled on.
• Auth Form — A sign-in and sign-up form with a mode cross-fade, live password rules, provider buttons and a submit button that morphs through its states.
• Checkbox — A checkbox whose tick is drawn along its stroke when it is checked.
• Country Picker — A searchable country dialog with recent choices, regional grouping and full keyboard navigation.
• Digit Roll — A numeric field whose digits roll vertically on change, with horizontal scrubbing and keyboard stepping.
• Duration Picker — A drag-and-keyboard friendly duration picker with animated digit transitions.
• Favicon Search — A combobox search field whose results show each site's favicon, with keyboard navigation and matched-text highlighting.
• Float Input — A text field whose label floats up into the border when the field is focused or filled.
• Form — A schema-driven form with animated field entrance, messages and error shakes.
• Morph Toggle — A switch whose thumb rolls across the track and squares off while it is off.
• Radio Group — A Nuxt UI radio group with a staggered entrance, a hover scale, and a dot that pops in.
• Scrubber — A compact slider with a fill, tick marks and a value readout, driven by pointer capture and the keyboard.
• Social Selector — A row of social platform buttons with a sliding indicator and a handle link that crossfades between networks.
• Swap Panel — A token swap form with a quoted output, countdown ring and a state-aware action button.

Interactive

• Accordion — A vertical stack of collapsible panels that spring their height open and closed.
• Animated Tooltip — Nuxt UI's tooltip with a spring-driven entrance that scales in from the side it opens on.
• Basic Dropdown — A styled select dropdown with animated chevron and custom item rendering.
• Basic Toast — A declarative wrapper over Nuxt UI's useToast() that drives motion toasts with a single component.
• Code Block — A Shiki-highlighted code panel with a language label and a copy button.
• Code Comparison — Two code panes with a divider you can drag to reveal either side.
• Contribution Graph — A calendar heatmap of a year of activity, with five intensity levels, month headers and keyboard-reachable day tooltips.
• Cool Mode — Wrap any control and every press throws a burst of emoji from the point you touched.
• Count Badge — A notification badge that anchors to a corner, counting, marking presence or just pulsing.
• Dock — macOS-style dock with magnification effects and smooth animations.
• Drag and Drop — A sortable list, grid or masonry of items that reorder on drag and report the new order.
• Drawer — A slide-in panel with animated content and optional handle.
• Dynamic Group — Lays out a reactive array of items as a grid, row or column and animates entries, exits and reflow.
• Dynamic Island — A pill that morphs between five system-style views — idle, incoming call, timer, notification and now playing.
• Emoji Reaction — A controlled reaction bar with animated counters, a hover picker, and a particle burst on every reaction.
• Fluid Hover Highlight — One plate that travels to whatever row the pointer or the keyboard lands on.
• Folder Reveal — A folder with a tab, a front flap and cards that fan out of the gap when it opens.
• GitHub Stars Animation — A repository star count that counts up beside an overlapping stack of stargazer avatars.
• Hover Expand — A row of image panels where the one under the pointer grows and the rest collapse to thin strips.
• Hover Image List — A list of links that reveals a preview image next to the pointer, with a slight skew driven by pointer speed.
• Image compare — Interactive image comparison component with slider controls for before/after visualization.
• Image Metadata Preview — A photo preview whose metadata panel rises from the bottom, lifting the image clear as the panel opens.
• Inline Testimonials — Quotes that live inside the sentence that cites them, opened from the name.
• Interactive Image Selector — A photo grid that switches into a selection mode with a floating share and delete bar.
• Job Listing — A list of open roles that opens each posting into a focused detail panel.
• Lens — A magnifying circle that follows the pointer across an image.
• Morph Icon — A 24x24 icon swap that rotates and scales one glyph into another, driven entirely by a boolean.
• Morph Surface — A dock that grows into the composer it opens, instead of summoning one somewhere else.
• Motion dialog — A modal dialog component with smooth animations powered by motion-v.
• Notification Badge — A count badge that springs onto any element and disappears the moment the count reaches zero.
• Orbital Image Wheel — A draggable, momentum-spun ring of thumbnails with keyboard stepping and snap-to-item.
• Phototab — Photo tabs with a pill that follows the pointer and a tab bar that slides in on hover.
• Pinned List — A pinnable list where pinned items animate to the top and keyboard shortcuts let you move focus and pin/unpin.
• Pixel Brush Canvas — A pixel-art canvas with pencil, eraser, fill, line and rectangle tools, a keyboard cursor and an undo stack.
• Power Off Slide — A destructive action behind a handle that has to be dragged the length of the track.
• Rich Popover — Nuxt UI's popover with a spring-scaled content panel and its own animated arrow.
• Scratch to Reveal — A cover you scratch off with the pointer to uncover whatever sits underneath.
• Shape-shift dialog — A modal dialog that morphs from its trigger using shared layout animations.
• Shape-shift popover — A popover component with morphing animations powered by motion-v, built as a wrapper around Nuxt UI's Popover component.
• Time Machine Stack — A 3D stack of panels you page through with the wheel, a drag or the arrow keys.
• Unlock Face ID — A Face ID glyph that runs its own scan, with content that blurs until the read succeeds.
• User Account Avatar — An avatar button that opens an account menu for editing a profile and reviewing orders.
• Vector Editor Toolbar — A drawing-tool toolbar with variants behind each tool, a travelling active pill, keyboard shortcuts and a draggable floating mode.
• Video Modal — A modal that mounts a native video element, plays it when it opens and pauses it when it closes.
• Zoomable Image — A thumbnail that opens into a full-size overlay when you click it.

Layout

• Android — A CSS phone frame with a punch-hole camera instead of a dynamic island.
• Animated Group — Animate multiple elements in sequence with staggered delays.
• Breakpoint Indicator — A development badge that names the active Tailwind breakpoint and shows the live viewport size.
• Collision — Collision detection system with animated beams and explosion effects.
• iPhone 15 Pro — A CSS phone frame with a dynamic island, sized to hold any content.
• Safari — A browser window frame with traffic lights and an address bar.

Loaders & Progress

• AI Loader — A family of waiting indicators that share one cycle and never fake determinate progress.
• Circular Progress — A ring that fills to a value and eases into every change.
• Content Skeleton — A loading overlay that borrows the exact shape of the content it stands in for.
• Grid Loader — A 3×3 pixel grid that pulses through one of sixty-odd built-in patterns, or cycles a custom sequence.
• Motion Loader — Twelve hand-built looping spinners rendered from transforms, with a single size, colour and speed control.
• Page Preloader — A teleported full-screen loading overlay with a progress bar or spinner, dismissed by an emitted event.

Interaction & Movement

• Cursor — Custom animated cursor with various styles and interactive effects.
• Cursor Follow — A custom cursor bubble that grows into a label when it passes over anything marked with data-cursor-text.
• Cursor Image Trail — Photos that drop in behind the pointer as it travels across a surface.
• Force Dot — Interactive particle system with physics-based animations.
• Magnetic — Component that creates a magnetic effect, attracting elements toward the cursor.
• Magnetic Field — A group of elements that each lean toward the pointer, with a loop that stops when they settle.
• Tilt — Component that creates a 3D tilt effect based on cursor movement.

Navigation & Toolbars

• Breadcrumb — A path trail whose crumbs spring in from the left with a short stagger.
• Expandable Navbar — A header whose links collapse into a mobile panel that staggers in when it opens.
• File Tree — A keyboard-friendly file browser whose folders unfold with an animated height and a rotating chevron.
• Floating Navbar — A floating header that hides on downward scroll and reappears on upward scroll.
• Pagination — A page switcher with a fixed-width range and a shared pill that springs between pages.
• Toolbar adaptive — A pill toolbar that expands in place from a compact icon rail to a wider action bar.
• Toolbar collapsible — A vertical toolbar where each icon button expands a panel of content above it.

Scroll & Viewport

• In View — Animates its content when it scrolls into the viewport, and optionally replays on every entry.
• Infinite Slider — A marquee that duplicates its content once and scrolls it in a seamless loop.
• Kinetic Type Scroll — A phrase where each word scales, tracks and lifts on its own window of scroll progress, forming a travelling crest.
• Marquee — An endless row or column of content that can reverse, run vertically and pause on hover.
• Scroll Image Reveal — An image unmasked by scroll progress through a wipe, curtain, circle, blinds or scale, with counter-parallax inside the frame.
• Scroll Progress — A bar whose horizontal scale follows scroll progress, tracking the window or any scroll container.
• Scroll Velocity — Text that drifts and accelerates with the speed and direction of your scroll.
• Svg Draw On Scroll — An SVG path that draws itself as you scroll, with an optional marker riding the stroke.

Text & Numbers

• Animated Avatar Group — A Nuxt UI avatar group that fans its members apart on hover, optionally overlapping them by a ratio of their size.
• Animated List — A windowed, recede-style list where new entries slide in and older ones fade and shrink as they age.
• Animated Number — An animated numeric value with smooth transitions — spring-damped updates for live counters and metrics.
• Blur Out Up — A sentence that resolves out of focus, one word at a time.
• Bottom Up Letters — Letters that rise out of their own baseline, one after another.
• Comic Text — Chunky comic lettering where every letter springs in from its own angle.
• Counting Number — A number counter with various animation effects — counting up and down, with per-digit timing control.
• Depth Parallax Words — Words that resolve out of focal depth, one after another.
• Fade Through — Phrase cycling where the old line leaves before the new one arrives.
• Focus Blur Resolve — Text that arrives out of focus and resolves to sharp, on mount or on scroll.
• Gravity Letters — Text that breaks into letters, falls under gravity and springs back into place.
• Kinetic Center Build — A phrase that assembles word by word, with the line staying centred as it grows.
• Line By Line Slide — A block of copy that slides in one line at a time, from the left.
• Line Shadow Text — Text whose shadow is a diagonal stripe pattern that slowly sweeps.
• Mask Reveal Up — Headline lines that rise out of their own masks, one line at a time.
• Micro Scale Fade — A whole string that settles in as one object, at 96% scale.
• Number Flow — A three-cell counter whose digits roll in the direction of the change.
• Per Character Rise — Letters that lift into place one after another, sharp from the first frame.
• Per Word Crossfade — A sentence that assembles itself one word at a time.
• Perspective Text 3D — Words spread through a Z stack on a tilted plane, driven by nothing, the pointer, or scroll.
• Ransom Note — A string cut into letter scraps on mismatched paper, cut from mismatched typefaces.
• Rolling Text — Split-flap text where every character cycles through a glyph ramp before landing.
• Scale Down Fade — Copy that enters a touch too large and settles to its natural size.
• Scroll Reveal Paragraph — A paragraph that fills in word by word as it travels through the viewport.
• Shared Axis — A rotating phrase that travels along one axis instead of blinking out and back in.
• Shimmer Sweep — A headline that glides in from the left while dissolving out of blur.
• Shine Text — A highlight band that sweeps across text, the way light passes over brushed metal.
• Short Lower in — Rotating phrases that build one word at a time into a centered stack, then drop away.
• Short Slide Right — Rotating phrases that slide in from the left inside an inline slot, one word at a time.
• Sliding Number — A number whose digits slide in with animation effects — transitions between values without layout shift.
• Soft Blur In — A string that resolves out of focus, one character at a time.
• Sparkles Text — Text with a scatter of stars that keep twinkling around it.
• Spinning Text — Text that spins around a 3D axis — a springy rotation for headlines, badges and attention-grabbing labels.
• Spring Scale In — A headline that pops in word by word, with an overshoot on every word.
• Stagger From Center — Text that resolves outward from the middle character, one ring at a time.
• Stagger From Edges — Text that closes inward from both ends, meeting in the middle.
• Text Animate — Animate text in word by word, character by character or line by line.
• Text Glitch — A glitch with chromatic aberration and jitter — headlines and labels that read like a broken signal.
• Text Glitch New — Text with a glitch effect that creates a digital distortion appearance.
• Text Gradient — Text with animated gradient effects and various animation styles.
• Text Highlighter — A marker swipe that paints itself behind a phrase as it scrolls into view.
• Text Loop — Text that loops through different values with smooth transitions.
• Text Morph — Text that morphs between different strings — a smooth character-by-character crossfade for changing labels.
• Text motion — Splits a string into characters, words or lines and staggers a preset reveal across them.
• Text Reveal — Reveals text one character at a time with a choice of effects.
• Text Roll — Text whose letters roll in from a 3D axis — each glyph rotates into place with a spring.
• Text Scramble — Text that scrambles through random characters before settling on the final string.
• Text Shimmer — Text with shimmer effect that moves across the content.
• Text Shimmer Wave — Text with a wave-like shimmer that sweeps across the glyphs — a loading or AI-thinking indicator.
• Top Down Letters — Letters that drop onto their own baseline, one after another.
• True Focus — Text focus effect with animated borders and blur transitions.
• Typing Text — Type-on animation for text content — characters appear one by one with per-character timing and caret control.
• Variable Proximity — Text effect that responds to mouse proximity with variable font properties.
• Video Text — Letters cut straight out of a looping clip, so the footage becomes the type.
• Wave Text — Characters that ripple through a string in sequence, travelling wave and all.
• Word Rotate — Component that rotates through different words with smooth transitions.

Transitions

• 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.
• Prism Sweep Transition — A prismatic light band that sweeps across a panel and swaps the content behind it.
• SDF Blob Transition — A metaball blob that grows over the panel and swaps the content behind its edge.
• Shader Reveal Transition — Eight reveal shapes — from a noise gate to a barcode shutter — in one compiled shader.
• Transition Panel — Animates between keyed content with enter, center and exit variants.

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.