Skip to content
Agentic UI Kit
Buy

Motion & effects

Motion components declare a profile (subtle, expressive or none), a reduced-motion fallback and a frame budget. Surface effects are restrained by default and hold a still frame with reduced motion.

Motion components

Each card plays its recorded clip. Press Interact to run one live, then switch the personality or press Replay; your system's reduced-motion setting always wins.

Personality
Your system’s reduced-motion setting always wins.

  • Motion Foundation

    Control and configuration panel for motion tokens.

  • Motion Skeleton Shimmer

    Skeleton loading state for financial metric and KPI cards.

  • Motion Voice Waveform

    Voice input visualization for a push-to-talk button in a chat bar with an AI assistant.

  • Motion Command Palette Spring

    Fast global navigation via the ⌘K keyboard shortcut in a SaaS platform.

  • Motion Spinner Set

    Save button that shows "Saving…" without changing width.

  • Motion Streaming Text

    An assistant reply that arrives in irregular chunks.

  • Motion Chart Enter

    Requests per day chart animating in on dashboard load.

  • Motion Counter Ticker

    MRR KPI card that ticks to the new value on refresh.

  • Motion Gradient Mesh

    Hero section background for next-generation AI platforms.

  • Motion Layered Hover

    Template or starter-kit gallery in a product onboarding flow.

  • Motion Live Pulse

    API health indicator with requests-per-minute readout.

  • Motion Magnetic Hover

    Main call-to-action (CTA) button in a SaaS product hero.

  • Motion Modal Enter

    Deployment confirmation modal dialog.

  • Motion Progress Animated

    Deploy rollout percentage advancing during a release.

  • Motion Spotlight Card

    Showcase of key features or services on landing pages and heroes.

  • Motion Stagger Entrance

    Dashboard card stagger entrance on load.

  • Motion Tilt Card

    Gallery of blueprints or templates on a product landing page.

  • Motion Reveal On Scroll

    Staggered entrance of KPI cards when scrolling a dashboard.

  • Motion Scroll Progress

    Top reading progress bar in long articles and technical documentation.

  • Motion Typing Indicator

    Assistant or copilot preparing a reply before the first token.

  • Motion Chart Enter Series

    API requests per day entering on dashboard load, then morphing when the week changes.

  • Motion Item Add Remove

    Support triage queue where tickets are added, resolved in bulk and restored with undo.

  • Motion Page Transition

    Billing workspace switching between overview, invoices, customers and settings.

  • Motion Shared Element

    Project portfolio where a card opens into the project detail with the same cover and title.

  • Motion Counter Ticker Odometer

    Storefront operations wall with orders, revenue and sessions updating every few hundred milliseconds.

  • Motion Dock

    Workspace app switcher (Home, Inbox, Projects, Calendar) with unread badges.

  • Motion Hover Card

    Assignee mention preview with follow and open-profile actions.

  • Motion View Transition API

    Project or product grid whose card cover and title morph into the detail page and back.

  • Motion Checkbox Draw Tristate

    Release readiness checklist with a select-all parent that shows Partial while some checks are pending.

  • Motion Copy Success Masked

    Production API token copy widget with secret masking and instant checkmark feedback in a developer console.

  • Motion Progress Animated Segmented

    ETL or warehouse sync split into extract, transform, validate and load with unequal weights.

  • Motion Toggle Spring Draggable

    A notification settings list where each switch saves optimistically and a server rejection springs the switch back and shows the reason.

  • Motion Button Press

    Deploy-release button with press scale feedback in a publishing toolbar.

  • Motion Checkbox Draw

    Include-migration-notes checkbox with stroke-draw checkmark in release settings.

  • Motion Copy Success

    Copy status-URL button with drawn success tick in a publishing toolbar.

  • Motion Like Burst

    Like button with particle burst and persistent count on a release toolbar.

  • Motion Like Burst Double Tap

    Moodboard or media feed where double-tapping an image likes it and the heart pops under the finger.

  • Motion Parallax Header

    Long report or case-study page whose hero collapses into a bar with the title, review status and current section.

  • Motion Personality Selector

    Select one motion personality and validate a complete viewport plan.

  • Motion Toggle Spring

    Notify-subscribers switch with spring knob travel in a channel settings panel.

  • Motion Accordion

    Setup checklist with per-step status.

  • Motion Achievement Unlock

    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

    Assistant status next to the chat composer while a reply is thinking or streaming.

  • Motion Async Button

    Save settings button that shows Saving…, then Settings saved or Retry save, without changing width.

  • Motion Attention Nudge

    New-feature dot on a navigation item that pulses three times and then stays as a static dot.

  • Motion Audio Visualizer

    Now playing card in a music studio or podcast player.

  • Motion Bar Race

    Marketing channel share of signups quarter by quarter.

  • Motion Card Flip

    Pricing plan card with the price up front and the full feature list on the back.

  • Motion Card Stack

    Moderation queue where each reported post is kept, removed or skipped one at a time.

  • Motion Chart Axis Morph

    Traffic chart with a 7d, 30d and 90d range selector.

  • Motion Chart Live Stream

    DevOps status page with API gateway requests per second sliding over the last 30 seconds.

  • Motion Confetti Success

    Workspace created at the end of onboarding.

  • Motion Cube Transition

    Onboarding carousel where each setup step turns in as the next face of a cube.

  • Motion Cursor Follower

    Agency portfolio where a ring grows over project covers and reads "View case".

  • Motion Depth Scroll

    Landing hero where sky, hills and trees drift apart as the page scrolls.

  • Motion Direction Aware Hover

    Portfolio or case-study grid where the overlay shows the discipline, a summary and a View case study action.

  • Motion Donut Spin In

    Budget breakdown by department switching between plan, actuals and next quarter.

  • Motion Feature Highlight Seq

    Landing page feature section that walks through dashboards, funnels, alerts and reports with a product screen per feature.

  • Motion Filter Grid

    Template or theme gallery filtered by category and sorted by popularity.

  • Motion Fireworks Success

    Success page after a plan upgrade.

  • Motion Flip Reorder

    Prioritize a backlog or a launch plan by dragging tasks.

  • Motion Globe Dots

    Global infrastructure section listing hosting regions and the backbone links between them.

  • Motion Hero To Detail

    Brand media library where an asset thumbnail grows into its detail dialog with metadata, tags and download actions.

  • Motion Hold To Confirm

    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

    Product roadmap timeline on a marketing page.

  • Motion Icon Hover Set

    Sidebar navigation where each section icon plays as the link is hovered or focused.

  • Motion Icon Morph

    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

    Agency case study index where each project title reveals its cover near the pointer.

  • Motion Infinite Sentinel

    Team activity feed that fetches older events as the reader scrolls.

  • Motion Line Draw

    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

    App splash while the first data loads.

  • Motion Marquee

    Service status ticker in the header of an operations dashboard.

  • Motion Number Morph

    Pricing card whose price morphs between monthly and yearly billing and between currencies.

  • Motion Particle Field

    AI platform hero with a constellation of nodes behind the headline and calls to action.

  • Motion Perspective Gallery

    Case-study or portfolio showcase on an agency or product marketing page.

  • Motion Scroll Text Fill

    Manifesto or mission statement block on a product page.

  • Motion Scrollytelling Section

    Product tour on the website where each step of how the product works takes over a sticky product visual.

  • Motion Shake Error

    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

    Main navigation of an operations console that the user collapses to gain width for tables.

  • Motion Slide To Confirm

    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

    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

    Feature list on a pricing page, one feature per card.

  • Motion Tab Indicator

    Switching sections in a project detail header with per-tab counters.

  • Motion Text Annotate

    Pricing copy that circles or highlights one-time payment or no credit card needed.

  • Motion Text Reveal Split

    Hero headline on a product landing page that rises line by line on load.

  • Motion Text Scramble

    Security page heading that decodes when it scrolls into view.

  • Motion Theme Toggle Transition

    App header toggle that reveals the dark theme with a circle growing from the button.

  • Motion Toast Stack

    Global notifications in a SaaS workspace after inviting a teammate, saving settings or exporting data.

  • Motion Top Loading Bar

    Route change indicator in an app shell while the next page loads.

  • Motion Typewriter

    Landing hero headline cycling three product verbs.

  • Motion Value Change Flash

    Trading order book where each size cell flashes when its level changes, at most twice a second.

  • Motion Word Rotate

    Landing hero headline naming the teams a product serves, one at a time.

Surface effects

Backgrounds, borders and text treatments for marketing pages and empty states. Turn each one on or off and tune its tone, speed and intensity; with reduced motion every effect holds a still frame.

Effects

Tone

Speed

Intensity

Pattern

Surfaces & Effects

Light, on your terms.

Every layer here is an installed piece. Switch it off, change its tone or speed; with reduced motion each one holds a still frame.

6 of 6 effects on: fx-blob-morph, fx-light-beams, fx-background-patterns, fx-beam-border, fx-gradient-text, fx-wave-divider · tone violet · slow · low