Flicker In
The element blinks on with rapid opacity flashes like a faulty neon sign before staying visible.
Use for
Neon and retro text effects
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 "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).Similar motions
ABC
Flicker
Also called Flickering
The element's opacity flickers irregularly like a failing light.
Use for
Neon and glitch effects
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.Flash
Also called Blink
The element blinks by quickly toggling its opacity.
Use for
Alerting to new content
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.ABCDEF
Neon Glow Text
Also called Neon Sign Flicker, Glowing Text
Text glows like a neon tube and flickers or pulses.
Use for
Nightlife, gaming themes
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.A
Fade In / Fade Out
Also called Fade
The element goes from fully transparent to fully opaque in place, or the reverse when leaving.
Use for
Modals, toasts, page content appearing
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).More in Entrance & Exit
A
The element makes a full turn around the Y axis while moving slightly toward the viewer and back.
Use for
Attention-drawing reveal of a card or badge
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).A
Flip In
Also called Flip In X, Flip In Y
The element rotates in 3D around its horizontal or vertical axis from edge-on to facing the viewer.
Use for
Card and tile reveals
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).A
Flip Out
Also called Flip Out X, Flip Out Y
The element rotates in 3D until it is edge-on and invisible.
Use for
Removing cards and tiles
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).