# XWUIAnimationTexty

Per-character text animation, the port of Ant Motion's `Texty`. The string is split
into characters (by code point, so emoji and combined scripts survive) and each character is
animated in turn under a chosen `type` and ordering `mode`.

## When to use

- A hero headline that should assemble rather than appear.
- Short, decorative strings. Character splitting is per-character DOM, so it is the wrong tool
  for a paragraph.
- Anywhere a "typing" effect is wanted without a typewriter library.

Screen readers see the assembled text, and under `prefers-reduced-motion: reduce` the text is
simply rendered - no per-character motion runs at all.

## Configuration surface

`data.text` is the string to animate.

`config`:

- `type` - per-character motion, default `top`. One of `left`, `right`, `top`, `bottom`,
  `alpha`, `scale`, `scaleX`, `scaleBig`, `scaleY`, `mask-bottom`, `mask-top`, `flash`,
  `bounce`, `swing`, `swing-y`, `swing-rotate`.
- `mode` - the order characters animate in, default `smooth`. One of `smooth`, `reverse`,
  `random`, `sync`.
- `interval` - milliseconds between characters, default `50`.
- `duration` - per-character duration, default `450`ms.
- `delay` (default `0`), `className`.

### Family behaviour

Every component in `power/animation` is CSS plus the Web Animations API - no
`rc-*` React packages and no animation library. Two consequences worth knowing
before you design with them:

- `prefers-reduced-motion: reduce` is honoured, not decorated: presets jump
  straight to their end state, banner autoplay never starts, per-character text
  motion is skipped, and scroll-linked motion freezes. The content is always
  fully readable.
- A `content` string is written with `textContent`, never as HTML. Pass an
  `HTMLElement` when you need markup, and build that element yourself so the
  escaping decision stays where the data is.

## Basic Usage

The string is split per character and animated in order; `type` picks the motion and `mode` the ordering.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A headline assembling one character at a time.
```

## Showcase

The same text specimen under its own heading, mounted into a dedicated child host.

```example
file: examples/Showcase.ts
html: examples/Showcase.html
title: Showcase
description: The per-character text motion replayed in an isolated host.
```

```api
```