# Motion Components

> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.

Animation primitives built on the `motion` library (`motion-primitives/*`) plus a small `animate-ui/*` layer. Compose sparingly — decorative and low-frequency surfaces only; never on data or on actions users repeat dozens of times a day. Import each from its own subpath, e.g. `import { AnimatedGroup } from "@nurix/components/effect/animated-group"`.

## Animated numbers

Tick-up numerals that render as plain text until JS is ready (no layout shift, no flash of `0`).

- `motion-primitives/animated-number` — `AnimatedNumber`: spring-interpolated count-up; `value`, `springOptions`, `as` (element/component, default `span`)
- `motion-primitives/sliding-number` — `SlidingNumber`: per-digit slot-machine roll; `value`, `padStart`, `decimalSeparator`

```tsx
<AnimatedNumber value={total} springOptions={{ bounce: 0.2 }} />
```

## Stagger entrance

- `motion-primitives/animated-group` — `AnimatedGroup`: staggers children in on mount/update. **Props:** `preset` [fade|slide|scale|blur|blur-slide|zoom|flip|bounce|rotate|swing], `variants` (`{ container, item }`, overrides preset), `as`/`asChild`

```tsx
<AnimatedGroup preset="blur-slide">
  {items.map((item) => <Card key={item.id}>{item.label}</Card>)}
</AnimatedGroup>
```

## Text effects

Per-character/word/line text animation — low-frequency surfaces only (empty states, onboarding, marketing-adjacent copy).

- `motion-primitives/text-effect` — `TextEffect`: staggered reveal; `per` [word|char|line], `preset` [blur|fade-in-blur|scale|fade|slide], `delay`, `trigger`, `onAnimationComplete`
- `motion-primitives/text-morph` — `TextMorph`: morphs character-by-character between successive `children` string values; `as`, `variants`, `transition`
- `motion-primitives/text-scramble` — `TextScramble`: scrambles through random characters before resolving; `duration`, `speed`, `characterSet`, `trigger`, `onScrambleComplete`
- `motion-primitives/text-shimmer` — `TextShimmer`: looping gradient shimmer across the text; `duration`, `spread`

## Morphing overlays

Trigger element morphs its own bounds into the overlay (shared-layout, not a fade) — interruptible mid-animation.

- `motion-primitives/morphing-dialog` — `MorphingDialog` (root) + `MorphingDialogTrigger`, `MorphingDialogContainer` (portal), `MorphingDialogContent`, `MorphingDialogTitle`, `MorphingDialogSubtitle`, `MorphingDialogDescription` (`disableLayoutAnimation`), `MorphingDialogImage`, `MorphingDialogClose`; root takes `transition`
- `motion-primitives/morphing-popover` — `MorphingPopover` (`defaultOpen`/`open`/`onOpenChange`, `variants`) + `MorphingPopoverTrigger`, `MorphingPopoverContent`

```tsx
<MorphingDialog>
  <MorphingDialogTrigger>
    <img src={thumb} alt="" />
  </MorphingDialogTrigger>
  <MorphingDialogContainer>
    <MorphingDialogContent>
      <MorphingDialogImage src={fullSize} alt="" />
    </MorphingDialogContent>
  </MorphingDialogContainer>
</MorphingDialog>
```

## Panel transitions

Crossfade/slide between sibling panels, or a height-animated reveal. Distinct from the plain shadcn `accordion`/`tabs` subpaths in [layout.md](layout.md)/[navigation.md](navigation.md) — these are the animated variants.

- `motion-primitives/transition-panel` — `TransitionPanel`: crossfades between `children[activeIndex]`; `variants` (`{ enter, center, exit }`), `transition`
- `motion-primitives/disclosure` — `Disclosure` (root, `open`/`onOpenChange`) + `DisclosureTrigger`, `DisclosureContent`; `useDisclosure()` for custom triggers
- `motion-primitives/accordion` — animated `Accordion` (root, `expandedValue`/`onValueChange`, single-expand) + `AccordionItem`, `AccordionTrigger`, `AccordionContent`; `useAccordion()`
- `animate-ui/components/animate/tabs` — animated `Tabs`: sliding active-tab highlight over the primitive below; `variant` [solid|underline], `size` [sm|md|lg]

## Decorative effects

Pointer-tracked washes and ambient loops — decorative chrome only, never load-bearing content.

- `motion-primitives/spotlight` — `Spotlight`: cursor-following radial glow inside a `position: relative` parent; `size`, `springOptions`
- `motion-primitives/glow-effect` — `GlowEffect`: animated multi-color glow; `mode` [rotate|pulse|breathe|colorShift|flowHorizontal|static], `colors`, `blur` (preset or px number), `duration`, `scale`
- `motion-primitives/animated-background` — `AnimatedBackground`: sliding highlight that tracks the active/hovered child (each child needs a `data-id`); `defaultValue`, `onValueChange`, `enableHover`
- `motion-primitives/infinite-slider` — `InfiniteSlider`: seamless looping marquee; `gap`, `speed`, `speedOnHover`, `direction` [horizontal|vertical], `reverse`
- `animate-ui/primitives/effects/highlight` — `Highlight`: the sliding-highlight primitive underneath `AnimatedBackground`/animated `Tabs`; `mode` [children|parent], `value`/`defaultValue`/`onValueChange` (controlled or uncontrolled), `hover`, `click`, `transition`, `exitDelay`

## Dynamic toolbar

- `motion-primitives/toolbar-dynamic` — `ToolbarDynamic`: toolbar that expands to a contextual search input; `expandedWidth`, `collapsedWidth`, `placeholder`, `transition`. Ships `ToolbarButton` for the collapsed action icons.

---

Two further `animate-ui` subpaths are low-level primitives consumed internally rather than composed directly: `animate-ui/primitives/animate/slot` (an `asChild`-merging `Slot`, the plumbing behind the animated `Tabs`) and `animate-ui/primitives/effects/theme-toggler` (the directional-wipe primitive behind the `theme-toggler` component in [media.md](media.md)).