# Animated Components

> Copied React components that use motion to clarify state and spatial change.

Source: https://www.honestui.com/docs/animated

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 [#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 [#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 [#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 [#get-started]

Follow [Installation](/docs/animated/installation), then open a component page to review its purpose, reduced-motion behavior, and API before adding it.