Situations

Start here when you know the user moment. Pick the primary motion for that situation, then use alternatives only when the context changes.

Form submission

Keep the user anchored to the action they just took, then confirm the result without forcing a page-level transition. Avoid: Avoid full-screen loading for small form actions unless the whole page is blocked.

Open Button Loading State
Preview

List or feed loading

Skeletons preserve layout context and make the wait feel shorter than an isolated spinner. Avoid: Avoid skeletons when the final layout is unpredictable or the fetch usually completes instantly.

Open Skeleton Screen
Preview

Search flow

Search needs fast input affordance, lightweight loading feedback, and a graceful zero-result state. Avoid: Avoid decorative search animations on search-first pages where the input should always be visible.

Open Expandable Search Input
Preview

File upload

Uploads need measurable progress when possible, then clear success or retry feedback. Avoid: Avoid fake percentage progress if the system cannot estimate completion.

Open Progress Bar
0%
Preview

Onboarding guidance

Guide attention only when the next action is important enough to interrupt the normal interface. Avoid: Avoid highlighting many elements at once or repeating the same tour after acknowledgement.

Open Spotlight / Coach Mark
Cancel
New Feature
Preview

Analytics reveal

Data motion should clarify what changed: trend shape, category comparison, distribution, or headline metric. Avoid: Avoid animating every chart on dense dashboards or delaying access to values users need immediately.

Open Line Chart Draw

Revenue

$42.8k

+18%
Preview

Long-form reading

Reading progress should orient users without competing with the content itself. Avoid: Avoid scroll progress bars on short pages or apps with multiple nested scroll containers.

Open Scroll Progress Bar
Preview

Playful click feedback

Small tactile bursts can make playful actions feel responsive without showing a full notification. Avoid: Avoid spark effects for serious, destructive, or high-frequency actions.

Open Click Spark Feedback
Preview

Expressive navigation

Expressive navigation should still preserve clear selected state and stable targets. Avoid: Avoid blob or dock effects when users need dense, predictable enterprise navigation.

Open Card Nav Expand
Product

Overview

Templates

Integrations

Preview

Range input tuning

A slider can use motion to make value changes feel tactile while keeping the exact value readable. Avoid: Avoid elastic handles when users need high-precision numeric entry.

Open Elastic Slider Handle
Volume42%

Drag the handle

Preview

Grouped content reveal

A reveal motion should clarify the relationship between a compact container and the content inside it. Avoid: Avoid metaphorical reveals when the grouping is not real or when content should be immediately visible.

Open Folder Open Reveal

Project brief

Preview

Creative hero or product showcase

Creative hero motion should make the product, message, or atmosphere more tangible instead of adding a generic visual effect. Avoid: Avoid abstract 3D, particles, or headline effects when users need dense reading, form completion, checkout, or admin work.

Open Floating Product Object
Preview

AI or system activity visualization

Expose truthful observable activity first, then use ambient AI expression only as a supporting state. Avoid: Avoid vague thinking loops when precise progress, errors, privacy, or accountable tool states matter.

Open Tool Call Timeline
Search
Read
Validate
Write
Preview

Error feedback

Errors should point to the exact fix before using broad page-level motion. Avoid: Avoid playful motion for destructive, financial, or security-sensitive failures.

Open Form Validation Error

Subscribe

Enter your email to join our newsletter.

Preview

Comparisons

Use this when two effects look close. The goal is choosing one pattern, not building a sequence.

Skeleton Screen vs Shimmer Loader

Use skeleton for layout context; add shimmer only when the placeholder would otherwise feel static during a longer wait.

Open Skeleton Screen
Selected

Spinner vs Progress Bar

Use spinner for short or unknown waits; use progress bar when completion is measurable or the wait is long.

Open Spinner / Loading Circle
Loading...
Selected

Toast vs Success Screen

Use toast for non-blocking confirmation; use a success screen when completion changes the user journey.

Open Toast Notification
Selected

Ripple vs Scale vs Haptic Bounce

Use scale for quiet button feedback, ripple for material-style surfaces, and haptic bounce for playful mobile-first actions.

Open Ripple Effect
Selected

Fade vs Shared Element Transition

Use fade for simple state changes; use shared element transitions when preserving object continuity matters.

Open Fade Transition
Content for Overview
Selected

Active Pill Slide vs Tab Underline

Use active pill slide for segmented controls and filter chips, tab underline for navigation tabs, and fade for the content change that follows selection.

Open Active Pill Slide

Selected mode

Overview

The moving pill shows continuity while the content below updates.

Selected

Popover Coach Step vs Focus Ring Highlight

Use popover coach step when text guidance is needed, focus ring highlight when the control only needs attention, and spotlight coach mark when the whole surrounding UI should recede.

Open Popover Coach Step
Create project

Step 1 of 3

Start with a workspace.

Selected

Line Chart Draw vs Pie Chart Reveal

Use line chart draw for trends, pie chart reveal for simple distribution, and chart bar growth when category comparison must be more precise.

Open Line Chart Draw

Revenue

$42.8k

+18%
Selected

Notification Dot vs Toast

Use notification dot pulse for ambient newness, toast for readable confirmation, and badge count animation when the number itself matters.

Open Notification Dot Pulse
Inbox
Tasks
Alerts
Selected

Click Spark vs Ripple

Use click spark for playful reward, ripple for material-style surface feedback, and scale on press for quiet universal tactility.

Open Click Spark Feedback
Selected

Gooey Nav vs Active Pill vs Dock

Use gooey nav for playful route selection, active pill for product controls, and dock proximity scale for compact icon launchers.

Open Gooey Nav Indicator
HomeWorkAbout
Selected

Bubble Menu vs Card Nav

Use bubble menu for a few compact actions, card nav for destination groups with context, and staggered menu for short link lists.

Open Bubble Menu Expand
Edit
Share
Pin
Selected

Folder Reveal vs Accordion

Use folder reveal when the storage/grouping metaphor is real, accordion for normal disclosure, and popover when the content is guidance rather than nested material.

Open Folder Open Reveal

Project brief

Selected

Creative Atmosphere vs Product Explanation

Use atmosphere when mood supports the message; use product objects when users need to understand what the product is. Do not let background motion carry critical meaning.

Open Aurora Shader Background
Selected

AI Orb vs Tool Timeline

Use an orb for ambient presence, a timeline for observable agent work, and indeterminate progress for unknown waits without fabricated detail.

Open AI Thinking Orb
Searching docs
Selected

Particle Network vs Knowledge Graph

Use particle networks for subtle system atmosphere, knowledge graphs for real relationships, and orbital systems for high-level feature ecosystems.

Open Particle Network Field
Selected

Scroll Stack vs Timeline

Use scroll stack for short narrative sequences, timeline reveal for dated or milestone order, and stagger list reveal for ordinary unordered content.

Open Scroll Stack Cards
Discover01
Compare02
Choose03
Selected

Motion Recipes

Use this for a workflow with several states. Follow the chain from first user action to final feedback.

Form Submit Feedback Chain

Disable the submitted button, show local progress, then confirm with a toast or success view depending on task importance.

Open Button Loading State
Step

List Loading Chain

Show structure while data loads, hand off to staggered content reveal, and handle the empty result without feeling broken.

Open Skeleton Screen
Step

Search Experience Chain

Make search available, indicate fast querying, then distinguish result reveal from a true no-result state.

Open Expandable Search Input
Step

Upload Chain

Prefer real progress, fall back to indeterminate motion only when progress is unknown, then show clear completion or retry feedback.

Open Progress Bar
0%
Step

Onboarding Chain

Explain the current step, highlight the exact control, show sequence progress, and make completion visibly accumulate.

Open Popover Coach Step
Create project

Step 1 of 3

Start with a workspace.

Step

Analytics Reveal Chain

Reveal the headline metric, draw the trend, compare categories, and then show the ordered milestones behind the change.

Open Number Ticker / Counting Animation

Total Users

0
Step

Expressive Landing Interaction Chain

Use target-aware hover, tactile click reward, a stylized reveal, and ambient social proof only on pages where personality is part of the product.

Open Target Cursor Lock

Hover / focus a target

Step

Compact Navigation Chain

Expose grouped destinations with card nav, use short staggered lists for compact menus, and preserve selected state with an active indicator.

Open Card Nav Expand
Product

Overview

Templates

Integrations

Step

Product Story Scroll Chain

Orient the reader with scroll progress, reveal a short stacked sequence, then use a timeline when the order becomes milestone-based.

Open Scroll Progress Bar
Step

Creative Product Story Chain

Open with one strong message, make the product tangible, reveal feature depth only when it preserves scanning, and use path drawing for meaningful journeys or diagrams.

Open Kinetic Headline Reveal
MakeMotionMatter
Step

AI System Explanation Chain

Show accountable tool states first, explain relationships when they are the product value, reserve flow visuals for real pipelines, and keep AI orbs as ambient status only.

Open Tool Call Timeline
Search
Read
Validate
Write
Step

Interactive Choice Chain

Give the tap a small press response, slide the selected pill to preserve state continuity, then fade the content into the newly selected result.

Open Scale on Press
Step

Anti-patterns

Use this as a pre-flight check. If your current motion matches the problem, switch to one of the safer alternatives.

Avoid

Endless Spinner

A spinner that runs for long waits without explaining what is happening.

Open Skeleton Screen
Better

Avoid

Fake Progress Bar

A determinate bar that advances without real progress data and then stalls near the end.

Open Indeterminate Progress Bar
Better

Avoid

Slow Modal Entrance

A modal that feels theatrical when the user expects immediate task focus.

Open Modal Enter / Exit
Better

Avoid

Aggressive Hover Motion

Cards jump, tilt, or shift so much that scanning a grid becomes unstable.

Open Hover Lift Effect
Better

Avoid

No Reduced Motion Fallback

Large parallax, blur, or looping motion runs for every user regardless of accessibility preferences.

Open Fade Transition
Content for Overview
Better

Avoid

Pulsing Everything

Several notification dots, hotspots, or focus rings pulse at the same time and make the interface feel noisy.

Open Notification Dot Pulse
Inbox
Tasks
Alerts
Better

Avoid

Chart Theater

Every chart animates on every refresh, delaying the values users opened the dashboard to inspect.

Open Line Chart Draw

Revenue

$42.8k

+18%
Better

Avoid

Generic Tech Wallpaper

Particles, shaders, or 3D objects are added because they look futuristic, but they do not explain the product and can hurt readability or performance.

Open Aurora Shader Background
Better

Avoid

Fabricated System Graph

A graph, orbit, or data tunnel implies relationships, flows, or real-time activity that the product does not actually have.

Open Animated Knowledge Graph
CoreDocsToolsUsersAPI
Better

Avoid

Custom Cursor Everywhere

A custom target cursor or proximity dock is applied to ordinary product controls and slows down basic navigation.

Open Target Cursor Lock

Hover / focus a target

Better

Avoid

Hidden Primary Actions

A bubble menu hides the most important action behind an unlabeled floating button.

Open Bubble Menu Expand
Edit
Share
Pin
Better

Avoid

Over-Staggered Menus

Every menu item waits for a long sequence before the user can scan or use navigation.

Open Staggered Menu Open
Menu
Dashboard
Reports
Settings
Help
Better