Motion

Text filled with a slowly panning gradient. Static gradient under reduced motion.

Animated number. Screen readers get the final formatted value once; the moving digits are hidden.

Text with a highlight sweeping across it: for "thinking…" states, shiny announcement badges and loading copy.

Staggered per-word/char entrance when the text scrolls into view. Renders plain text for reduced motion.

Paragraph whose words light up as it scrolls through the viewport (or inside `container`).

Types text character by character with a blinking caret. Screen readers get the full text immediately.

Cycles through words in place. Width animates to the current word; screen readers hear the list once.

Characters scramble then resolve left to right, on view and again on hover/focus.

Text with twinkling four-point sparkles around it.

Decorative background pattern (SVG) with optional radial fade, flickering cells or hover-lit cells. Place inside a relative container; it fills it and ignores pointer events unless `interactive`.

Aurora: soft bands of light drifting across the top of a section. Works on light and dark surfaces.

Background beams: thin light streaks falling down a column grid, each at its own speed.

Animated gradient surfaces. `mesh`: drifting blurred color blobs. `floor`: a perspective grid floor fading into a gradient horizon. Children render on top.

Canvas particle field. `drift`: floating dots that shy away from the pointer; `network`: connected nodes; `sparkles`: twinkling stars. Fills its container; decorative.

Light from above. `rays`: swaying god-rays fanning from the top; `lamp`: a glowing bar with a cone of light; `spotlight`: a soft ellipse from one corner.

Shooting stars streaking diagonally across a container. Decorative; hidden under reduced motion.

Concentric rings radiating from the center: behind a call button, a live indicator or a hero icon.

WebGL fragment-shader backgrounds (warp, waves, noise, dither) tinted with three theme colors. Falls back to a static CSS gradient when WebGL is unavailable; renders one still frame for reduced motion.

Modal dialog animated with Motion. React Aria keeps focus, dismissal and scroll locking; AnimatePresence keeps it mounted while the exit animation plays.

Nav or list where a shared-layout indicator glides between items (Motion layoutId). Renders links when items have href, otherwise buttons with aria-pressed.

List whose items animate in, out and to new positions (layout). Pass stable keys. Announces changes politely.

Fades and un-blurs content as it enters the viewport. Use `delay` to stagger siblings.

Swaps between two pieces of content (icons, labels) with a transition. Put the accessible name on the parent control.

Edge blur that ramps up toward one side (stacked backdrop-filter layers with staggered masks). Place absolutely over scrolling content, e.g. under a sticky header or at the bottom of a list.

Animated border: `beam` sends a short light around the edge; `shine` spins a soft multi-hue sweep; `glow` adds a blurred halo. Driven by the registered --border-angle custom property (static under reduced motion).

Card with a radial spotlight (and lit border) that follows the pointer. Pure CSS variables; no re-renders.

Card that tilts toward the pointer in 3D with a moving glare. Children can pop forward with `data-depth` (px).

Grid of cards that expand into a detail dialog with a shared-layout transition (layoutId). The expanded view is a real modal Dialog: focus is trapped and Escape closes it.

"Encrypted" card: a field of random characters revealed in a colored circle around the pointer.

Holographic foil card: tilts toward the pointer while a rainbow sheen and glare track it.

Wraps any pressable (Button, Card, ListItem) to add tactile feedback. Motion's MotionConfig reducedMotion="user" (MotionProvider) turns transforms off for reduced-motion users.

Search/prompt input whose placeholder cycles through examples; on submit the text vanishes upward letter by letter.

Terminal window that types commands and prints output line by line when scrolled into view. Full transcript for screen readers.

Moves its children vertically at `speed` relative to scroll (negative = slower, positive = faster).

Reading-progress bar for the page or a scroll container. Exposed as a progressbar with the current percent.

Vertical line beside long content that fills with a gradient as you scroll, with a dot at the leading edge.

Ready-made shimmer placeholders that match common layouts. Announces loading once via role="status".

Overlay loader that walks through named steps, checking each off. `duration` ms per step; loops unless `loop={false}`. Shows the current step in a live region.

SVG connector between two DOM elements with a gradient pulse travelling along it. Re-measures on resize.

Children orbit the center on a circular path (CSS only, items stay upright). Stack several with different radii.

Attention-grabbing buttons for hero CTAs. Use one per view. All are React Aria buttons; effects stop under reduced motion.

Button with a Material-style ripple from the press point (PressFeedback ripple + scale).

Dotted 3D globe (orthographic canvas projection). Auto-rotates, drag to spin, markers pulse. Static for reduced motion.

Card that tips back in 3D on hover while a pin with a label rises above it, with pulsing rings at its base.

Infinite scroller driven by a CSS keyframe (GPU transform, no JS per frame). Stops for prefers-reduced-motion and has a visible pause button.

Fires confetti from the center of the pressed element. Wrap any button: <ConfettiOnPress>{(fire) => <Button onPress={fire}/>}</ConfettiOnPress>.

Area with a custom, spring-smoothed cursor (dot, ring or labelled pointer). Native cursor hidden only inside; keyboard unaffected.