# Motion blocks

Animation is installed as a plugin variant of an existing block. Variant tabs exist only in the documentation workspace and are not copied into the consuming application.

## Boundaries

- The Sign In page starts on `Normal` and offers `CSS animation` and `GSAP animation` documentation tabs.
- `CSSMotion` provides dependency-free animation using CSS keyframes.
- `GsapMotion` owns scoped GSAP lifecycle and installs `gsap` plus `@gsap/react`.
- `MotionReveal` remains available as a component plugin for products using Motion for React.
- Registry items declare both npm dependencies and DUI `registryDependencies`, so one CLI command installs the complete block.

## Passes and validation

1. Keep animation components independent and installable.
2. Attach plugin variants to an existing block instead of creating standalone animation blocks.
3. Keep variant selection in documentation only and generate a distinct CLI command for each variant.
4. Build every static route, validate the registry, and confirm reduced-motion fallbacks.