Circular Reveal
Also called Clip-path circle expand, Theme toggle reveal
The new view is revealed inside a circle that expands from the click point.
Use for
Dark/light theme switch, page change
Variants
- expand from click
- expand from center
Prompt
Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
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.Similar motions
A
Hover to play
Radial Fill
Also called Circle expand
A colored circle grows from or shrinks toward the center to fill the element on hover.
Use for
Buttons
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.Click to play
Ripple
Also called Material ripple, Touch ripple, Ripple Button, Ink ripple
A circular wave expands and fades from the exact point of the click or tap.
Use for
Buttons, list items
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
Clip Reveal
Also called Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
A clip-path or mask grows from an edge or point so the image or text is progressively uncovered.
Use for
Image and headline reveals
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).More in Page Transition
A
B
Click to play
Crossfade Page Transition
Also called Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
The old page fades out as the new page fades in over the same area.
Use for
Default route change
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.A
B
Click to play
Curtain / Panel Wipe
Also called Page wipe, Curtain reveal, Stripe transition, Staggered panels
Solid panels sweep across the screen to cover the old page, then retract to reveal the new one.
Use for
Portfolio and agency site navigation
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.A
B
Click to play
Fade Through
Also called Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
The outgoing content fades out completely, then the incoming content fades in with a slight scale.
Use for
Switching between unrelated destinations
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.