# XWUIAnimationParallax

Scroll-linked translation for one layer, the port of Ant Motion's ScrollAnim
`Parallax`. As the element travels through the viewport the component maps that progress onto a
translate, so a background image can drift slower than the text over it.

## When to use

- Depth on a landing page: two or three layers with different `y` values read as different
  distances.
- Any motion that must stay tied to scroll position rather than to a timeline.

Use `XWUIAnimationScroll` when you want a one-shot entrance as the element scrolls into view -
parallax is continuous, and continuous motion is the more expensive choice.

## Configuration surface

`data.content` is the layer's content: a string (set as text) or an `HTMLElement`.

`config`:

- `y` - vertical travel in pixels across the element's scroll range, default `80`. Larger reads
  as further away.
- `x` - horizontal travel, default `0`.
- `ease` - smoothing applied to the tracked progress.
- `className`.

Under `prefers-reduced-motion: reduce` the layer does not track scroll at all; it renders in its
resting position and stays there. The component watches the media query live, so a user changing
the OS setting is respected without a reload.

### 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

`y` is the pixel distance the layer travels across its scroll range, so a larger value reads as further from the camera.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A scroll-linked layer whose travel distance sets its apparent depth.
```

## Showcase

The same parallax layer under its own heading, mounted into a dedicated child host.

```example
file: examples/Showcase.ts
html: examples/Showcase.html
title: Showcase
description: The parallax layer replayed in an isolated host.
```

```api
```