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 StateKeep 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 StateSkeletons 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 ScreenSearch 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 InputUploads need measurable progress when possible, then clear success or retry feedback. Avoid: Avoid fake percentage progress if the system cannot estimate completion.
Open Progress BarGuide 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 MarkData 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 DrawRevenue
$42.8k
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 BarSmall 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 FeedbackExpressive 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 ExpandOverview
Templates
Integrations
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 HandleDrag the handle
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 RevealProject brief
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 ObjectExpose 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 TimelineErrors 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 ErrorEnter your email to join our newsletter.
Use skeleton for layout context; add shimmer only when the placeholder would otherwise feel static during a longer wait.
Open Skeleton ScreenUse spinner for short or unknown waits; use progress bar when completion is measurable or the wait is long.
Open Spinner / Loading CircleUse toast for non-blocking confirmation; use a success screen when completion changes the user journey.
Open Toast NotificationUse scale for quiet button feedback, ripple for material-style surfaces, and haptic bounce for playful mobile-first actions.
Open Ripple EffectUse fade for simple state changes; use shared element transitions when preserving object continuity matters.
Open Fade TransitionUse 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 SlideSelected mode
Overview
The moving pill shows continuity while the content below updates.
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 StepStep 1 of 3
Start with a workspace.
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 DrawRevenue
$42.8k
Use notification dot pulse for ambient newness, toast for readable confirmation, and badge count animation when the number itself matters.
Open Notification Dot PulseUse click spark for playful reward, ripple for material-style surface feedback, and scale on press for quiet universal tactility.
Open Click Spark FeedbackUse gooey nav for playful route selection, active pill for product controls, and dock proximity scale for compact icon launchers.
Open Gooey Nav IndicatorUse bubble menu for a few compact actions, card nav for destination groups with context, and staggered menu for short link lists.
Open Bubble Menu ExpandUse 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 RevealProject brief
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 BackgroundUse an orb for ambient presence, a timeline for observable agent work, and indeterminate progress for unknown waits without fabricated detail.
Open AI Thinking OrbUse particle networks for subtle system atmosphere, knowledge graphs for real relationships, and orbital systems for high-level feature ecosystems.
Open Particle Network FieldUse scroll stack for short narrative sequences, timeline reveal for dated or milestone order, and stagger list reveal for ordinary unordered content.
Open Scroll Stack CardsDisable the submitted button, show local progress, then confirm with a toast or success view depending on task importance.
Open Button Loading StateShow structure while data loads, hand off to staggered content reveal, and handle the empty result without feeling broken.
Open Skeleton ScreenMake search available, indicate fast querying, then distinguish result reveal from a true no-result state.
Open Expandable Search InputPrefer real progress, fall back to indeterminate motion only when progress is unknown, then show clear completion or retry feedback.
Open Progress BarExplain the current step, highlight the exact control, show sequence progress, and make completion visibly accumulate.
Open Popover Coach StepStep 1 of 3
Start with a workspace.
Reveal the headline metric, draw the trend, compare categories, and then show the ordered milestones behind the change.
Open Number Ticker / Counting AnimationUse 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 LockHover / focus a target
Expose grouped destinations with card nav, use short staggered lists for compact menus, and preserve selected state with an active indicator.
Open Card Nav ExpandOverview
Templates
Integrations
Orient the reader with scroll progress, reveal a short stacked sequence, then use a timeline when the order becomes milestone-based.
Open Scroll Progress BarOpen 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 RevealShow 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 TimelineGive 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 PressAvoid
A spinner that runs for long waits without explaining what is happening.
Open Skeleton ScreenAvoid
A determinate bar that advances without real progress data and then stalls near the end.
Open Indeterminate Progress BarAvoid
A modal that feels theatrical when the user expects immediate task focus.
Open Modal Enter / ExitAvoid
Cards jump, tilt, or shift so much that scanning a grid becomes unstable.
Open Hover Lift EffectAvoid
Large parallax, blur, or looping motion runs for every user regardless of accessibility preferences.
Open Fade TransitionAvoid
Several notification dots, hotspots, or focus rings pulse at the same time and make the interface feel noisy.
Open Notification Dot PulseAvoid
Every chart animates on every refresh, delaying the values users opened the dashboard to inspect.
Open Line Chart DrawRevenue
$42.8k
Avoid
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 BackgroundAvoid
A graph, orbit, or data tunnel implies relationships, flows, or real-time activity that the product does not actually have.
Open Animated Knowledge GraphAvoid
A custom target cursor or proximity dock is applied to ordinary product controls and slows down basic navigation.
Open Target Cursor LockHover / focus a target
Avoid
A bubble menu hides the most important action behind an unlabeled floating button.
Open Bubble Menu ExpandAvoid
Every menu item waits for a long sequence before the user can scan or use navigation.
Open Staggered Menu Open