Web motions, shown live. Prompts, ready to paste.

The element starts scaled down and offset, then slides in and grows to full size.

Add a "Back In" entrance animation (also called back in up or back in down) to [where].
The element should arrive from beyond an edge while shrunk and slightly faded, then grow to full size once it reaches its place: a deliberate two-step move rather than a quick pop.
Play it once, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element shrinks and slides off toward an edge while fading out.

Add a "Back Out" exit animation to [where].
The element should first shrink back slightly in place, then slide off toward an edge while fading out: a deliberate two-step exit, not a single quick fade.
Remove the element only after the animation ends so the layout doesn't jump mid-motion, and remove it instantly when the user prefers reduced motion (prefers-reduced-motion).

The element starts heavily blurred and sharpens into focus, often while sliding or fading in.

Add a "Blur In" entrance animation (also called text focus in, focus in or blur text reveal) to [where].
The content should start heavily blurred and transparent, then sharpen into focus in place: soft and fairly slow, with no movement.
Play it once, and show the text sharp right away when the user prefers reduced motion (prefers-reduced-motion).

The element blurs progressively while fading or sliding away.

Add a "Blur Out" exit animation (also called text blur out or smoky text dissipate) to [where].
The content should grow more and more blurred while fading away in place: soft and fairly slow, as if it dissolves.
Hide or remove the element only after the blur finishes, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

The element enters with an overshoot-and-settle bounce, either scaling up or dropping in from an edge.

Add a "Bounce In" entrance animation (also called bounce in down or bounce in up) to [where].
The element should grow from small, overshoot its full size and wobble a few times before settling: quick and springy.
Play it once so it doesn't keep pulling attention, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element bounces slightly and then shrinks or flies off an edge.

Add a "Bounce Out" exit animation to [where].
The element should dip slightly, swell a little past its size, then shrink away while fading out: short and springy.
Remove it from the layout only after the animation ends, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

A clip-path or mask grows from an edge or point so the image or text is progressively uncovered.

Add a "Clip Reveal" entrance effect (also called mask reveal, wipe reveal or image reveal) to [where].
A clipping edge should sweep across from left to right so the content is uncovered progressively while it stays still: smooth, starting and ending softly.
Reserve the element's space from the start so nothing shifts, and show it fully uncovered when the user prefers reduced motion (prefers-reduced-motion).

The element goes from fully transparent to fully opaque in place, or the reverse when leaving.

Add a "Fade In / Fade Out" animation (also called fade) to [where].
The element should go from fully transparent to fully visible in place when it appears, and fade back out the same way when it leaves: gentle, with no movement or scaling.
Once it has faded out, make sure it can no longer be clicked or reached with the keyboard, and switch instantly when the user prefers reduced motion (prefers-reduced-motion).

The element fades in while drifting a short distance from one side into its final position.

Add a "Fade In Directional" entrance animation (also called fade in left, fade in right or fade in down) to [where].
The element should fade in while drifting a short distance from one side into its final position: quick and smooth, easing out as it lands, without bounce.
Play it once, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element fades away while drifting off in one direction.

Add a "Fade Out Directional" exit animation (also called fade out up or fade out down) to [where].
The element should fade away while drifting a short distance in one direction: quick, speeding up as it leaves.
Remove it from the layout only after the fade ends so neighbouring content doesn't jump early, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

The element rises a short distance while fading in, as if settling into place.

Add a "Fade Up" entrance animation (also called fade-in-up or reveal on scroll) to [where].
Elements should rise slightly while fading in the first time they scroll into view: subtle and quick, not bouncy.
Animate once, and skip the motion when the user prefers reduced motion (prefers-reduced-motion).

The element blinks on with rapid opacity flashes like a faulty neon sign before staying visible.

Add a "Flicker In" entrance animation to [where].
The element should blink on and off a few times at irregular intervals, like a faulty neon sign, before staying lit: sharp flashes with no movement.
Play it once, keep the flashes few and slow enough to be safe for people sensitive to flashing light, and show it steadily lit when the user prefers reduced motion (prefers-reduced-motion).

The element makes a full turn around the Y axis while moving slightly toward the viewer and back.

Add a "Flip" animation to [where].
The element should make one full turn around its vertical axis while coming slightly toward the viewer, then settle back with a tiny dip in size: lively but brief.
Give it perspective so the turn reads as depth, play it once rather than looping, and skip the turn when the user prefers reduced motion (prefers-reduced-motion).

The element rotates in 3D around its horizontal or vertical axis from edge-on to facing the viewer.

Add a "Flip In" entrance animation (also called flip in X or flip in Y) to [where].
The element should start edge-on and rotate around its horizontal axis to face the viewer, swinging slightly past and back before it settles: quick, with a small wobble.
Give it perspective so the rotation reads as depth, and show it facing forward without motion when the user prefers reduced motion (prefers-reduced-motion).

The element rotates in 3D until it is edge-on and invisible.

Add a "Flip Out" exit animation (also called flip out X or flip out Y) to [where].
The element should tilt back slightly, then rotate around its vertical axis until it is edge-on and gone: quick and crisp.
Give it perspective so the turn reads as depth, remove the element only after the turn finishes, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

The element swings on a top-left hinge, dangles, and then drops off the screen.

Add a "Hinge" exit animation to [where].
The element should swing down from its top-left corner as if a screw came loose, dangle back and forth, then drop off the screen while fading: slow, comic and deliberate.
Let it fall over other content without pushing the layout or adding scrollbars, remove it once it has dropped, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

The element pops up from a small rotated state, overshoots, and settles like a jack-in-the-box toy.

Add a "Jack In The Box" entrance animation to [where].
The element should pop up from a tiny, tilted state anchored at its bottom edge, rock from side to side past upright, and settle: springy and playful.
Play it once only, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element shoots in from the side with a skew that straightens as it lands.

Add a "Light Speed In" entrance animation (also called lightspeed in) to [where].
The element should shoot in fast from the side, slanted as if moving at speed, then overcorrect the slant once and straighten as it lands: fast and dramatic, slowing at the end.
Keep it from causing a horizontal scrollbar while it is still off-screen, and show it in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element skews and speeds off to the side while fading.

Add a "Light Speed Out" exit animation (also called lightspeed out) to [where].
The element should slant and speed off to the side while fading out: fast, accelerating as it leaves.
Keep it from causing a horizontal scrollbar as it passes the edge, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

The element scales from a large, blurred, transparent state down into focus, like a puff of smoke, or the reverse when leaving.

Add a "Puff In / Puff Out" animation (also called puff) to [where].
When it appears, the element should shrink from a large, blurred, transparent state into sharp focus like a settling puff of smoke; when it leaves, it should swell back into a blur and vanish: soft and fairly quick.
Keep the enlarged state from pushing the layout or causing scrollbars, and switch instantly when the user prefers reduced motion (prefers-reduced-motion).

The element rolls in from the left like a wheel while fading in.

Add a "Roll In" entrance animation to [where].
The element should roll in from the left like a wheel, turning as it travels, while fading in: smooth, slowing down as it lands.
Play it once, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element rolls off to the right while fading out.

Add a "Roll Out" exit animation to [where].
The element should roll off to the right like a wheel, turning as it travels, while fading out: smooth, speeding up as it leaves.
Remove it from the layout only after it has rolled away, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

The element spins in around a corner or its center while fading in.

Add a "Rotate In" entrance animation (also called rotate in down left) to [where].
The element should swing into place around its bottom-left corner from a tilted angle while fading in: smooth and unhurried, easing out as it settles.
Play it once, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element spins around a pivot while fading away.

Add a "Rotate Out" exit animation to [where].
The element should spin around its center, a little over half a turn, while fading away: smooth, speeding up as it goes.
Remove it only after the spin ends, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

The element glides in from off its container edge to its resting position without fading.

Add a "Slide In" entrance animation (also called slide in left, slide in right, slide in up or slide in down) to [where].
The element should glide in from beyond its container edge to its resting place, fully opaque the whole time: quick, decelerating smoothly with no bounce.
Clip it at the container edge so it doesn't overlap neighbours or cause scrollbars while it is outside, and show it in place when the user prefers reduced motion (prefers-reduced-motion).

The element glides out past a container edge and disappears.

Add a "Slide Out" exit animation (also called slide out up or slide out down) to [where].
The element should glide out past its container edge and disappear, staying fully opaque: quick, accelerating as it leaves.
Clip it at the container edge, hide it from keyboard and screen readers once it is out of view, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

Items in a group animate one after another with a small delay, forming a wave instead of appearing all at once.

Add a "Stagger" animation (also called staggered animation or cascade) to [where].
Items should fade up one after another with a short, even delay, so the group appears as a quick wave instead of all at once.
Keep the whole sequence brief even for long lists, animate once when it scrolls into view, and skip the motion when the user prefers reduced motion (prefers-reduced-motion).

The element spins and scales up from a point while fading in.

Add a "Swirl In" entrance animation (also called swirl in forward) to [where].
The element should spin well past a full turn while growing from a single point to full size and fading in: fast at first, slowing as it settles.
Play it once on a single element rather than a whole group, and show it in place without motion when the user prefers reduced motion (prefers-reduced-motion).

Letters start widely spaced and faded, then tighten into normal spacing while appearing.

Add a "Tracking In" text animation (also called text tracking in or letter-spacing in) to [where].
The letters should start widely spaced and faint, then draw together to normal spacing while becoming fully visible: smooth, slowing down at the end.
Keep the text centered and on one line while the spacing changes so the surrounding layout doesn't shift, and show it at normal spacing when the user prefers reduced motion (prefers-reduced-motion).

The element grows from a small, transparent state to full size while fading in.

Add a "Zoom In" entrance animation (also called scale in) to [where].
The element should grow from small and transparent to full size while fading in: quick and smooth, with no overshoot.
Scale it from its center without affecting the surrounding layout, and show it in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element shrinks and fades until it vanishes.

Add a "Zoom Out" exit animation (also called scale out) to [where].
The element should shrink toward its center while fading until it vanishes: quick, speeding up as it goes.
Remove it from the layout and from keyboard focus only after it has vanished, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

The element hops up and down with decelerating bounces.

Add a "Bounce" attention effect to [where].
The element should hop up and drop back down in a few quick bounces that get smaller each time, with a slight squash as it lands.
Play it once when triggered rather than looping, and skip it for users who prefer reduced motion.

The element blinks by quickly toggling its opacity.

Add a "Flash" attention effect (also called blink) to [where].
The element should blink by quickly fading out and back in twice, then stay fully visible.
Play it once rather than as an endless blink, and skip it for users who prefer reduced motion, since fast blinking can be uncomfortable.

The element's opacity flickers irregularly like a failing light.

Add a "Flicker" effect (also called flickering) to [where].
The element should stay steady most of the time and dim in short, uneven stutters like a failing neon light.
Keep the timing irregular rather than evenly spaced, avoid rapid full-strength flashing, and stop it for users who prefer reduced motion.

The element wobbles side to side with slight rotation like a head shaking no.

Add a "Head Shake" attention effect (also called headshake or no shake) to [where].
The element should turn quickly side to side with a slight twist, like a head shaking no, each turn smaller than the last before it settles.
Play it once each time it is triggered, such as on a rejected action, and keep the surrounding layout from moving.

The element scales in a double-beat rhythm like a beating heart.

Add a "Heartbeat" effect (also called heart beat) to [where].
The element should swell and relax in a quick double beat, then rest briefly before the next beat, like a beating heart.
Loop it seamlessly with the rest kept between beats, and stop it for users who prefer reduced motion.

The element skews back and forth with decaying amplitude like a wobbling jelly.

Add a "Jello" attention effect (also called jelly) to [where].
The element should skew back and forth like a wobbling jelly, strong at first and quickly settling to rest.
Play it once when triggered, and keep the element's footprint so nearby content does not shift.

A copy of the element scales up and fades out repeatedly like a radar ripple.

Add a "Ping" effect (also called a radar ping or pulse ring) to [where].
A copy of the element should grow outward and fade away, again and again at a steady pace, while the element itself stays still.
Draw the ring as a separate layer so it never changes the layout, and stop the loop for users who prefer reduced motion.

The element gently scales or fades in and out repeatedly.

Add a "Pulse" effect (also called pulsing) to [where].
The element should gently swell and ease back in a slow, steady rhythm: subtle, with no bounce.
Loop it seamlessly without shifting the surrounding layout, and stop it for users who prefer reduced motion.

The element stretches horizontally and squashes vertically in elastic steps before returning to normal.

Add a "Rubber Band" attention effect (also called rubberband) to [where].
The element should stretch wide and squash short, then spring back through a few smaller elastic steps before settling at its normal size.
Play it once when triggered, and keep the surrounding layout from shifting while it stretches.

The element jitters quickly back and forth along one axis.

Add a "Shake" effect (also called an error shake or invalid input shake) to [where].
The element should jitter quickly left and right a few times and stop exactly where it started: fast and firm.
Play it once each time the error happens rather than looping, and pair it with a visible error message so the meaning does not rely on motion alone.

The element rotates continuously at constant speed.

Add a "Spin" effect (also called a spinner or rotate loop) to [where].
The element should rotate continuously at a constant, even speed, with no easing between turns.
Make the loop seamless, give the spinner an accessible loading label, and slow or stop it for users who prefer reduced motion.

The element swings back and forth from its top edge like a pendulum with decaying amplitude.

Add a "Swing" attention effect to [where].
The element should swing back and forth like a hanging sign, starting with a wide swing that quickly dies down.
Pivot it from its top edge rather than its center, and play it once when triggered.

The element scales up, wiggles with rotation, and returns to size in a celebratory flourish.

Add a "Tada" attention effect to [where].
The element should dip slightly smaller, then grow and wiggle side to side with a quick tilt before returning to its normal size, like a small celebration.
Play it once, for example right after a success, and skip it for users who prefer reduced motion.

The element trembles rapidly in tiny multi-directional jolts, like a phone vibrating.

Add a "Vibrate" attention effect (also called buzz or vibration) to [where].
The element should tremble in tiny, rapid jolts in different directions for a brief moment, like a phone buzzing, then settle.
Keep the movement very small so the content stays readable, and play it once per alert instead of looping.

The element rocks side to side with tilt like a wobbly object.

Add a "Wobble" attention effect to [where].
The element should rock side to side with a tilt, starting with a big sway that shrinks with each swing until it settles.
Play it once when triggered, and keep neighbouring content from shifting.

A header hides when scrolling down and reappears when scrolling up.

Add a "Hide on Scroll Header" (also called headroom or an auto-hide navbar) to [where].
The header should slide up out of view when the reader scrolls down and slide back in on any scroll up: quick and smooth, reacting to direction rather than distance.
Always show it at the very top of the page, ignore tiny scroll jitters, and keep it visible while something inside it has keyboard focus.

Vertical scrolling moves a pinned row of panels sideways.

Add a "Horizontal Scroll Section" (also called horizontal scrolling or a scroll-jacked horizontal gallery) to [where].
When the section reaches the top it should stay pinned while scrolling down moves its row of panels sideways, then release once the last panel is in view.
Tie the sideways movement directly to the scroll position so scrolling back reverses it, and fall back to a normal swipeable row on small screens or for users who prefer reduced motion.

Layers move at different speeds relative to scroll to create a sense of depth.

Add a "Parallax" scroll effect (also called parallax scrolling or parallax layers) to [where].
Background layers should move more slowly than the content as the page scrolls, the farthest layer moving least, for a subtle sense of depth.
Keep it tied to the scroll position without lag, keep text on the normal-speed layer, and turn the effect off for users who prefer reduced motion.

An element stays locked in place during a scroll range while other content or animation progresses.

Add a "Pinning" scroll effect (also called a pinned section or sticky section) to [where].
One panel should stay locked in place while the content beside it scrolls past, switching to match the step being read, and it should let go when the section ends.
Prefer native sticky positioning over hijacking the scroll, and make sure every step still reads well without the pinned panel on small screens.

A bar or ring fills as the user scrolls through the page or article.

Add a "Scroll Progress Indicator" (also called a reading progress bar) to [where].
A thin bar along the top should fill from left to right in step with how far the reader has scrolled, reaching full width at the end.
Tie it directly to the scroll position with no easing lag, and keep it from covering the content.

Scrolling settles onto defined snap points such as slides or sections.

Add "Scroll Snap" (also called scroll snapping or snap scrolling) to [where].
When scrolling stops, the view should settle neatly onto the nearest section so each one lines up with the edge instead of stopping halfway.
Use the browser's native snapping so wheel, touch and keyboard scrolling all keep working, and make sure content taller than the view can still be read in full.

Animation progress is tied directly to scroll position, so scrolling forward or back plays or rewinds it.

Add a "Scroll-Linked Animation" (also called a scroll-driven animation or scroll scrub) to [where].
The animation should move exactly with the scroll position, so scrolling down plays it forward and scrolling up rewinds it on the spot, with no time-based easing of its own.
Map the whole animation to a clear scroll range, and show a sensible static state for users who prefer reduced motion.

An animation plays once when an element enters or leaves the viewport.

Add a "Scroll-Triggered Animation" (also called reveal on scroll or animate on scroll) to [where].
Each item should fade and slide up into place once as it enters the view, playing at its own quick, smooth pace rather than following the scroll position.
Keep the content visible if scripts fail to load, and show items straight away for users who prefer reduced motion.

Scrolling and anchor jumps glide with easing instead of moving abruptly.

Add "Smooth Scroll" (also called smooth scrolling or inertia scroll) to [where].
Scrolling and jumps to anchors should glide and ease to a stop instead of moving in abrupt steps, with a light, responsive feel rather than a heavy lag.
Keep native behaviour such as keyboard scrolling, the scrollbar and find-in-page working, and turn the smoothing off for users who prefer reduced motion.

Cards stick at the top as the user scrolls and pile on top of each other, often shrinking the earlier ones.

Add "Stacking Cards" (also called sticky stacking cards or a card stack scroll) to [where].
As the reader scrolls, each card should stick near the top and the next card should slide up over it, while the cards underneath shrink slightly so a neat pile builds up.
Leave a thin edge of each earlier card showing, and give the last card enough room to reach its place before the section ends.

A sticky header reduces in height or size after the user scrolls down.

Add a "Sticky Header Shrink" (also called a shrinking header or shrink on scroll) to [where].
The header should stay at the top and, once the reader scrolls down a little, smoothly shrink into a slimmer bar with a smaller logo, growing back when they return to the top.
Keep the content below from jumping while the header changes size.

Large text lines slide horizontally as the page is scrolled vertically.

Add a "Text Marquee on Scroll" (also called a scroll text marquee or scroll velocity text) to [where].
Large lines of text should slide sideways as the page scrolls down, with alternate rows moving in opposite directions, and slide back when scrolling up.
Tie the movement to the scroll position, keep the long lines from causing a horizontal scrollbar, and keep them still for users who prefer reduced motion.

An element or scene scales up or down as the user scrolls.

Add a "Zoom on Scroll" effect (also called scroll zoom or scale on scroll) to [where].
While the section is held in view, the element should grow smoothly from a small card until it fills the whole view, in step with the scroll, and shrink back when scrolling up.
Scale it without pushing the layout around it, and show it at its final size without the zoom for users who prefer reduced motion.

Text filled with a gradient whose colours continuously shift or flow.

Add an "Animated Gradient Text" effect (also called aurora text or a rainbow text sweep) to [where].
The letters should be filled with a gradient whose colors flow slowly and smoothly across the text in an endless, seamless loop.
Keep the text readable against its background at every moment, and hold the colors still for users who prefer reduced motion.

Text jitters with sliced offsets and red/cyan colour splits like a broken signal.

Add a "Glitch Text" hover effect (also called text glitch or RGB split glitch) to [where].
While the pointer is over the text, it should jitter in quick, snappy bursts: thin horizontal slices jump sideways and two colored copies split apart like a broken signal, then settle back when the pointer leaves.
Keep the real text in the document only once so screen readers don't read the copies, and show the same effect on keyboard focus.

Text shows shifting rainbow foil reflections that move with pointer or time.

Add a "Holographic Text" hover effect (also called holographic foil text) to [where].
While the pointer is over the text, a band of foil-like colors should glide slowly and smoothly back and forth across the letters, and the text should return to its plain look when the pointer leaves.
Keep the letters readable at every point of the shimmer, and show the same effect on keyboard focus.

Text scales, moves, or rotates as a moving graphic element rather than static copy.

Add "Kinetic Typography" (also called kinetic text) to [where].
Rows of large repeated text should slide sideways in alternating directions at a slow, steady pace, turning the words into a moving graphic.
Make each row loop seamlessly without a visible jump, let screen readers read the text only once, and stop the motion for users who prefer reduced motion.

Letters fly apart on hover and return, or burst outward on entry.

Add a "Letter Scatter" hover effect (also called scatter gather letters or an explosive letter burst) to [where].
When the pointer moves over the text, each letter should fly a short way out in its own direction with a little spin, then smoothly gather back into the word when the pointer leaves.
Keep the word's space in the layout fixed while the letters move, keep it read as one word by screen readers, and show the same effect on keyboard focus.

A striped or offset shadow behind the letters animates in a direction.

Add a "Line Shadow Text" effect (also called a text shadow animation or dancing shadow) to [where].
Behind the letters, an offset shadow made of thin diagonal stripes should slide slowly and continuously, while the letters themselves stay still and crisp.
Make the stripe movement loop seamlessly, and keep the shadow still for users who prefer reduced motion.

Letters fill with a rising, waving liquid.

Add a "Liquid Fill Text" effect (also called water fill text) to [where].
The outlined letters should fill with liquid whose wavy surface rolls sideways while the level slowly rises and falls, in a soft, continuous loop.
Keep the word available as real text for screen readers, and hold the liquid at a still level for users who prefer reduced motion.

Text slides up from behind a clipping line so it looks like it emerges from nowhere.

Add a "Mask Reveal" text entrance (also called line mask reveal or text masking) to [where].
Each line should slide up from behind an invisible edge so it seems to emerge from nowhere, one line after another, quick and smooth without bounce.
Play it once when the text scrolls into view, and show the text right away without motion for users who prefer reduced motion.

Green characters fall in columns like the Matrix code rain.

Add a "Matrix Text" effect (also called digital rain text) to [where].
Columns of characters should fall steadily at slightly different speeds, each with a bright leading character and a tail that fades out behind it.
Treat it as decoration hidden from screen readers, keep it lightweight, and stop it for users who prefer reduced motion.

Letters drip and stretch downward as if melting.

Add a "Melting Text" effect to [where].
The letters should slowly sag downward while drips stretch out below them, as if they are melting, and come to rest in a still, melted look.
Play it once when the text comes into view, keep the word readable at the end, and skip the motion for users who prefer reduced motion.

One word blurs and blends into the next in the same spot.

Add a "Morphing Text" effect (also called text morph) to [where].
One word should blur and melt into the next in the same spot with a soft, gooey merge, then hold still for a moment before the next change.
Cycle through the words seamlessly, let screen readers read the words as plain text, and stop cycling for users who prefer reduced motion.

Text glows like a neon tube and flickers or pulses.

Add a "Neon Glow Text" effect (also called a neon sign flicker or glowing text) to [where].
The text should glow like a neon tube with a soft, steady light, and now and then flicker off briefly like a real sign.
Keep the flicker occasional rather than rapid, since fast flashing can harm some users, and keep the glow steady for users who prefer reduced motion.

Letters of a title shuffle or move sequentially as the user scrolls through sections.

Add "Scrolling Letters" (also called on-scroll letter animations) to [where].
As the user scrolls through the sections, the letters of the title should roll to their next characters one after another from left to right, tied directly to the scroll position.
Scrolling back up should roll them back, and screen readers should get the current title as plain text.

A bright highlight sweeps repeatedly across the letters.

Add a "Shimmer Text" effect (also called animated shiny text or metallic shimmer text) to [where].
A band of light should sweep smoothly across the letters from left to right, then repeat after a short pause.
Keep the text readable under the highlight, and keep it still for users who prefer reduced motion.

A heading is cut into horizontal slices that shift sideways against each other as the page scrolls.

Add a "Sliced Text" effect (also called on-scroll sliced text) to [where].
A large heading should be cut into horizontal slices that slide sideways against each other as the user scrolls, lined up into the whole word at the start.
Tie the shift directly to the scroll position so scrolling back reverses it, and keep the heading as one readable text for screen readers.

Text is set around a circle that rotates continuously.

Add "Spinning Text" (also called circular text or text on circle) to [where].
Letters should be spaced evenly around a circle that turns slowly and steadily, with no jump when the loop restarts.
Give screen readers the text once as plain text, and stop the rotation for users who prefer reduced motion.

A heading is split into characters, words or lines that animate in one after another with a small delay.

Add a "Split Text Stagger" entrance (also called letter stagger or staggered text reveal) to [where].
Split the heading into letters that rise and fade in one after another with a short delay between them, quick and smooth without bounce.
Play it once when the heading comes into view, keep it read as one word by screen readers, and show it without motion for users who prefer reduced motion.

Characters flip like an airport departure board until they land on the target letter.

Add a "Split-Flap Text" effect (also called a text flipping board or flip board) to [where].
Each character tile should flip quickly through the alphabet until it lands on its target letter, with the tiles settling one after another from left to right.
Run it once each time the text appears or changes, announce only the final text to screen readers, and show the final text without flipping for users who prefer reduced motion.

Letter edges wiggle as if hand-drawn using an SVG displacement filter.

Add a "Squiggly Text" effect (also called wobbly text or turbulence text) to [where].
The letter edges should wobble slightly as if hand-drawn and redrawn several times a second: a subtle, jittery boil rather than a smooth wave.
Keep the text readable, and hold it still for users who prefer reduced motion.

Text stays pinned while lines fade in and out with scroll progress.

Add a "Sticky Text Fade" effect (also called sticky scroll text opacity fade) to [where].
While the section scrolls, the text block should stay pinned in place and its lines should fade in and out one at a time with the scroll progress.
Tie the fades directly to the scroll position so scrolling back reverses them, and keep every line available to screen readers whatever its opacity.

Letter outlines are drawn as a stroke before the fill appears.

Add a "Stroke Text Draw" effect (also called draw in text or animated stroke text) to [where].
The letter outlines should draw themselves in smoothly, and once the outlines are complete the fill should fade in.
Play it once on load, keep the word accessible as real text, and show the filled text straight away for users who prefer reduced motion.

Letters or words rotate around an axis in 3D to show the next text on their back side.

Add a "Text 3D Flip" hover effect (also called 3D flip text reveal) to [where].
When the pointer is over the text, each letter should roll over on its horizontal axis in 3D to show a new letter on its other side, one after another in a quick, smooth sweep, and roll back when the pointer leaves.
Keep the text box the same size during the flip, and show the same effect on keyboard focus.

Text warps and ripples organically, driven by scrolling or pointer movement.

Add a "Text Distortion" effect (also called organic text distortion) to [where].
A row of text should flow sideways endlessly and warp and ripple organically as it moves, as if seen through moving water, with the flow driven by the user's scrolling.
Keep the distortion light enough that the text stays legible, keep it smooth on slower devices, and turn it off for users who prefer reduced motion.

Words fade in sequentially on page load, often with a blur clearing, as if being generated.

Add a "Text Generate" effect to [where].
The words should fade in one after another while a soft blur clears from each, as if the text is being generated: steady and calm.
Play it once on load, let screen readers read the full text right away, and show it without motion for users who prefer reduced motion.

A marker-style colour band draws across a phrase to emphasise it.

Add a "Text Highlighter" effect (also called highlight marker or marker underline) to [where].
A marker-style color band should sweep smoothly behind the key phrase from left to right, like someone highlighting it with a pen.
Play it once when the phrase scrolls into view, keep the text readable on top of the band, and let the band follow the phrase correctly when it wraps onto two lines.

An outlined word gets filled or lit by a gradient that follows the pointer or sweeps across.

Add a "Text Hover Effect" (also called text fill on hover or gradient outline text hover) to [where].
The word should start as an outline, and while the pointer is over it a solid fill should sweep in smoothly from left to right, then draw back out when the pointer leaves.
Keep the outlined word readable before the fill, and show the same effect on keyboard focus.

Text follows a curved path and travels along it as the user scrolls.

Add a "Text Path Scroll" effect (also called text path curve scroll animation) to [where].
The text should sit on a curved line and glide along it as the user scrolls, moving forward when scrolling down and back when scrolling up.
Tie the movement directly to the scroll position without lag, and keep the text readable as plain text for screen readers.

A word is duplicated into many stacked copies that shift with scroll.

Add a "Text Repetition" effect (also called repeated text scroll) to [where].
A word should be copied into a stack of fainter outline copies that spread out from behind it as the user scrolls, and fold back together when scrolling up.
Tie the spread directly to the scroll position, and hide the extra copies from screen readers so the word is read only once.

Existing text is animated out and replaced with new text content.

Add a "Text Replacement" effect (also called text swap) to [where].
When the text changes, the old characters should slide up and out while the new ones slide in from below, one character after another in a quick, smooth ripple.
Keep the text box from jumping in size during the swap, and announce only the new text to screen readers.

Words of a paragraph go from dim to full opacity as the user scrolls.

Add a "Text Reveal" effect (also called scroll text reveal or word-by-word reveal) to [where].
The paragraph should start dim, and as the user scrolls each word should brighten to full strength one after another, tied to the scroll position.
Scrolling back up should dim the words again, and the whole paragraph should stay available to screen readers whatever its dimming.

Moving the pointer across a card uncovers hidden text underneath a mask edge or spotlight.

Add a "Text Reveal Card" effect (also called spotlight text reveal) to [where].
As the pointer moves across the card, a vertical edge should follow it closely and uncover hidden text on one side, smooth and direct with no lag.
On touch devices, where there is no pointer to follow, let a drag or tap reveal the hidden text, and make the hidden text available to screen readers.

Text is replaced by random characters that refresh and gradually resolve into the final word.

Add a "Text Scramble" hover effect (also called text decode or encrypted text) to [where].
When the pointer moves over the text, each letter should flicker rapidly through random characters and settle on its real letter, resolving one after another from left to right.
Keep the text width from jumping while it scrambles, keep screen readers on the real text, and show the same effect on keyboard focus.

Text rotates in 3D perspective following the mouse position.

Add a "Text Tilt" effect (also called perspective text tilt) to [where].
The text should tilt gently in 3D toward the pointer as it moves, following it smoothly, and ease back flat when the pointer leaves.
Keep the tilt subtle so the text stays readable, and leave the text flat on touch devices and for users who prefer reduced motion.

Characters appear one at a time as if typed, usually followed by a blinking caret.

Add a "Typewriter" effect (also called typing animation or typing text) to [where].
The characters should appear one at a time at a steady typing pace, with a caret right after the last typed character that blinks a few times once typing is done.
Play it once rather than looping, let screen readers read the full text right away, and show the full text for users who prefer reduced motion.

An underline grows from one side or the centre under a link on hover.

Add an "Underline Draw" hover effect (also called animated underline or hover underline animation) to [where].
When the pointer is over the link, an underline should grow smoothly from left to right under the text, and shrink back when the pointer leaves: quick and subtle.
Keep the underline from shifting the surrounding layout, and show the same effect on keyboard focus.

Letters smoothly get bolder or lighter (or change width/slant) via variable-font axes.

Add a "Variable Font Weight Animation" hover effect (also called font weight shift) to [where].
While the pointer is over the text, the letters should grow bolder one after another in a smooth wave from left to right, and thin out again when the pointer leaves.
Use a variable font so the weight changes smoothly instead of jumping, keep the heading from pushing nearby content around as it widens, and show the same effect on keyboard focus.

Big letters act as a window showing a playing video inside them.

Add a "Video Text" effect (also called text video mask) to [where].
Big, bold letters should act as a window onto a playing video, so the moving footage shows only inside the letter shapes.
Keep the video muted and looping without controls, provide the words as real text for screen readers, and show a still frame for users who prefer reduced motion.

Letters bob up and down in sequence, creating a wave running through the word.

Add a "Wavy Text" effect (also called text wave) to [where].
The letters should bob up and down one after another so a gentle, smooth wave keeps running through the word.
Loop it seamlessly, keep it read as one word by screen readers, and stop the wave for users who prefer reduced motion.

One word in a sentence is swapped for the next word in a list with a slide, flip or fade.

Add a "Word Rotate" effect (also called rotating words or flip words) to [where].
One word in the line should slide up and out while the next word from a list slides in from below, pausing on each word before the next change.
Keep the rest of the line from jumping when the words have different widths, don't make screen readers announce every change, and stop rotating for users who prefer reduced motion.

An organic blob continuously changes its outline.

Add a "Blob Morph" loop animation (also called a morphing blob or animated blob) to [where].
An organic blob should keep slowly changing its outline while turning gently, smooth and soft with no sharp corners.
Make the loop seamless so the shape never jumps, and keep it still for users who prefer reduced motion.

Nearby shapes blend into each other like liquid blobs via blur and contrast filtering.

Add a "Gooey Effect" (also called a goo effect or metaballs) to [where].
When the pointer is over it, small blobs should pull away from the main shape, stretching like liquid before breaking free, and flow back and merge smoothly when the pointer leaves.
Apply the blur-and-contrast filter only to the small group of shapes, not the whole page, and show the same effect on keyboard focus and tap.

An icon such as a hamburger menu turns into another (X) with bars rotating and moving.

Add an "Icon Morph" (also called hamburger to X or a menu icon morph) to [where].
On each press, the top and bottom bars should first slide together to the middle and then rotate into an X while the middle bar fades out, and pressing again reverses it: quick and snappy.
Make it a real toggle button whose accessible label and expanded state change with it, and keep the icon's size fixed so nothing around it shifts.

An SVG stroke appears to be drawn along its path as the dash offset animates.

Add a "Line Drawing" animation (also called path drawing or a self-drawing SVG) to [where].
Each stroke should appear to draw itself smoothly along its path from start to end, with a second stroke such as a checkmark following right after the first.
Play it once when it comes into view rather than looping, and show the fully drawn lines to users who prefer reduced motion.

An element travels along a custom curved path and can rotate to follow it.

Add a "Motion Path" animation (also called animate along path) to [where].
A small element should travel along a custom curved route at a slow, steady pace, turning to face the direction it is moving.
Use a closed route so the loop repeats without a jump, and make the route scale with its container instead of staying at a fixed size.

Small circles or icons revolve around a centre on circular paths.

Add "Orbiting Circles" (also called an orbit animation or orbiting icons) to [where].
Small circles should revolve slowly and steadily around a central element on circular rings, with the outer ring turning the other way and more slowly.
Keep the loop seamless and the orbiting items upright, and stop the rotation for users who prefer reduced motion.

One vector shape smoothly turns into another shape.

Add a "Shape Morph" (also called path morphing or SVG morph) to [where].
One shape should smoothly turn into another, for example a pentagon pinching into a star, with its points gliding into place at an even, unhurried pace.
Give both shapes the same number of matching points so the morph stays clean without flicker, and play it once per state change rather than looping.

An SVG filter warps text or shapes with animated noise.

Add an "SVG Displacement Distortion" hover effect (also called a displacement map effect) to [where].
While the pointer is over it, the text or shape should ripple and wobble as if seen through moving water, fading in softly, and return to crisp when the pointer leaves.
Apply the distortion filter only while the effect is active so it costs nothing at rest, and show the same effect on keyboard focus.

A masked shape wipes or follows the pointer to uncover content beneath.

Add an "SVG Mask Reveal" hover effect (also called a clip-path reveal or spotlight mask) to [where].
While the pointer is over it, a circular mask should grow from the center and uncover the content underneath, then close again when the pointer leaves: smooth and fairly quick.
Keep both layers exactly the same size so nothing shifts, and show the same reveal on keyboard focus and tap.

Lines and dots animate between locations on a map or globe.

Add "Animated Map Arcs" (also called globe arcs) to [where].
Curved lines should draw themselves between locations on a dotted map one after another, then retract toward their destination while a soft ring pulses there: calm and steady.
Stagger the arcs so they never move in unison, keep the loop seamless, and pause it for users who prefer reduced motion.

Bars rise from zero height to their data values.

Add a "Bar Chart Grow" animation (also called an animated bar chart or bar chart entrance) to [where].
Each bar should rise from the baseline to its value one after another in a quick stagger, easing out smoothly as it settles.
Play it once when the chart comes into view, and show the finished chart right away to users who prefer reduced motion.

Horizontal bars swap ranks over time as values change.

Add a "Bar Chart Race" (also called a racing bar chart) to [where].
Horizontal bars should grow and shrink as values change over time and slide smoothly past each other whenever their rank changes, each keeping its label.
Move the bars with transforms instead of re-ordering the markup so swaps glide rather than jump, and give users a way to pause it.

Chart elements interpolate smoothly from old to new values when data changes or datasets toggle.

Add a "Chart Data Transition" (also called a chart update animation) to [where].
When the data changes, every bar should glide from its old value to its new one at the same time, smooth and unhurried, instead of redrawing from zero.
Start each update from the values currently on screen so a quick second change does not jump, and apply new values instantly for users who prefer reduced motion.

A ring or pie fills clockwise to its percentage.

Add a "Donut Chart Fill" animation (also called a pie chart sweep or animated donut chart) to [where].
Starting at the top, each segment should sweep clockwise in turn until the ring shows its share, easing out smoothly as it finishes.
Play it once when the chart comes into view, and keep the actual values available as text for screen readers.

A number counts from a start value to a target value when it becomes visible.

Add a "Number Ticker" (also called count up or an animated counter) to [where].
When the number comes into view, it should count up from zero to its target, fast at first and slowing gently as it lands.
Use fixed-width digits so nothing around it jitters, count only once, and give screen readers and users who prefer reduced motion the final value right away.

Each digit rolls vertically to the new value when a number changes.

Add an "Odometer" number animation (also called rolling numbers or slot-machine digits) to [where].
When the value changes, each digit should roll vertically to its new digit, always rolling forward, with a slight stagger across digits and a small settle at the end.
Keep every digit the same width so the number does not shift, and expose only the final value to screen readers.

A colored background sweeps in from an edge with an elastic overshoot.

Add a "Background Bounce Sweep" hover effect to [where].
A new background color should sweep in from one edge, overshoot the far edge a little with an elastic bounce and then settle, while the label color switches to stay readable; on leave it slides back out smoothly.
Keep the label above the fill, and show the same effect on keyboard focus.

The background and text color cross-fade to a new color on hover.

Add a "Background Fade" hover effect (also called color fade) to [where].
The background and text colors should cross-fade smoothly to new colors while the pointer is over the element, and fade back when it leaves: calm, with no movement.
Keep enough contrast between text and background in both states, and show the same effect on keyboard focus.

A colored background wipes across the element from one edge on hover.

Add a "Background Sweep" hover effect (also called background fill or slide fill) to [where].
A new background color should wipe across from the left edge to the right, smooth and quick with no bounce, and retract the same way when the pointer leaves, while the label color switches to stay readable.
Keep the fill clipped inside the element's shape, and show the same effect on keyboard focus.

The element floats up then bobs or hangs up and down continuously while hovered.

Add a "Bob" hover effect (also called hang) to [where].
The element should float up a little, then keep bobbing gently up and down while the pointer stays over it, and drop back when the pointer leaves: slow and soft.
Loop the bobbing only while hovered, and keep it still for users who prefer reduced motion.

The border color fades in or changes on hover.

Add a "Border Fade" hover effect to [where].
The border should fade smoothly from a muted tone to the accent color while the pointer is over the element: subtle, with no movement or size change.
Keep the border width the same in both states so nothing shifts, and show the same effect on keyboard focus.

Concentric border rings expand outward or contract inward from the element on hover.

Add a "Border Ripple" hover effect to [where].
When the pointer enters, a couple of border rings should spread outward from the element one after another and fade away: quick and light, like a ripple.
Play it once per hover rather than looping, and don't let the rings shift the surrounding layout.

The element scales with an elastic overshoot when hover starts or ends.

Add a "Bounce Scale" hover effect (also called bounce in / out) to [where].
The element should grow slightly larger with a springy, visible overshoot, briefly going past its final size before settling, and bounce back the same way when the pointer leaves.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.

A highlight background slides between cards in a grid to follow whichever card is hovered.

Add a "Card Hover Effect" (also called sliding highlight card grid) to [where].
A soft highlight background should appear behind the hovered card and glide smoothly to whichever card the pointer moves to next, fading out when the pointer leaves the grid.
Make keyboard focus move the highlight the same way, and keep the cards themselves from shifting.

A soft radial light follows the pointer across the card surface and reveals the background beneath.

Add a "Card Spotlight" effect (also called spotlight hover, pointer glow, mouse-following glow or radial gradient hover) to [where].
A soft, faint radial glow should follow the pointer across the card surface, fading in when the pointer enters and out when it leaves.
Keep the glow behind the card content so text stays readable, and on touch devices simply leave the card unlit.

A corner of the element folds up like a turning page on hover.

Add a "Curl" hover effect (also called page curl) to [where].
One corner of the element should fold up smoothly like a page being turned, showing the back of the fold, and flatten again when the pointer leaves.
Keep the fold small so it doesn't cover important content, and show the same effect on keyboard focus.

An overlay slides in from the side the pointer entered and leaves toward the side it exits.

Add a "Direction Aware Hover" effect (also called direction-aware overlay) to [where].
An overlay should slide in from whichever side the pointer entered and slide out toward the side it leaves: quick and smooth.
Work out the side from the pointer position on entry and on exit, and on touch or keyboard focus fall back to one default direction.

Icons in a row grow smoothly as the pointer approaches, like the macOS Dock.

Add a "Dock Magnification" effect (also called dock) to [where].
Icons in the row should grow smoothly as the pointer gets closer, with the nearest icon largest and its neighbors slightly enlarged, and all return to normal size when the pointer leaves.
Grow the icons upward from a fixed baseline, and keep every icon usable at its normal size on touch and keyboard.

The element rises upward a few pixels on hover, as if floating.

Add a "Float" hover effect (also called lift or raise) to [where].
The element should rise up a little and stay raised while the pointer is over it, then settle back when it leaves: smooth and gentle, with no bounce.
Move it visually without shifting the surrounding layout, and show the same effect on keyboard focus.

Sibling cards blur and dim while one hovered card stays sharp.

Add a "Focus Cards" effect (also called blur siblings on hover, hover focus blur or card hover effect) to [where].
While the pointer is over one card, the other cards should blur, dim and shrink slightly as the hovered card stays sharp, all with a smooth fade that reverses when the pointer leaves.
Apply the same focus on keyboard focus, and keep every card sharp and readable when nothing is hovered.

A colored light halo appears around the element on hover.

Add a "Glow" hover effect (also called neon glow) to [where].
A soft colored halo should fade in around the element while the pointer is over it and fade out when it leaves: gentle, with no movement.
Keep the halo from affecting layout, and show the same effect on keyboard focus.

The element smoothly scales up slightly when the pointer is over it.

Add a "Grow" hover effect (also called scale up) to [where].
The element should scale up slightly and smoothly while the pointer is over it, and shrink back when the pointer leaves: quick and subtle.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.

The filled background empties, leaving only an outlined button on hover.

Add a "Hollow" hover effect (also called ghost fill) to [where].
The filled background should fade away, leaving only the outline, and the label should change color to stay readable on the empty background: smooth and quick.
Keep the border the same thickness in both states so the element doesn't change size, and show the same effect on keyboard focus.

A gradient border animates around the element and expands when the pointer is over it.

Add a "Hover Border Gradient" effect to [where].
A short gradient highlight should rest on one part of the border; while the pointer is over the element it should travel steadily around the border as the whole border brightens with a soft glow.
Animate the border only while hovered, and keep it still for users who prefer reduced motion.

A soft shadow appears or deepens beneath the element on hover to suggest elevation.

Add a "Hover Shadow" effect (also called drop shadow on hover or elevation on hover) to [where].
A soft shadow beneath the element should deepen and spread while the pointer is over it so it looks raised, and fade back when it leaves, while the element itself stays in place.
Keep the shadow subtle enough to work in both light and dark themes, and show the same effect on keyboard focus.

A translucent overlay tints the element to show the pointer is over it.

Add a "Hover State Layer" (also called hover state, state layer or hover overlay) to [where].
A faint translucent overlay in the content color should fade in quickly over the element while the pointer is over it, and fade out when it leaves.
Keep it faint so contrast stays intact, and use the same layer approach for focus and pressed states.

An icon drops out of view and comes back from above on hover.

Add an "Icon Drop" hover effect to [where].
The icon inside the element should drop down out of view and then fall back into place from above: quick, with a soft landing.
Play it once each time the pointer enters rather than looping, and keep the label and button size unchanged.

An icon drifts out of the button and fades while a new one floats in.

Add an "Icon Float Away" hover effect to [where].
The current icon should drift upward and fade out while a new icon floats up from below into its place, smoothly, and the swap should reverse when the pointer leaves.
Keep the button size fixed during the swap, and show the same effect on keyboard focus.

An icon inside a button spins around when the button is hovered.

Add an "Icon Spin" hover effect to [where].
The icon inside the element should spin one full turn smoothly when the pointer enters, and turn back when it leaves.
Spin only the icon, not the whole button, and show the same effect on keyboard focus.

The button label slides out and an arrow and fill expand in when hovered.

Add an "Interactive Hover Button" effect to [where].
The small dot beside the label should expand to fill the button while the label slides out to the side and fades, and the label with an arrow slides in over the new fill: smooth and quick.
Keep the button size fixed and the label readable throughout, and show the same effect on keyboard focus.

An arrow or the element itself slides a few pixels forward or backward on hover.

Add a "Nudge Forward / Backward" hover effect (also called arrow nudge) to [where].
The arrow should slide a little in the direction it points while the pointer is over the element, and slide back when it leaves: quick and small.
Move only the arrow without shifting the label or layout, and show the same effect on keyboard focus.

An outline grows outward from or shrinks toward the element on hover.

Add an "Outline Expand" hover effect to [where].
An outline should start flush with the element's edge and move outward to leave a small gap around it, staying there while hovered and closing back in when the pointer leaves: smooth and quick.
Draw the outline so it doesn't change the element's size or push nearby content, and show the same effect on keyboard focus.

A line grows above the text from the left, center, or right on hover.

Add an "Overline Grow" hover effect to [where].
A line above the text should grow outward from the center to both sides while the pointer is over it, and shrink back to the center when it leaves: quick and smooth.
Reserve space for the line so the text doesn't shift, and show the same effect on keyboard focus.

The element quickly scales up and settles back with a springy pop.

Add a "Pop" hover effect to [where].
Each time the pointer enters, the element should swell up once quickly and settle back to its normal size, like a small springy pop.
Play it once per hover rather than holding the larger size or looping, and keep the surrounding layout from shifting.

The element dips inward and returns, as if it were pushed like a physical button.

Add a "Push" hover effect to [where].
Each time the pointer enters, the element should dip smaller once quickly and spring back to its normal size, as if it were pushed in like a physical button.
Play it once per hover rather than looping, and keep the surrounding layout from shifting.

A colored circle grows from or shrinks toward the center to fill the element on hover.

Add a "Radial Fill" hover effect (also called circle expand) to [where].
A circle of the new color should grow smoothly from the center until it fills the element, and shrink back to the center when the pointer leaves, while the label color switches to stay readable.
Keep the circle clipped inside the element's shape and the label above it, and show the same effect on keyboard focus.

A rectangle expands or contracts inside the element to change its background on hover.

Add a "Rectangle Fill" hover effect to [where].
The new background color should close in from all four edges as an inner rectangle shrinks toward the center, and open back out when the pointer leaves, while the label color switches to stay readable: smooth and quick.
Keep the label above the fill, and show the same effect on keyboard focus.

The element turns by a few degrees when hovered.

Add a "Rotate" hover effect to [where].
The element should turn slightly clockwise while the pointer is over it and turn back when it leaves: smooth and subtle.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.

The corners of the element smoothly round on hover.

Add a "Round Corners" hover effect to [where].
The element's sharp corners should round off smoothly while the pointer is over it, and sharpen again when it leaves: soft and quick.
Keep the element's size unchanged, and show the same effect on keyboard focus.

A diagonal band of light sweeps across the element from one side to the other on hover.

Add a "Shine Sweep" hover effect (also called sheen, shiny button, shine on hover, glint, shimmer or shimmer button) to [where].
A soft diagonal band of light should sweep across the element from left to right, repeating with a short pause while the pointer stays over it.
Keep the band clipped inside the element, stop it when the pointer leaves, and don't run it for users who prefer reduced motion.

The element smoothly scales down slightly when hovered.

Add a "Shrink" hover effect (also called scale down) to [where].
The element should scale down slightly and smoothly while the pointer is over it, and grow back when the pointer leaves: quick and subtle.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.

The background opens or closes like shutters from the center or the edges on hover.

Add a "Shutter Fill" hover effect (also called shutter) to [where].
The new background color should open from a line down the center out to both sides like shutters, and close back to the center when the pointer leaves, while the label color switches to stay readable: smooth and quick.
Keep the fill clipped inside the element and the label above it, and show the same effect on keyboard focus.

The element moves downward a few pixels on hover, as if pressed into the page.

Add a "Sink" hover effect to [where].
The element should move down a little and stay there while the pointer is over it, as if pressed into the page, and rise back when it leaves: smooth, with no bounce.
Move it visually without shifting the surrounding layout, and show the same effect on keyboard focus.

The element shears sideways when hovered.

Add a "Skew" hover effect to [where].
The element should shear sideways into a slight slant while the pointer is over it, and straighten when it leaves: quick and smooth.
Keep the text readable while slanted and the surrounding layout from shifting, and show the same effect on keyboard focus.

A small speech-bubble triangle appears on one side of the element on hover.

Add a "Speech Bubble" hover effect (also called bubble) to [where].
A small triangle tail should slide out from behind one side of the element, turning it into a speech-bubble shape, and slide back in when the pointer leaves: quick and smooth.
Keep the tail the same color as the element so they read as one shape, and show the same effect on keyboard focus.

An inner border line appears inside the element edge on hover.

Add a "Trim" hover effect to [where].
A thin line should fade in just inside the element's edge while the pointer is over it, and fade out when it leaves: subtle, with no movement.
Keep the line inside the element so its size doesn't change, and show the same effect on keyboard focus.

A line slides in from the bottom or top edge into place to underline or overline the element.

Add an "Underline Reveal" hover effect (also called overline reveal or reveal) to [where].
A full-width line should slide up into place from just below the bottom edge while the pointer is over the element, and slide back down out of view when it leaves: quick and smooth.
Clip the line at the edge so it appears by sliding rather than fading or growing, and show the same effect on keyboard focus.

The card translates and scales slightly in response to pointer movement over it.

Add a "Wobble Card" effect to [where].
As the pointer moves over the card, the card should shift slightly toward it while its content shifts slightly the other way with a small scale-up, following smoothly, and everything settles back when the pointer leaves.
Keep the movement small, and turn it off on touch devices and for users who prefer reduced motion.

The product image shrinks and flies along an arc into the cart icon.

Add an "Add to Cart Fly" animation (also called fly to cart or add-to-cart animation) to [where].
When the add button is pressed, a small copy of the product image should shrink as it flies along a smooth, quick arc into the cart icon, and the cart should give a small bump as its count updates.
Play it once per press without moving the original product card, and skip the flight for users who prefer reduced motion while still updating the cart.

A checkmark is drawn stroke by stroke inside the box when it is ticked.

Add a "Checkbox Check Draw" animation (also called an animated checkbox or checkmark draw) to [where].
When the box is ticked it should fill with color and the checkmark should draw itself in one quick, smooth stroke; unticking erases it the same way.
Keep it a real checkbox with its checked state, working with the keyboard and a visible focus ring.

Colorful paper pieces burst out and fall to celebrate a success.

Add a "Confetti" celebration (also called a confetti burst) to [where].
Small colorful paper pieces should burst quickly out of the button, then tumble and drift down as they fade away, in a short, lively shower.
Fire it once per success rather than looping, keep it from blocking clicks on the page, and skip it for users who prefer reduced motion.

The copy icon morphs into a checkmark and the label reads Copied for a moment.

Add a "Copy-to-Clipboard Feedback" animation (also called a copied state or copy icon to checkmark) to [where].
When the copy button is pressed, the copy icon should quickly shrink away as a checkmark draws in and the label changes to "Copied", then everything eases back after a short moment.
Keep the button the same size during the swap so nothing shifts, and announce the copied state to screen readers.

An element follows the pointer when dragged and can be limited to an area or an axis.

Add a "Drag" interaction (also called draggable or drag constraints) to [where].
The element should follow the pointer directly while dragged, stop at the edges of its allowed area, and spring back to its resting place with a small bounce when released.
Make it work with touch as well as a mouse without the page scrolling underneath, and offer a keyboard way to move it.

The placeholder label moves up and shrinks above the field when it is focused or filled.

Add a "Floating Label" (also called a float label or animated placeholder) to [where].
When the field is focused or has a value, the label sitting inside it should glide up and shrink onto the top edge of the field, smoothly and quickly, and drop back only when the field is empty and unfocused.
Keep it a real label tied to the input, and make sure the field height does not change so the form never shifts.

A heart icon fills with color and bursts small particles or pulses when clicked.

Add a "Like / Heart Burst" animation (also called a heart animation or favorite toggle) to [where].
When it is liked, the heart should fill with color and pop with a springy bounce while a ring and small dots burst outward and fade, all quick and playful; unliking just empties the heart quietly.
Keep it a real toggle button with its pressed state, and play the burst only when turning it on.

Holding an item down for a moment triggers extra actions or a progress fill.

Add a "Long Press" interaction (also called press and hold or touch and hold) to [where].
While the item is held down it should sink slightly as a progress fill sweeps across it at a steady pace, and when the fill completes it springs back and opens its menu; letting go early cancels and resets the fill.
Give keyboard and screen reader users another way to reach the same actions, and do not let the hold trigger text selection or the browser's own context menu.

A count badge pops, bounces, or pulses when a new notification arrives.

Add a "Notification Badge Bounce" animation (also called a badge pop or ping) to [where].
When a new notification arrives, the count badge should pop in from nothing and settle with a couple of quick, springy bounces while a soft ring pulses out from it once.
Play it once per new notification rather than looping, and announce the new count to screen readers.

An eye icon switches between open and slashed as the password text is shown or hidden.

Add a "Password Reveal Toggle" (also called show/hide password or an eye icon toggle) to [where].
Pressing the eye should quickly wipe away its slash as the hidden dots crossfade into the real characters, and pressing again draws the slash back and hides them: smooth and quick, with no bounce.
Keep the field width steady so the text does not jump, and make the toggle a real button whose label says whether the password is shown.

A pointer arrow draws a highlight box around a word when the text scrolls into view.

Add a "Pointer Highlight" effect to [where].
As the text scrolls into view, a box should draw itself around the key word from left to right while a small pointer arrow travels along its corner, smooth and steady, as if someone is marking the word by hand.
Draw it only once when it first comes into view without shifting the text, and show the finished box right away for users who prefer reduced motion.

The element shrinks slightly while pressed and springs back on release.

Add a "Press (Button Tap Scale)" effect (also called tap feedback or press state) to [where].
While it is pressed the element should shrink slightly and darken a touch, then spring back to full size with a small bounce on release: quick and subtle.
Show the same feedback for keyboard presses and touch, and keep the surrounding layout from shifting.

Dragging a list down reveals a spinner and reloads the content on release.

Add a "Pull to Refresh" interaction (also called swipe to refresh) to [where].
When the list is pulled down from the top it should follow the finger with some resistance and reveal a spinner that turns as it is pulled; on release the spinner keeps spinning while the content reloads, then the list slides smoothly back up.
Only start it when the list is already scrolled to the top, and give keyboard and screen reader users a regular refresh control too.

A circular wave expands and fades from the exact point of the click or tap.

Add a "Ripple" effect (also called a material ripple or ink ripple) to [where].
On each click or tap, a soft circular wave should spread out from the exact point that was pressed until it covers the element, fading as it grows: quick and light.
Clip the wave to the element's shape, let rapid presses each start their own ripple, and start it from the center for keyboard presses.

A circle and tick draw themselves to confirm an action succeeded.

Add a "Success Checkmark" animation (also called an animated success tick) to [where].
A circle should draw itself around in one smooth stroke, then the tick draws inside it and the whole mark gives a small, gentle pop: calm and confident.
Play it once when the action succeeds, pair it with a text message screen readers can announce, and show the finished mark right away for users who prefer reduced motion.

Swiping a list row sideways reveals action buttons such as delete or archive.

Add a "Swipe to Delete" interaction (also called swipe actions or swipe to reveal) to [where].
Dragging a row sideways should slide it directly with the finger to uncover action buttons such as archive and delete behind it, stopping once they are fully shown, and on release it glides smoothly into place without bounce.
Keep vertical scrolling working while swiping horizontally, and make the same actions reachable by keyboard and screen readers without swiping.

A round knob slides along a track and the track color changes between off and on.

Add a "Toggle Switch" animation (also called a switch) to [where].
When it is turned on or off, the round knob should slide smoothly to the other end of the track while the track color changes: quick and crisp, with no bounce.
Keep it a real accessible switch (role="switch" with its checked state) that also works with the keyboard.

The text caret grows or shrinks to match the size of the character it sits beside.

Add an "Adaptive Caret" effect (also called adaptive caret size) to [where].
The text caret should move in front of the character nearest the pointer and quickly stretch or shrink to match that character's height, with a smooth, snappy resize and no bounce.
Keep the text itself from shifting, and let the caret follow keyboard movement the same way it follows the pointer.

A circle cursor inverts the colors beneath it using mix-blend-mode difference.

Add a "Blend-Mode Cursor" (also called a difference cursor or inverting cursor) to [where].
Replace the pointer with a solid circle that sits directly under it with no lag and inverts the colors of the text and shapes it passes over.
Keep the blending contained to that area so it does not mix with the rest of the page, make sure it still inverts clearly in dark mode, and keep the normal cursor on touch devices.

A shape or label trails the pointer with a spring or eased delay.

Add a "Cursor Follower" (also called a following pointer or smooth cursor) to [where].
A small round marker should trail the pointer with a soft, eased delay and glide to a stop right where the pointer rests, without bouncing.
Keep the real pointer visible, never let the marker block clicks, and leave it out on touch devices.

A preview image follows the pointer while hovering a text list item.

Add a "Cursor Image Hover" effect (also called hover image follow or image preview on hover) to [where].
While the pointer is over a text list item, a small preview image of that item should float beside the pointer, following it with a slight smooth lag and sliding to the next image when the pointer moves to another item.
The preview must never block clicks on the list, and the list should stay fully usable without it on touch and keyboard.

A circle of light around the pointer reveals content while the rest stays dark.

Add a "Cursor Spotlight" effect (also called a flashlight cursor or spotlight effect) to [where].
A soft circle of light should follow the pointer and reveal the content under it while the rest of the area stays dimmed.
On touch devices, where there is no pointer to follow, show the content fully lit instead.

A fading string of shapes is left behind the pointer as it moves.

Add a "Cursor Trail" effect (also called a mouse trail) to [where].
As the pointer moves, it should leave a short string of small dots behind it that each shrink and fade away quickly, so the trail stays short and smoothly traces the path.
Only draw the trail while the pointer is moving, never let it block clicks, and leave it out on touch devices and for users who prefer reduced motion.

The default arrow is replaced by a styled dot or ring that changes over interactive elements.

Add a "Custom Cursor" (also called an animated cursor or cursor replacement) to [where].
Replace the default arrow with a small dot that tracks the pointer exactly and a ring that follows a little behind, and let the ring grow smoothly while it is over links and buttons.
Keep the normal cursor on touch devices and in text fields, and never let the custom cursor block clicks.

The element is pulled toward the pointer as it comes close, then snaps back when it leaves.

Add a "Magnetic Button" effect (also called a magnetic target or magnetic hover) to [where].
As the pointer comes close, the button should be pulled a little toward it with its label moving slightly further, and when the pointer leaves it should spring back to its place with a small bounce.
Keep the surrounding layout from shifting, and turn the pull off on touch devices and for users who prefer reduced motion.

A field of small lines rotates to point at the pointer, like iron filings around a magnet.

Add a "Magnetic Filings" effect to [where].
A grid of short lines should each turn to point straight at the pointer right away, like iron filings around a magnet, and all face the center when there is no pointer.
Keep it a decorative background that never blocks clicks, and leave the lines still for users who prefer reduced motion.

A content panel smoothly grows to its full height or shrinks to zero when its header is toggled.

Add an "Accordion Expand-Collapse" effect (also called a collapse or disclosure) to [where].
When a header is pressed, its panel should smoothly grow to the full height of its content and shrink back to nothing on the next press, with the header's arrow turning to match: quick and smooth, no bounce.
Animate to the content's real height rather than a fixed guess, keep the header a real button that exposes its expanded state, and make it work from the keyboard.

A translucent dark layer fades in behind an overlay to dim the page.

Add a "Backdrop Scrim Fade" (also called an overlay fade or scrim) to [where].
When the overlay opens, a translucent dark layer should fade in softly over the page behind it, a little slower than the overlay itself, and fade out again when it closes.
Keep the scrim dark in both light and dark themes, and stop the page behind it from scrolling or taking clicks while it is shown.

A panel slides up from the bottom edge, often draggable and snapping to heights.

Add a "Bottom Sheet Slide-Up" (also called a bottom drawer or sheet) to [where].
The panel should slide up from the bottom edge while the page behind it dims, decelerating smoothly into place without a bounce.
Play it once each time the sheet opens, slide it back down on close, and keep keyboard focus inside the sheet while it is open.

Slides stay in place and dissolve into each other instead of sliding.

Add a "Carousel Crossfade" (also called a fade slideshow or carousel fade) to [where].
Slides should stay in place and slowly dissolve into one another, the old one fading out while the next fades in at the same time, then hold for a few seconds before the next change.
Loop seamlessly back to the first slide, pause on hover or focus, and don't auto-advance for users who prefer reduced motion.

Slides move horizontally past a viewport, snapping one item into place at a time.

Add a "Carousel Slide" (also called a slider or swipe carousel) to [where].
Each step should slide the row sideways so the next slide snaps into the center, smooth and decelerating, with the neighbours peeking at the edges and the position dots following along.
Move one slide at a time, support swipe on touch as well as buttons and arrow keys, and keep the controls labelled for screen readers.

A card grows into a full detail view, keeping one visible container that reshapes and reveals new content.

Add a "Container Transform" transition (also called card expand to detail or an expandable card) to [where].
When the card is opened, the same container should grow smoothly into the full detail view, its old content fading out quickly and the new content fading in once it has nearly finished growing; closing plays it in reverse.
Keep it one continuous container rather than a crossfade between two separate boxes, and move focus into the detail view when it opens.

Dragging an item makes others slide out of the way and settle in the new order.

Add a "Drag-to-Reorder List" (also called a sortable list) to [where].
The dragged item should follow the pointer directly and lift slightly, while the other items slide smoothly out of its way; on release it should settle quickly into the nearest slot.
Support touch as well as mouse, and offer a keyboard way to move items with the new position announced to screen readers.

A side panel slides in from the left, right or top edge, pushing or overlaying content.

Add a "Drawer Slide" (also called off-canvas or a side sheet) to [where].
The panel should slide in from the side edge over the content while the page behind dims, quick and smoothly decelerating, and slide back out the same way when closed.
Keep keyboard focus inside the open drawer, close it with Escape or a click on the dimmed area, and return focus to the button that opened it.

Elements glide smoothly to their new positions and sizes after the layout changes.

Add a "FLIP Layout Animation" (also called a layout animation or First-Last-Invert-Play) to [where].
When the layout changes, each element should glide from its old position to its new one instead of jumping, quick at first and easing gently into place.
Animate with transforms only so the page doesn't reflow on every frame, and switch straight to the new layout for users who prefer reduced motion.

Items fade and slide in when added and animate out when removed while neighbours close the gap.

Add a "List Item Enter/Exit" animation (also called an animated list) to [where].
A new item should first open up its space and then fade and slide in; a removed item should fade out first and then collapse so its neighbours close the gap smoothly.
Keep a removed item in place until its exit has finished, so the list never jumps when items are added or removed.

A row of content slides sideways in an endless, seamless loop.

Add a "Marquee" (an infinite horizontal scroll, also called a ticker) to [where].
The content should slide from right to left at a slow, steady speed in a seamless loop with no visible jump.
Pause it on hover, and stop the motion when the user prefers reduced motion (prefers-reduced-motion).

Grid tiles rearrange, fade out or slide into new slots when a filter or sort is applied.

Add a "Masonry / Grid Shuffle" effect (also called a filterable grid animation) to [where].
When a filter is applied, the tiles that no longer match should shrink and fade out in place while the remaining tiles slide smoothly into their new slots; clearing the filter plays it back.
Keep the surrounding page from jumping while the grid changes height, and make the filter controls real buttons that expose which filter is selected.

A dialog fades in while scaling up slightly from its center over a dimmed page.

Add a "Modal Scale-Fade In" animation (also called a dialog open animation or zoom-fade dialog) to [where].
The dialog should fade in while scaling up slightly from its center as the page behind it dims: quick and subtle, with no bounce.
Play it once each time the dialog opens, move focus into it and keep it there, and use a plain fade for users who prefer reduced motion.

A floating menu fades and scales in from the point where its trigger sits.

Add a "Popover / Dropdown Open" animation (also called a menu pop or dropdown scale-fade) to [where].
The menu should fade in while growing slightly out of the corner next to its trigger, quick and crisp, and fade out a little faster when it closes.
Keep it anchored to the trigger, close it with Escape or a click outside, and expose the open state on the trigger for screen readers.

An element appears to move and resize into a matching element in a new spot, sharing one identity.

Add a "Shared Layout Animation" (also called an in-page shared element) to [where].
When the selection changes, the element should appear to move and resize smoothly from its old spot into its new one, easing gently into place, so it reads as one object rather than two.
Show only one copy at any moment, and keep the surrounding layout from jumping while it moves.

An underline or pill glides from the old tab to the newly selected tab.

Add a "Tab Indicator Slide" (also called a sliding underline or active tab indicator) to [where].
When a new tab is selected, the underline should glide from the old tab to the new one, quick and smoothly decelerating, stretching to the new tab's width if it differs.
Keep proper tab semantics with arrow-key navigation, and move the indicator without sliding for users who prefer reduced motion.

A brief message slides or fades in at a screen edge, waits, then leaves; stacked toasts shift to make room.

Add a "Toast Slide-In" (also called a snackbar or toast notification) to [where].
Each message should slide up from the screen edge and fade in, decelerating smoothly; when a new toast arrives, the ones already shown should shift over smoothly to make room.
Announce the message to screen readers without stealing focus, keep it up long enough to read, and pause the auto-dismiss on hover or focus.

A small label fades and nudges into place next to an element after a short hover delay.

Add a "Tooltip Fade" (also called a tooltip reveal) to [where].
After a short hover delay, the label should fade in while nudging slightly into place next to the element, then disappear quickly with no delay when the pointer leaves.
Show it on keyboard focus too, let Escape dismiss it, and connect it to the element so screen readers read it.

The new view is revealed inside a circle that expands from the click point.

Add a "Circular Reveal" transition (also called a clip-path circle expand or theme toggle reveal) to [where].
The new view should appear inside a circle that grows outward from the pressed control until it covers the whole area: smooth and steady, easing in and out.
Start the circle exactly where the control was pressed, and switch instantly without the circle for users who prefer reduced motion.

The old page fades out as the new page fades in over the same area.

Add a "Crossfade Page Transition" (also called a cross-dissolve or fade transition) to [where].
On navigation, the old page should fade out while the new page fades in over the same area at the same time: soft and fairly quick.
Keep both pages in the same spot so nothing shifts during the fade, and move focus to the new page's main heading after the change.

Solid panels sweep across the screen to cover the old page, then retract to reveal the new one.

Add a "Curtain / Panel Wipe" page transition (also called a page wipe or staggered panels) to [where].
Solid panels should sweep in one after another to cover the old page, the page should switch while it is fully covered, and the panels should carry on out of view to reveal the new one: bold and smooth.
Never show the new page before the panels have covered the old one, and use a plain fade instead for users who prefer reduced motion.

The outgoing content fades out completely, then the incoming content fades in with a slight scale.

Add a "Fade Through" page transition (also called a fade-through transition or out-in route transition) to [where].
The outgoing content should fade out quickly and completely first, then the incoming content should fade in while scaling up slightly into place.
Never let the two overlap, and keep the incoming content's layout from shifting while it scales.

A full-screen intro layer with a logo or counter slides or fades away to reveal the site.

Add a "Preloader Curtain Lift" (also called a splash screen or intro loader) to [where].
A full-screen intro layer should hold while a loading bar fills, then slide up and away smoothly to reveal the site, which settles gently into place beneath it.
Play it only on the first load, never hold the page longer than loading actually takes, and skip it for users who prefer reduced motion.

Outgoing and incoming content move together along the X, Y or Z axis with fades to show spatial relation.

Add a "Shared Axis" page transition (also called shared axis X/Y/Z) to [where].
Moving forward, the old content should slide a short way to one side and fade out quickly while the new content slides in from the other side and fades in just after; moving back reverses the direction.
Keep the travel short so it only hints at direction, and match the axis to the navigation: sideways for siblings, vertical for steps, depth for drilling in.

A matching element, such as a thumbnail, morphs in position and size from one page to the next.

Add a "Shared Element Transition" (also called a hero transition or view-transition-name morph) to [where].
When moving to the next page, the matching element, such as a thumbnail, should smoothly move and grow into its place on the new page while the rest of the content crossfades, and shrink back when returning.
Give the matching elements on both pages one shared identity so they pair up correctly, and fall back to a plain crossfade where the browser can't morph them.

The new page slides in from one side while the old page slides out, with direction following navigation depth.

Add a "Slide Page Transition" (also called push / pop or a directional slide) to [where].
Going forward, the new page should push in from the side while the old page slides out the other way; going back, both should move in the opposite direction: smooth, easing in and out.
Tie the direction to navigation depth, including the browser's back button, and keep the page from scrolling sideways during the slide.

The old page scales up or down and fades while the new page scales into place.

Add a "Zoom Page Transition" (also called a scale transition or zoom in / out) to [where].
Drilling in, the old page should scale up slightly and fade out while the new page grows from slightly smaller into place; going back, it should zoom out the opposite way: smooth and quick.
Keep the scaling subtle so the content stays readable throughout, and use a plain fade for users who prefer reduced motion.

Vertical bars grow and shrink out of phase, like an audio equalizer.

Add a "Bar Loader (Equalizer)" loading animation (also called a bars loader or audio bars) to [where].
A few vertical bars should stretch and shrink out of step with each other like an audio equalizer, at a lively but even pace.
Keep the loop seamless, give it a status label for screen readers, and stop the motion for users who prefer reduced motion.

A tiny blurred version of an image sits in place and sharpens as the full image loads.

Add a "Blur-Up Placeholder" image loading effect (also called LQIP or a blur placeholder) to [where].
A tiny, heavily blurred version of the image should fill the image's space right away, and once the full image has loaded it should sharpen into place smoothly and fairly quickly.
Reserve the image's exact size so nothing shifts when it arrives, and clip the blurred edges so they do not bleed past the frame.

A row of dots bounce, fade or scale in sequence.

Add "Bouncing Dots" (also called a dots loader or three-dot loader) to [where].
The dots should hop up and land one after another in a light, springy rhythm, with a short rest before the sequence repeats.
Keep the loop seamless, give it a status label for screen readers, and stop the motion for users who prefer reduced motion.

A button swaps its label for, or adds, a small spinner while an action runs.

Add a "Button Loading State" (also called a spinner button or loading button) to [where].
When pressed, the button should give a small press, fade its label out and show a small spinner in its place while the action runs, then bring the label back when it finishes.
Keep the button's width fixed while it loads, block repeat presses, and announce the busy state to screen readers.

A ring or arc rotates continuously to show that something is loading.

Add a "Circular Spinner" (also called a spinner or throbber) to [where].
An arc should rotate steadily around a faint ring while it stretches longer and shorter, smooth and continuous.
Keep the rotation seamless, give it a loading label for screen readers, and slow or stop it for users who prefer reduced motion.

A bar fills from left to right in proportion to task completion.

Add a "Determinate Progress Bar" (also called a progress bar fill or progress indicator) to [where].
The bar should fill from left to right in step with the real progress, easing smoothly between updates, with the percentage shown beside it.
Use proper progress bar semantics with current, minimum and maximum values so screen readers can read it, and never let the fill move backwards.

A bar segment sweeps repeatedly along a track when the duration is unknown.

Add an "Indeterminate Linear Progress" bar (also called an indeterminate progress bar) to [where].
A short segment should sweep along the track from one end to the other again and again, quick and smooth, while the length of the task is unknown.
Let the segment enter and leave the track completely so the loop has no visible seam, and mark it as a busy progress bar for screen readers.

A list of steps highlights or checks off one by one as a long task advances.

Add a "Multi-Step Loader" (also called a step loader or checklist loader) to [where].
The steps should light up one at a time from top to bottom, and each should get a small checkmark that pops in as it completes, at a calm, readable pace.
Advance the steps with the real task progress rather than a fixed timer, and announce each completed step to screen readers.

A circular arc grows around a ring to show percentage complete.

Add a "Progress Ring" (also called circular progress or radial progress) to [where].
Starting at the top, an arc should grow clockwise around the ring to show the percentage complete, easing out as it settles, while the number in the center counts up alongside it.
Keep the arc and the number in sync, and expose the value with proper progress bar semantics for screen readers.

Gray placeholder blocks fade in and out gently to signal loading.

Add a "Pulse Placeholder" (also called a skeleton pulse) to [where].
Gray placeholder blocks shaped like the coming content should slowly fade lighter and back together in a gentle, steady rhythm.
Match the placeholders to the real layout so nothing jumps when the content arrives, and keep them still for users who prefer reduced motion.

Gray placeholder shapes show a light highlight sweeping across them.

Add a "Skeleton Shimmer" (also called a skeleton wave or shimmer effect) to [where].
A soft band of light should sweep across the gray placeholder shapes from left to right and pause briefly before the next pass: smooth and unhurried.
Match the placeholder shapes to the real layout so nothing jumps when the content loads, and show static placeholders to users who prefer reduced motion.

A thin bar at the top of the page creeps forward during navigation and finishes on load.

Add a "Top Loading Bar" (also called a page progress bar) to [where].
A thin bar along the top edge should dart forward at first and then creep more and more slowly while the page loads; when loading finishes it should race to the end and fade out.
Never let it reach the end before loading is actually done, and keep it from covering or shifting the page content.

Three dots in a bubble pulse or rise in turn to show someone or an AI is composing.

Add a "Typing Indicator" (also called typing dots) to [where].
Dots inside a small chat bubble should rise and brighten one after another in a soft, gentle rhythm while the other side is composing.
Keep the loop seamless, remove the bubble as soon as the message arrives, and give screen readers a short status text instead of the dots.

A glowing pulse travels along a line connecting two elements.

Add an "Animated Beam" effect (also called a connecting beam) to [where].
A short glowing pulse should travel along the line that connects two elements, moving steadily from one end to the other and then starting again: smooth and calm.
Keep the connecting line itself visible at all times, and hold the pulse still for users who prefer reduced motion.

Colors in a gradient background slowly shift, pan or rotate.

Add an "Animated Gradient" background (also called a gradient animation or moving gradient) to [where].
The colors of the gradient should slowly pan across the area in a soft, continuous drift, with no visible jump when the loop restarts.
Keep text on top readable against every color, and stop the movement for users who prefer reduced motion.

A grid of lines or squares whose cells fade or flicker on and off.

Add an "Animated Grid Pattern" background (also called a flickering grid or grid background) to [where].
A faint grid of lines should stay in place while a few scattered cells slowly fade in and out at different times: quiet and subtle, never all at once.
Keep it behind the content without catching clicks, and stop the flicker for users who prefer reduced motion.

Soft blurred bands of color drift like an aurora behind content.

Add an "Aurora Background" (also called a northern lights gradient) to [where].
Soft, blurry bands of color should drift and sway slowly behind the content, overlapping and blending like northern lights: very slow and dreamy.
Keep the text on top readable, avoid re-blurring the bands on every frame so it stays smooth, and stop the drift for users who prefer reduced motion.

Thin glowing lines travel along paths, sometimes exploding when they hit a surface.

Add a "Background Beams" effect (also called light beams or background lines) to [where].
Faint curved paths should sit in the background while short glowing streaks travel along them one after another, at a calm, steady pace.
Stagger the beams so they never move in lockstep, keep them behind the content, and stop them for users who prefer reduced motion.

A skewed grid of tiles lights up in color as the pointer passes over them.

Add a "Background Boxes" effect (also called a tile hover background) to [where].
Fill the area with a skewed grid of tiles; each tile the pointer passes over should light up instantly and then fade back slowly, leaving a short trail.
Keep the tiles behind the content so they don't block clicks on it, and on touch devices light the tapped tile instead.

A bright highlight travels around the border of a card.

Add a "Border Beam" effect (also called a shine border or moving border) to [where].
A short bright highlight should travel around the card's border at an even, unhurried pace, looping without a visible jump.
Keep the card's content and size unchanged by the effect, and stop the beam for users who prefer reduced motion.

A grid of dots pulses or glows in waves.

Add a "Dot Pattern Glow" background (also called a dotted glow background or dot grid) to [where].
A fine grid of dots should stay still while a soft band of glow sweeps slowly across it, lighting the dots it passes: calm and subtle.
Keep the dots faint enough that content on top stays readable, and stop the glow for users who prefer reduced motion.

A glowing lamp line widens and casts a cone of light onto a heading beneath it.

Add a "Lamp Effect" (also called a lamp glow) to [where].
When the section comes into view, a thin glowing line should widen from the center and cast a soft cone of light down onto the heading below, which fades up into place: slow and smooth.
Play it only once, and for users who prefer reduced motion show the lit heading straight away.

Soft beams of light sway across the background.

Add a "Light Rays" background (also called god rays or light shafts) to [where].
Several soft, semi-transparent beams should fan out from the top and sway gently back and forth, brightening and dimming a little: slow and atmospheric.
Keep the rays behind the content and faint enough not to hurt readability, and stop them for users who prefer reduced motion.

Several color points blend smoothly and drift, forming an organic, multi-hue backdrop.

Add a "Mesh Gradient" background (also called an animated mesh gradient) to [where].
Several soft color spots should blend into one another and drift slowly around the area, so the backdrop keeps shifting in an organic way: very slow and smooth.
Keep content on top readable over every blend, and stop the drift for users who prefer reduced motion.

Diagonal streaks with glowing tails fall across a card or section.

Add a "Meteors" effect (also called a meteor shower or shooting stars) to [where].
A handful of small streaks with fading tails should shoot diagonally across the area at random moments, each one quick and then gone.
Keep them few so it stays an accent, clip them to the area's edges, and stop them for users who prefer reduced motion.

A fine speckled texture overlays the page, sometimes flickering like film grain.

Add a "Noise / Grain Texture" overlay (also called film grain or a noise background) to [where].
A fine, faint speckled texture should sit over the surface and flicker in small jumps like film grain: subtle, never strong enough to muddy the content.
Let clicks pass through the overlay, generate the texture once instead of every frame, and keep it still for users who prefer reduced motion.

Many small dots drift, connect or react to the pointer across the background.

Add a "Particles" background (also called floating particles or a particle field) to [where].
Small dots of different sizes should float and drift slowly in gentle, wandering paths, each at its own pace: calm and airy.
Keep the number of dots modest so it stays light on slower devices, pause it when it is off screen, and stop it for users who prefer reduced motion.