# Motion: Agentic UI Kit

> 92 motion for React and Next.js, installable from the Agentic UI Kit registry. Motion components, each with a declared profile and a reduced-motion fallback.

Page with live previews: https://agentic-ui-kit.com/components/category/motion

- [Motion Foundation](https://agentic-ui-kit.com/components/motion-foundation.md): Control and configuration panel for motion tokens.
- [Motion Skeleton Shimmer](https://agentic-ui-kit.com/components/motion-skeleton-shimmer.md): Skeleton loading state for financial metric and KPI cards.
- [Motion Voice Waveform](https://agentic-ui-kit.com/components/motion-voice-waveform.md): Voice input visualization for a push-to-talk button in a chat bar with an AI assistant.
- [Motion Command Palette Spring](https://agentic-ui-kit.com/components/motion-command-palette-spring.md): Fast global navigation via the ⌘K keyboard shortcut in a SaaS platform.
- [Motion Spinner Set](https://agentic-ui-kit.com/components/motion-spinner-set.md): Save button that shows "Saving…" without changing width.
- [Motion Streaming Text](https://agentic-ui-kit.com/components/motion-streaming-text.md): An assistant reply that arrives in irregular chunks.
- [Motion Chart Enter](https://agentic-ui-kit.com/components/motion-chart-enter.md): Requests per day chart animating in on dashboard load.
- [Motion Counter Ticker](https://agentic-ui-kit.com/components/motion-counter-ticker.md): MRR KPI card that ticks to the new value on refresh.
- [Motion Gradient Mesh](https://agentic-ui-kit.com/components/motion-gradient-mesh.md): Hero section background for next-generation AI platforms.
- [Motion Layered Hover](https://agentic-ui-kit.com/components/motion-layered-hover.md): Template or starter-kit gallery in a product onboarding flow.
- [Motion Live Pulse](https://agentic-ui-kit.com/components/motion-live-pulse.md): API health indicator with requests-per-minute readout.
- [Motion Magnetic Hover](https://agentic-ui-kit.com/components/motion-magnetic-hover.md): Main call-to-action (CTA) button in a SaaS product hero.
- [Motion Modal Enter](https://agentic-ui-kit.com/components/motion-modal-enter.md): Deployment confirmation modal dialog.
- [Motion Progress Animated](https://agentic-ui-kit.com/components/motion-progress-animated.md): Deploy rollout percentage advancing during a release.
- [Motion Spotlight Card](https://agentic-ui-kit.com/components/motion-spotlight-card.md): Showcase of key features or services on landing pages and heroes.
- [Motion Stagger Entrance](https://agentic-ui-kit.com/components/motion-stagger-entrance.md): Dashboard card stagger entrance on load.
- [Motion Tilt Card](https://agentic-ui-kit.com/components/motion-tilt-card.md): Gallery of blueprints or templates on a product landing page.
- [Motion Reveal On Scroll](https://agentic-ui-kit.com/components/motion-reveal-on-scroll.md): Staggered entrance of KPI cards when scrolling a dashboard.
- [Motion Scroll Progress](https://agentic-ui-kit.com/components/motion-scroll-progress.md): Top reading progress bar in long articles and technical documentation.
- [Motion Typing Indicator](https://agentic-ui-kit.com/components/motion-typing-indicator.md): Assistant or copilot preparing a reply before the first token.
- [Motion Chart Enter Series](https://agentic-ui-kit.com/components/motion-chart-enter-series.md): API requests per day entering on dashboard load, then morphing when the week changes.
- [Motion Item Add Remove](https://agentic-ui-kit.com/components/motion-item-add-remove.md): Support triage queue where tickets are added, resolved in bulk and restored with undo.
- [Motion Page Transition](https://agentic-ui-kit.com/components/motion-page-transition.md): Billing workspace switching between overview, invoices, customers and settings.
- [Motion Shared Element](https://agentic-ui-kit.com/components/motion-shared-element.md): Project portfolio where a card opens into the project detail with the same cover and title.
- [Motion Counter Ticker Odometer](https://agentic-ui-kit.com/components/motion-counter-ticker-odometer.md): Storefront operations wall with orders, revenue and sessions updating every few hundred milliseconds.
- [Motion Dock](https://agentic-ui-kit.com/components/motion-dock.md): Workspace app switcher (Home, Inbox, Projects, Calendar) with unread badges.
- [Motion Hover Card](https://agentic-ui-kit.com/components/motion-hover-card.md): Assignee mention preview with follow and open-profile actions.
- [Motion View Transition API](https://agentic-ui-kit.com/components/motion-view-transition-api.md): Project or product grid whose card cover and title morph into the detail page and back.
- [Motion Checkbox Draw Tristate](https://agentic-ui-kit.com/components/motion-checkbox-draw-tristate.md): Release readiness checklist with a select-all parent that shows Partial while some checks are pending.
- [Motion Copy Success Masked](https://agentic-ui-kit.com/components/motion-copy-success-masked.md): Production API token copy widget with secret masking and instant checkmark feedback in a developer console.
- [Motion Progress Animated Segmented](https://agentic-ui-kit.com/components/motion-progress-animated-segmented.md): ETL or warehouse sync split into extract, transform, validate and load with unequal weights.
- [Motion Toggle Spring Draggable](https://agentic-ui-kit.com/components/motion-toggle-spring-draggable.md): A notification settings list where each switch saves optimistically and a server rejection springs the switch back and shows the reason.
- [Motion Button Press](https://agentic-ui-kit.com/components/motion-button-press.md): Deploy-release button with press scale feedback in a publishing toolbar.
- [Motion Checkbox Draw](https://agentic-ui-kit.com/components/motion-checkbox-draw.md): Include-migration-notes checkbox with stroke-draw checkmark in release settings.
- [Motion Copy Success](https://agentic-ui-kit.com/components/motion-copy-success.md): Copy status-URL button with drawn success tick in a publishing toolbar.
- [Motion Like Burst](https://agentic-ui-kit.com/components/motion-like-burst.md): Like button with particle burst and persistent count on a release toolbar.
- [Motion Like Burst Double Tap](https://agentic-ui-kit.com/components/motion-like-burst-double-tap.md): Moodboard or media feed where double-tapping an image likes it and the heart pops under the finger.
- [Motion Parallax Header](https://agentic-ui-kit.com/components/motion-parallax-header.md): Long report or case-study page whose hero collapses into a bar with the title, review status and current section.
- [Motion Personality Selector](https://agentic-ui-kit.com/components/motion-personality-selector.md): Select one motion personality and validate a complete viewport plan.
- [Motion Toggle Spring](https://agentic-ui-kit.com/components/motion-toggle-spring.md): Notify-subscribers switch with spring knob travel in a channel settings panel.
- [Motion Accordion](https://agentic-ui-kit.com/components/motion-accordion.md): Setup checklist with per-step status.
- [Motion Achievement Unlock](https://agentic-ui-kit.com/components/motion-achievement-unlock.md): Learning or fitness app that reveals a badge in a corner toast when the first lesson of the day is done.
- [Motion AI Thinking Orb](https://agentic-ui-kit.com/components/motion-ai-thinking-orb.md): Assistant status next to the chat composer while a reply is thinking or streaming.
- [Motion Async Button](https://agentic-ui-kit.com/components/motion-async-button.md): Save settings button that shows Saving…, then Settings saved or Retry save, without changing width.
- [Motion Attention Nudge](https://agentic-ui-kit.com/components/motion-attention-nudge.md): New-feature dot on a navigation item that pulses three times and then stays as a static dot.
- [Motion Audio Visualizer](https://agentic-ui-kit.com/components/motion-audio-visualizer.md): Now playing card in a music studio or podcast player.
- [Motion Bar Race](https://agentic-ui-kit.com/components/motion-bar-race.md): Marketing channel share of signups quarter by quarter.
- [Motion Card Flip](https://agentic-ui-kit.com/components/motion-card-flip.md): Pricing plan card with the price up front and the full feature list on the back.
- [Motion Card Stack](https://agentic-ui-kit.com/components/motion-card-stack.md): Moderation queue where each reported post is kept, removed or skipped one at a time.
- [Motion Chart Axis Morph](https://agentic-ui-kit.com/components/motion-chart-axis-morph.md): Traffic chart with a 7d, 30d and 90d range selector.
- [Motion Chart Live Stream](https://agentic-ui-kit.com/components/motion-chart-live-stream.md): DevOps status page with API gateway requests per second sliding over the last 30 seconds.
- [Motion Confetti Success](https://agentic-ui-kit.com/components/motion-confetti-success.md): Workspace created at the end of onboarding.
- [Motion Cube Transition](https://agentic-ui-kit.com/components/motion-cube-transition.md): Onboarding carousel where each setup step turns in as the next face of a cube.
- [Motion Cursor Follower](https://agentic-ui-kit.com/components/motion-cursor-follower.md): Agency portfolio where a ring grows over project covers and reads "View case".
- [Motion Depth Scroll](https://agentic-ui-kit.com/components/motion-depth-scroll.md): Landing hero where sky, hills and trees drift apart as the page scrolls.
- [Motion Direction Aware Hover](https://agentic-ui-kit.com/components/motion-direction-aware-hover.md): Portfolio or case-study grid where the overlay shows the discipline, a summary and a View case study action.
- [Motion Donut Spin In](https://agentic-ui-kit.com/components/motion-donut-spin-in.md): Budget breakdown by department switching between plan, actuals and next quarter.
- [Motion Feature Highlight Seq](https://agentic-ui-kit.com/components/motion-feature-highlight-seq.md): Landing page feature section that walks through dashboards, funnels, alerts and reports with a product screen per feature.
- [Motion Filter Grid](https://agentic-ui-kit.com/components/motion-filter-grid.md): Template or theme gallery filtered by category and sorted by popularity.
- [Motion Fireworks Success](https://agentic-ui-kit.com/components/motion-fireworks-success.md): Success page after a plan upgrade.
- [Motion Flip Reorder](https://agentic-ui-kit.com/components/motion-flip-reorder.md): Prioritize a backlog or a launch plan by dragging tasks.
- [Motion Globe Dots](https://agentic-ui-kit.com/components/motion-globe-dots.md): Global infrastructure section listing hosting regions and the backbone links between them.
- [Motion Hero To Detail](https://agentic-ui-kit.com/components/motion-hero-to-detail.md): Brand media library where an asset thumbnail grows into its detail dialog with metadata, tags and download actions.
- [Motion Hold To Confirm](https://agentic-ui-kit.com/components/motion-hold-to-confirm.md): Delete workspace button in a settings danger zone that runs only after a 1.2 second hold, with Deletion cancelled on an early release.
- [Motion Horizontal Scroll Section](https://agentic-ui-kit.com/components/motion-horizontal-scroll-section.md): Product roadmap timeline on a marketing page.
- [Motion Icon Hover Set](https://agentic-ui-kit.com/components/motion-icon-hover-set.md): Sidebar navigation where each section icon plays as the link is hovered or focused.
- [Motion Icon Morph](https://agentic-ui-kit.com/components/motion-icon-morph.md): Header menu button whose three bars cross into a close mark while the navigation panel opens, named Open menu or Close menu.
- [Motion Image Reveal Hover](https://agentic-ui-kit.com/components/motion-image-reveal-hover.md): Agency case study index where each project title reveals its cover near the pointer.
- [Motion Infinite Sentinel](https://agentic-ui-kit.com/components/motion-infinite-sentinel.md): Team activity feed that fetches older events as the reader scrolls.
- [Motion Line Draw](https://agentic-ui-kit.com/components/motion-line-draw.md): MRR KPI detail page whose area draws in on view and morphs between the last 12 months and the previous 12 months.
- [Motion Logo Reveal](https://agentic-ui-kit.com/components/motion-logo-reveal.md): App splash while the first data loads.
- [Motion Marquee](https://agentic-ui-kit.com/components/motion-marquee.md): Service status ticker in the header of an operations dashboard.
- [Motion Number Morph](https://agentic-ui-kit.com/components/motion-number-morph.md): Pricing card whose price morphs between monthly and yearly billing and between currencies.
- [Motion Particle Field](https://agentic-ui-kit.com/components/motion-particle-field.md): AI platform hero with a constellation of nodes behind the headline and calls to action.
- [Motion Perspective Gallery](https://agentic-ui-kit.com/components/motion-perspective-gallery.md): Case-study or portfolio showcase on an agency or product marketing page.
- [Motion Scroll Text Fill](https://agentic-ui-kit.com/components/motion-scroll-text-fill.md): Manifesto or mission statement block on a product page.
- [Motion Scrollytelling Section](https://agentic-ui-kit.com/components/motion-scrollytelling-section.md): Product tour on the website where each step of how the product works takes over a sticky product visual.
- [Motion Shake Error](https://agentic-ui-kit.com/components/motion-shake-error.md): Password field that shakes once after a wrong-password sign-in, with an error border, an alert icon and an announced message.
- [Motion Sidebar Collapse](https://agentic-ui-kit.com/components/motion-sidebar-collapse.md): Main navigation of an operations console that the user collapses to gain width for tables.
- [Motion Slide To Confirm](https://agentic-ui-kit.com/components/motion-slide-to-confirm.md): Payout release card where the treasury operator slides the thumb to the end to release a 48-recipient batch, and a shorter drag springs back with Not released announced.
- [Motion Step Loader](https://agentic-ui-kit.com/components/motion-step-loader.md): AI workflow run that walks through Analyzing, Generating and Validating, with durations per step and a failed validation that can be retried.
- [Motion Sticky Stack](https://agentic-ui-kit.com/components/motion-sticky-stack.md): Feature list on a pricing page, one feature per card.
- [Motion Tab Indicator](https://agentic-ui-kit.com/components/motion-tab-indicator.md): Switching sections in a project detail header with per-tab counters.
- [Motion Text Annotate](https://agentic-ui-kit.com/components/motion-text-annotate.md): Pricing copy that circles or highlights one-time payment or no credit card needed.
- [Motion Text Reveal Split](https://agentic-ui-kit.com/components/motion-text-reveal-split.md): Hero headline on a product landing page that rises line by line on load.
- [Motion Text Scramble](https://agentic-ui-kit.com/components/motion-text-scramble.md): Security page heading that decodes when it scrolls into view.
- [Motion Theme Toggle Transition](https://agentic-ui-kit.com/components/motion-theme-toggle-transition.md): App header toggle that reveals the dark theme with a circle growing from the button.
- [Motion Toast Stack](https://agentic-ui-kit.com/components/motion-toast-stack.md): Global notifications in a SaaS workspace after inviting a teammate, saving settings or exporting data.
- [Motion Top Loading Bar](https://agentic-ui-kit.com/components/motion-top-loading-bar.md): Route change indicator in an app shell while the next page loads.
- [Motion Typewriter](https://agentic-ui-kit.com/components/motion-typewriter.md): Landing hero headline cycling three product verbs.
- [Motion Value Change Flash](https://agentic-ui-kit.com/components/motion-value-change-flash.md): Trading order book where each size cell flashes when its level changes, at most twice a second.
- [Motion Word Rotate](https://agentic-ui-kit.com/components/motion-word-rotate.md): Landing hero headline naming the teams a product serves, one at a time.