Animated Components

Animated components add movement to state changes, spatial relationships, progress, and direct manipulation. The CLI copies their source into your project so you can change the timing, styling, fallback, or remove the effect entirely.

Use motion for a reason

Choose an animated component when movement helps people understand what changed or where an element went. Avoid adding motion only to make a static surface feel busier.

The collection includes:

• State and label transitions for compact actions.
• Layout motion for disclosures and active indicators.
• Text and number reveals for short, deliberate moments.
• Pointer-responsive effects for optional visual emphasis.
• Repeating movement for nonessential ambient content.

Accessibility responsibilities

Components document their reduced-motion behavior and preserve native semantics where they own an interactive element. The application is still responsible for meaningful labels, visible focus, keyboard operation, readable status updates, and ensuring that motion is not the only way to understand a change.

Pointer-responsive effects must remain optional. Their content and actions need to work on touch devices, with a keyboard, and when reduced motion is enabled.

Choose carefully

• Use Action Swap when one compact action moves through a small set of named states.
• Use Bouncy Accordion when opening one disclosure should explain a layout change.
• Use Number Ticker for occasional metric changes, not rapid critical updates.
• Use Text Shimmer for a short in-progress label with a separate programmatic busy state.
• Use Magnetic or Tilt Card only as progressive visual enhancement.
• Use Marquee only for nonessential content that remains understandable when the loop stops.

Get started

Follow Installation, then open a component page to review its purpose, reduced-motion behavior, and API before adding it.