Choose skeletons when layout context matters more than showing generic activity.

Use sparingly

Use shimmer as an enhancer to skeletons, not as the whole loading strategy.

Use sparingly

Choose a spinner only when you need the smallest possible loading signal.

Use sparingly

Choose a progress bar when the user needs confidence about how much work remains.

Use sparingly

Three animated dots that pulse sequentially, indicating that an AI or person is typing a response. Creates anticipation and confirms the system is processing.

Recommended default

A gentle fade-in-fade-out animation applied to placeholder content, creating a "breathing" effect. Softer and more subtle than shimmer.

Recommended default

Content fades in while simultaneously transitioning from blurred to sharp focus, creating a cinematic reveal effect. More sophisticated than a simple fade.

Context dependent

List items or grid cards appear one after another with a small delay between each, creating a cascading reveal effect. Adds rhythm and polish to content-heavy pages.

Context dependent

Numbers actively counting up from zero to their final value. Makes data updates feel dynamic and draws attention to key metrics.

Recommended default

Elements remain hidden until they enter the browser viewport, then smoothly fade in and slide up into position. Makes scrolling feel like an active discovery process.

Context dependent

A small circular dot that softly pulses outwards like a sonar ping. Gently draws user attention to unread items or new un-clicked features.

Recommended default

Choose button loading for async actions whose feedback belongs exactly where the user acted.

Use sparingly

Choose fade when the best motion is the one users barely notice.

Use sparingly

A quick horizontal shaking motion applied to an element (like an input field) to indicate invalid input or an error, mimicking a head shake.

Recommended default

Choose toast when feedback should be seen but not answered.

Use sparingly

A circular wave that expands from the point of contact when a user clicks or taps an element, providing immediate spatial feedback.

Recommended default

A physical-feeling spring animation that rapidly shrinks an element on press and bounces it back on release, mimicking a tactile physical button.

Context dependent

A simpler, non-spring version of tactile feedback where an element scales down slightly and instantly when pressed.

Recommended default

A visual indicator (like a filling ring or background) that shows the progress of a long-press action before it executes.

Context dependent

A gesture-driven reveal of a loading indicator when a user scrolls past the top edge of a content area, triggering a data refresh.

Advanced

A subtle, bouncing horizontal nudge on a list item indicating that it can be swiped to reveal hidden actions (like delete or archive).

Advanced

A sliding thumb across a pill-shaped track, communicating a change in binary state (on/off) with color transitions.

Recommended default

An expressive animation heavily scaling and expanding a heart or star icon, sometimes accompanied by mini confetti or a splash ring.

Context dependent

A rapid, transient background color change (usually to green or a brand color) on an element that was just copied to the clipboard, providing unmistakable visual confirmation.

Recommended default

Use Drag & Drop Ghost when the user is rearranging real items; use Hover Lift when you only need to show clickability.

Advanced

A card or button smoothly translates upwards by a few pixels and increases its shadow cast, creating the illusion of moving closer to the user on hover.

Recommended default

A view or component enters the screen by sliding linearly from an edge, providing spatial context about where the user is navigating to.

Recommended default

Choose modal motion when the interaction should pause the page without feeling like a new page.

Use sparingly

When opening a dropdown menu or a list, the items appear sequentially from top to bottom, drawing the eye down the list.

Context dependent

An SVG checkmark that progressively draws itself from left to right inside a circle, confirming a successful action.

Context dependent

A tiny popover label that slides exactly 4-8px outwards from its anchor element while fading in. Used to label icon-only buttons.

Recommended default

An element (like an image or card) seamlessly animates from its position in a list view into its final position in a detail view, bridging the context between two states.

Advanced

A panel that slides in from the left or right edge of the screen, pushing content or overlapping it with a dark backdrop.

Recommended default

A highlighting background or underline that smoothly glides from the currently selected tab to the newly clicked tab, reinforcing spatial relationship.

Recommended default

A panel that smoothly grows in height to reveal hidden content, pushing the elements below it smoothly downwards.

Recommended default

Background elements move at a different speed than foreground elements while scrolling, creating an illusion of 3D depth and immersion.

Advanced

A softly animated graphic (like a floating ghost or swaying box) accompanied by friendly text suggesting the next action when a list or dashboard is empty.

Recommended default

A playful loop or glitch effect applied to a 404 number or illustration to reduce the frustration of hitting a dead end.

Context dependent

A glowing, pulsating ring around a specific UI element intended to draw a brand new user's attention to the first action they should take.

Recommended default

A bar or toast that slides down from the top of the interface natively indicating the application has lost internet connection, remaining fixed until connection is restored.

Recommended default

An animation (often a magnifying glass looking back and forth) that plays when a search query returns zero results, softening the frustrating dead end.

Recommended default

A more aggressive, persistent pulsing or shaking error state specifically denoting that a system failure or timeout occurred.

Recommended default

Small red helper text that gracefully slides down from underneath an input field the moment the user tabs away with an invalid entry.

Recommended default

A joyful explosion of colorful particles from the center or edges of the screen to celebrate a major user milestone.

Advanced

The inverse of a checkmark draw; a red X SVG that sharply draws its two crossing lines to confirm a failure or rejection.

Context dependent

When a notification badge value increments, the number scales up and down bouncy, and occasionally the badge itself pulses.

Recommended default

A circular SVG ring that visually fills its stroke perimeter based on a percentage value, moving smoothly as progress updates.

Recommended default

A dramatic transition where, upon completing a major flow, the entire screen or container slides over or fades into a dedicated success view.

Context dependent

A loading bar where the indicator continually bounces back and forth or cycles infinitely, showing that a process is working but the exact completion time is unknown.

Recommended default

Images load as low-res blurs or empty blocks and gently crossfade into their full high-resolution versions instead of popping in jarringly line-by-line.

Recommended default

Static, non-animated geometric shapes representing where text or images will render. Simpler than a skeleton screen, often used on lower-end devices or ultra-fast loads.

Recommended default

A highly customized, vector-based animation (often exported from After Effects via Lottie) that serves as a branded loading state.

Context dependent

Numbers that accurately count down to zero, building anticipation or imposing a limit.

Recommended default

Often an overlapping circle array or a dotted spinner indicating that a media stream has paused to download more data.

Recommended default

Similar to a shimmer loader, but animates a soft gradient wave that sweeps diagonally across multiple skeleton blocks sequentially.

Recommended default

Bar charts that animate from a height of zero up to their final data value upon entering the screen, making the data feel impactful.

Recommended default

When filtering or changing datasets, SVG lines or pie slices seamlessly morph from one shape to the next instead of snapping instantly.

Context dependent

A horizontal bar chart representing timeseries data where the bars continually sort themselves on the Y-axis as their X-values increase/decrease over time.

Context dependent

A background image or layer that moves vertically at a slower rate than the foreground content as the user scrolls, creating a 3D depth effect.

Recommended default

As the user scrolls down a list, the category header sticks to the top of the viewport until pushed out by the next category header.

Recommended default

Large typographic paragraphs where the text color or opacity transitions from faded to solid exactly mapped to the user's scroll position.

Context dependent

A section of the page where vertical scrolling temporarily translates into horizontal scrolling to reveal a gallery of cards or images, before continuing vertically.

Context dependent

The entire screen dims with a dark overlay, except for a highlighted "cutout" over a specific UI element, paired with an explanatory tooltip.

Context dependent

As a user completes onboarding tasks, list items animate a strikethrough, a checkmark draws itself, and the entire item fades into a completed state, often filling a master progress bar.

Recommended default

A glossy card element where a soft, radial gradient spotlight perfectly tracks the user's mouse position over the surface, creating a physical "glare" effect.

Context dependent

A button or card where a vibrant gradient beam continuously travels around its perimeter, similar to a meteor running along a track.

Context dependent

When the mouse gets close to this button, the entire button (and its text) physically pulls towards the cursor, as if magnetized. It snaps back playfully when the mouse leaves.

Context dependent

Text does not simply fade in; instead, it aggressively scrambles through random characters or numbers before locking into the intended legible English phrase.

Context dependent

A deeply blurred, slow-moving set of vibrant gradient blobs (mesh gradient) that simulates the aurora borealis or viscous fluid, often set behind text or empty states.

Context dependent

A side navigation or progress bar where a glowing "beam" of light physically traces a curved SVG path downwards as the user scrolls, matching their vertical progression.

Context dependent

Cards that literally tilt on their X and Y axes in response to mouse movement. Internal elements (like a logo or image) often move at a faster rate to simulate true 3D depth.

Context dependent

A full page transition that begins as a small circle at the user's click coordinate, rapidly expanding outward like a liquid ripple to overtake the screen and reveal the new view.

Advanced

A top-anchored capsule that fluidly morphs into a larger notification card, accommodating new UI controls, and smoothly reverts to a resting pill shape.

Context dependent

A picture or content card that detects the exact edge (top, right, bottom, left) the mouse cursor enters from, and slides an information overlay in from that specific direction. It exits out the same edge the mouse leaves.

Context dependent

A modernized input field where the placeholder text gracefully shrinks, changes color, and floats to the top edge of the input boundary when focused or filled.

Recommended default

A smooth, interpolating bar that physically stretches and continuously shifts color from red (weak) to yellow (fair) to green (strong) as the user types.

Recommended default

Initially just a circular search magnifying glass icon. Upon interaction, it elastically unravels horizontally into a full active text input field.

Context dependent

A seamless vertex-to-vertex transformation between two distinct icons (e.g., Play -> Pause, Menu -> Close), fluidly shifting shapes rather than just a hard cut swap.

Context dependent

A card that physically turns around in 3D space along its Y or X axis to reveal content on its "back" side, like a flashcard or a playing card.

Recommended default

A list item that can be dragged horizontally with high elasticity. Dropping it reveals under-the-fold action buttons (like Delete/Archive) with an elastic rubber-band snap.

Context dependent

Use Active Pill Slide when the selected container itself should move; use Tab Underline Slide when only navigation emphasis should move.

Use sparingly

Use Popover Coach Step when guidance needs text and context; use Spotlight Coach Mark when attention is the main job.

Use sparingly

Use Focus Ring Highlight when the UI itself can explain the next step and only needs attention.

Use sparingly

Use Step Indicator Motion for fixed multi-step flows; use Progress Bar when the process is continuous instead of discrete.

Use sparingly

Use Line Chart Draw when trend shape is the story; use Number Ticker when the final number is the story.

Use sparingly

Use Pie Chart Reveal for distribution; use Chart Bar Growth when category comparison must be more precise.

Advanced

Use Timeline Reveal when sequence and causality matter; use Stagger List Reveal for unordered content.

Use sparingly

Use Notification Dot Pulse for ambient newness; use Toast Notification when the user needs to read what happened.

Use sparingly

Use Loading Ellipsis for inline conversational work; use Spinner for generic short operations.

Use sparingly

Use Scroll Progress Bar for reading depth; use Progress Bar for task completion.

Advanced

Use Click Spark Feedback when the click itself deserves a tiny reward; use Ripple Effect for quieter material feedback.

Use sparingly

Use Target Cursor Lock for experiential hover targeting; use Focus Ring Highlight for normal product guidance.

Use sparingly

Use Pixel Dissolve Transition for stylized reveals; use Fade Transition for standard product navigation.

Use sparingly

Use Logo Loop Marquee for ambient social proof; use a static grid when inspection matters.

Use sparingly

Use Gooey Nav Indicator when nav personality matters; use Active Pill Slide for cleaner product UI.

Use sparingly

Use Dock Proximity Scale for compact icon launchers; use Scale on Press for ordinary button feedback.

Use sparingly

Use Elastic Slider Handle when drag feedback helps control confidence; use a plain input when precision matters more.

Advanced

Use Bubble Menu Expand for compact secondary actions; use Drawer Slide when the menu needs labels and structure.

Use sparingly

Use Card Nav Expand when navigation needs context; use Staggered Menu Open for a simpler menu list.

Use sparingly

Use Folder Open Reveal when the folder metaphor clarifies grouping; use Accordion Expand for ordinary disclosure.

Use sparingly

Use Scroll Stack Cards for short ordered narratives; use Stagger List Reveal for ordinary lists.

Use sparingly

Use Staggered Menu Open for short structured menus; use Drawer Slide for larger navigation surfaces.

Use sparingly

Start with a still product artifact; add shallow rotation only if it reinforces materiality.

Use sparingly

Use depth to clarify grouping, not to hide information.

Use sparingly

Treat orbit as a storytelling overview, then give users static detail below.

Use sparingly

Use the aurora as a restrained background layer, not the main content.

Use sparingly

Use slow breathing motion; do not let the blob cross text or controls.

Use sparingly

Tie node behavior to a product metaphor such as agents, documents, or users.

Use sparingly

Make direction and transformation legible before making it cinematic.

Use sparingly

Animate to reveal relationships, not to keep the graph in perpetual motion.

Use sparingly

Prefer truthful discrete states over decorative “thinking” loops.

Use sparingly

Use it as a reveal of a meaningful line, not a default text animation.

Use sparingly

Animate the message hierarchy, not every character just because it is possible.

Use sparingly

Use the orb for ambient state; use timelines or progress for accountable work.

Use sparingly