@syncedco/motion 0.1.0

package/docs/RECIPE-REFERENCE.md

@@ -0,0 +1,1358 @@
+<!-- Generated by scripts/build-docs.mjs. Do not edit by hand. -->
+# Recipe reference
+
+Every registered recipe, generated from the catalog so it cannot drift from the
+code. 60 recipes across 12 families.
+
+Selectors are shown with the documented `data-motion-` prefix. The original
+`data-motion-` names remain fully supported.
+
+To explore these interactively, run `npm run gallery`. To query them from a
+script or an agent, use `npx synced-motion catalog --json`.
+
+- [Reveals and entrances](#reveals-and-entrances)
+- [Split text and typography](#split-text-and-typography)
+- [Scroll and parallax](#scroll-and-parallax)
+- [Pinned storytelling](#pinned-storytelling)
+- [Horizontal galleries](#horizontal-galleries)
+- [Media, mask and clip](#media-mask-and-clip)
+- [Hover, focus and pointer](#hover-focus-and-pointer)
+- [Navigation and overlays](#navigation-and-overlays)
+- [Loops, progress and ambient](#loops-progress-and-ambient)
+- [FLIP and layout](#flip-and-layout)
+- [SVG, path and morph](#svg-path-and-morph)
+- [Page load and routing](#page-load-and-routing)
+
+## Reveals and entrances
+
+### `reveal-rise`
+
+Reveal content upward with opacity. Introduce an element as it enters the viewport.
+
+- **Root:** `[data-motion-reveal]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+_The root element is the only target._
+
+| Parameter | Type | Default | Range |
+| --- | --- | --- | --- |
+| `start` | string | `"top 85%"` | — |
+
+```bash
+npx synced-motion add reveal-rise
+```
+
+### `reveal-stagger-cascade`
+
+Cascade a local group into view. Introduce related items in a readable sequence.
+
+- **Root:** `[data-motion-stagger]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `items` | `[data-motion-stagger-item]` | optional | many |
+
+| Parameter | Type | Default | Range |
+| --- | --- | --- | --- |
+| `start` | string | `"top 85%"` | — |
+
+```bash
+npx synced-motion add reveal-stagger-cascade
+```
+
+### `reveal-directional`
+
+Reveal content from a semantic direction. Introduce content with a restrained directional offset.
+
+- **Root:** `[data-motion-reveal-directional]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+_The root element is the only target._
+
+_No parameters._
+
+```bash
+npx synced-motion add reveal-directional
+```
+
+### `reveal-scale-in`
+
+Gently scale and fade a focal element into view. Introduce a focal card or media element without changing layout.
+
+- **Root:** `[data-motion-reveal-scale]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+_The root element is the only target._
+
+_No parameters._
+
+```bash
+npx synced-motion add reveal-scale-in
+```
+
+### `reveal-clip-wipe`
+
+Reveal content through a bounded inline clip. Uncover media or editorial content with a directional wipe.
+
+- **Root:** `[data-motion-reveal-clip]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `content` | `[data-motion-reveal-clip-content]` | optional | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add reveal-clip-wipe
+```
+
+## Split text and typography
+
+### `split-lines-rise`
+
+Split text into responsive lines and reveal it. Give editorial headings a line-by-line entrance.
+
+> **Needs SplitText.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-split="lines"]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+_The root element is the only target._
+
+| Parameter | Type | Default | Range |
+| --- | --- | --- | --- |
+| `start` | string | `"top 85%"` | — |
+
+```bash
+npx synced-motion add split-lines-rise
+```
+
+### `split-words-cascade`
+
+Split text into words and stagger its entrance. Emphasize a statement word by word.
+
+> **Needs SplitText.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-split="words"]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+_The root element is the only target._
+
+| Parameter | Type | Default | Range |
+| --- | --- | --- | --- |
+| `start` | string | `"top 85%"` | — |
+
+```bash
+npx synced-motion add split-words-cascade
+```
+
+### `split-chars-shimmer`
+
+Reveal a statement through a restrained character cascade. Add character-level rhythm to short display text.
+
+> **Needs SplitText.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-chars-shimmer]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+_The root element is the only target._
+
+_No parameters._
+
+```bash
+npx synced-motion add split-chars-shimmer
+```
+
+### `typewriter-announce`
+
+Progressively reveal a short announcement while retaining complete accessible text. Give a short label or announcement a typed entrance.
+
+> **Needs SplitText.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-typewriter]`
+- **Triggers:** `viewport`, `load`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+_The root element is the only target._
+
+_No parameters._
+
+```bash
+npx synced-motion add typewriter-announce
+```
+
+### `text-highlight-sweep`
+
+Sweep a visual highlight behind readable text. Emphasize a phrase without replacing its semantic text.
+
+- **Root:** `[data-motion-text-highlight]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `mark` | `[data-motion-text-highlight-mark]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add text-highlight-sweep
+```
+
+## Scroll and parallax
+
+### `scroll-parallax`
+
+Scrub a decorative layer against page movement. Add depth to a scene without changing its reading order.
+
+- **Root:** `[data-motion-parallax]`
+- **Triggers:** `scroll`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+_The root element is the only target._
+
+_No parameters._
+
+```bash
+npx synced-motion add scroll-parallax
+```
+
+### `scroll-exit`
+
+Move and fade content as its scene leaves. Resolve a section as the next one takes focus.
+
+- **Root:** `[data-motion-scroll-exit]`
+- **Triggers:** `scroll`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+_The root element is the only target._
+
+_No parameters._
+
+```bash
+npx synced-motion add scroll-exit
+```
+
+### `scroll-drift`
+
+Drift a decorative layer through a bounded scene. Create subtle scroll-linked atmosphere.
+
+- **Root:** `[data-motion-scroll-drift]`
+- **Triggers:** `scroll`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `layer` | `[data-motion-drift-layer]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add scroll-drift
+```
+
+### `scroll-progress-meter`
+
+Map local reading progress to a nonessential indicator. Show progress through a long section without controlling navigation.
+
+- **Root:** `[data-motion-scroll-progress]`
+- **Triggers:** `scroll`
+- **Performance:** low
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `meter` | `[data-motion-scroll-progress-meter]` | required | one |
+| `label` | `[data-motion-scroll-progress-label]` | optional | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add scroll-progress-meter
+```
+
+### `scroll-depth-stack`
+
+Introduce stacked cards with restrained depth. Give a grouped card stack depth as it enters the viewport.
+
+- **Root:** `[data-motion-scroll-depth-stack]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `cards` | `[data-motion-depth-card]` | required | many |
+
+_No parameters._
+
+```bash
+npx synced-motion add scroll-depth-stack
+```
+
+## Pinned storytelling
+
+### `pinned-steps`
+
+Pin a narrative and activate linked panels by scroll progress. Turn sequential content into a controlled scroll story.
+
+- **Root:** `[data-motion-scroll-steps]`
+- **Triggers:** `scroll`
+- **Performance:** high
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `pin` | `[data-motion-pin-target]` | required | one |
+| `links` | `[data-motion-step-link]` | required | many |
+| `panels` | `[data-motion-step-panel]` | required | many |
+
+_No parameters._
+
+```bash
+npx synced-motion add pinned-steps
+```
+
+### `pinned-statement`
+
+Transform an oversized accent into a complete statement. Reveal a large editorial message through scroll.
+
+- **Root:** `[data-motion-scroll-statement]`
+- **Triggers:** `scroll`
+- **Performance:** high
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `pin` | `[data-motion-statement-pin]` | required | one |
+| `heading` | `[data-motion-statement-heading]` | required | one |
+| `details` | `[data-motion-statement-details]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add pinned-statement
+```
+
+### `pinned-founder-story`
+
+Sequence an editorial story into a metrics scene. Tell a long-form story through coordinated pinned states.
+
+> **Needs SplitText.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-founder-scene]`
+- **Triggers:** `scroll`
+- **Performance:** high
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `content` | `[data-motion-founder-content]` | required | one |
+| `heading` | `[data-motion-founder-heading]` | required | one |
+| `metrics` | `[data-motion-founder-metrics]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add pinned-founder-story
+```
+
+### `pinned-chapter-crossfade`
+
+Advance narrative chapters around a stable visual anchor. Tell a chaptered story while a visual remains pinned.
+
+- **Root:** `[data-motion-pinned-chapters]`
+- **Triggers:** `scroll`
+- **Performance:** high
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `pin` | `[data-motion-pin-target]` | required | one |
+| `chapters` | `[data-motion-pinned-chapter]` | required | many |
+| `visuals` | `[data-motion-pinned-visual]` | required | many |
+
+_No parameters._
+
+```bash
+npx synced-motion add pinned-chapter-crossfade
+```
+
+### `pinned-product-explainer`
+
+Coordinate product steps with a stable media region. Explain product states in a controlled scroll sequence.
+
+- **Root:** `[data-motion-product-explainer]`
+- **Triggers:** `scroll`
+- **Performance:** high
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `pin` | `[data-motion-pin-target]` | required | one |
+| `steps` | `[data-motion-product-step]` | required | many |
+| `media` | `[data-motion-product-media]` | required | many |
+
+_No parameters._
+
+```bash
+npx synced-motion add pinned-product-explainer
+```
+
+## Horizontal galleries
+
+### `horizontal-gallery-scrub`
+
+Translate a native row through a pinned viewport. Explore an editorial card gallery through vertical scroll.
+
+- **Root:** `[data-motion-horizontal-gallery]`
+- **Triggers:** `scroll`
+- **Performance:** high
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `track` | `[data-motion-horizontal-track]` | required | one |
+| `cards` | `[data-motion-horizontal-card]` | required | many |
+
+_No parameters._
+
+```bash
+npx synced-motion add horizontal-gallery-scrub
+```
+
+### `horizontal-gallery-snap`
+
+Scrub and snap a horizontal card gallery. Create clear chapter stops inside a horizontal scroll scene.
+
+- **Root:** `[data-motion-horizontal-snap]`
+- **Triggers:** `scroll`
+- **Performance:** high
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `track` | `[data-motion-horizontal-track]` | required | one |
+| `cards` | `[data-motion-horizontal-card]` | required | many |
+
+_No parameters._
+
+```bash
+npx synced-motion add horizontal-gallery-snap
+```
+
+### `horizontal-feature-rail`
+
+Move a feature rail and synchronize semantic active states. Present features as an active horizontal editorial sequence.
+
+- **Root:** `[data-motion-horizontal-feature-rail]`
+- **Triggers:** `scroll`
+- **Performance:** high
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `track` | `[data-motion-horizontal-track]` | required | one |
+| `cards` | `[data-motion-horizontal-card]` | required | many |
+| `labels` | `[data-motion-horizontal-label]` | optional | many |
+
+_No parameters._
+
+```bash
+npx synced-motion add horizontal-feature-rail
+```
+
+### `horizontal-logo-reel`
+
+Move partner or case-study marks through a bounded region. Add scroll-linked movement to a readable logo list.
+
+- **Root:** `[data-motion-horizontal-logo-reel]`
+- **Triggers:** `scroll`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `track` | `[data-motion-horizontal-track]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add horizontal-logo-reel
+```
+
+### `horizontal-comparison-slider`
+
+Reveal equivalent media states with a native range input. Compare before and after media with pointer and keyboard control.
+
+- **Root:** `[data-motion-comparison]`
+- **Triggers:** `pointer`, `focus`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `after` | `[data-motion-comparison-after]` | required | one |
+| `range` | `[data-motion-comparison-range]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add horizontal-comparison-slider
+```
+
+## Media, mask and clip
+
+### `media-expand`
+
+Expand cropped media while preserving its caption and labels. Turn a compact media preview into an immersive scene.
+
+- **Root:** `[data-motion-media-expand]`
+- **Triggers:** `scroll`
+- **Performance:** high
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `frame` | `[data-motion-media-expand-frame]` | required | one |
+| `caption` | `[data-motion-media-expand-caption]` | optional | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add media-expand
+```
+
+### `media-clip-reveal`
+
+Reveal media through a bounded inline clip. Uncover media without changing its layout box.
+
+- **Root:** `[data-motion-media-clip]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `frame` | `[data-motion-media-frame]` | optional | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add media-clip-reveal
+```
+
+### `media-curtain-split`
+
+Open two decorative curtains around media. Stage an editorial media reveal with paired curtains.
+
+- **Root:** `[data-motion-media-curtain]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `start` | `[data-motion-curtain-start]` | required | one |
+| `end` | `[data-motion-curtain-end]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add media-curtain-split
+```
+
+### `image-focus-pan`
+
+Scrub a restrained image focal movement through a scene. Add depth to decorative media while retaining its authored focal point.
+
+- **Root:** `[data-motion-image-focus-pan]`
+- **Triggers:** `scroll`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `image` | `[data-motion-focus-image]` | optional | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add image-focus-pan
+```
+
+### `video-poster-play`
+
+Transition a poster into native video playback. Start an accessible controlled video from a poster action.
+
+- **Root:** `[data-motion-video-poster]`
+- **Triggers:** `click`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `trigger` | `[data-motion-video-trigger]` | required | one |
+| `video` | `[data-motion-video-element]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add video-poster-play
+```
+
+## Hover, focus and pointer
+
+### `hover-media-switch`
+
+Synchronize pointer and keyboard focus with media state. Preview related media from a semantic list of triggers.
+
+- **Root:** `[data-motion-hover-group]`
+- **Triggers:** `hover`, `focus`
+- **Performance:** low
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `triggers` | `[data-motion-hover-key]` | required | many |
+| `media` | `[data-motion-hover-media]` | required | many |
+
+_No parameters._
+
+```bash
+npx synced-motion add hover-media-switch
+```
+
+### `expand-panels`
+
+Expand one panel from pointer or keyboard focus. Explore a compact group while keeping every panel accessible.
+
+- **Root:** `[data-motion-expand-group]`
+- **Triggers:** `hover`, `focus`
+- **Performance:** low
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `panels` | `[data-motion-expand-panel]` | required | many |
+
+_No parameters._
+
+```bash
+npx synced-motion add expand-panels
+```
+
+### `hover-lift`
+
+Lift a self-contained item on pointer hover or keyboard focus. Give a card or action restrained responsive feedback.
+
+- **Root:** `[data-motion-hover-lift]`
+- **Triggers:** `hover`, `focus`
+- **Performance:** low
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+_The root element is the only target._
+
+_No parameters._
+
+```bash
+npx synced-motion add hover-lift
+```
+
+### `magnetic-action`
+
+Draw an action gently toward a fine pointer. Add fine-pointer feedback without changing button semantics.
+
+- **Root:** `[data-motion-magnetic]`
+- **Triggers:** `pointer`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `action` | `[data-motion-magnetic-action]` | optional | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add magnetic-action
+```
+
+### `pointer-spotlight`
+
+Move a decorative spotlight inside a bounded region. Add local pointer atmosphere without affecting interaction.
+
+- **Root:** `[data-motion-pointer-spotlight]`
+- **Triggers:** `pointer`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `spotlight` | `[data-motion-spotlight]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add pointer-spotlight
+```
+
+## Navigation and overlays
+
+### `accessible-menu`
+
+Animate a controlled menu without weakening its keyboard behavior. Open and close a navigation overlay with managed focus.
+
+- **Root:** `[data-motion-menu]`
+- **Triggers:** `click`, `focus`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `trigger` | `[data-motion-menu-trigger]` | required | one |
+| `panel` | `[data-motion-menu-panel]` | required | one |
+| `items` | `[data-motion-menu-item]` | required | many |
+
+_No parameters._
+
+```bash
+npx synced-motion add accessible-menu
+```
+
+### `dialog-overlay`
+
+Present a native dialog with a restrained entrance and focus return. Open modal content without replacing native dialog semantics.
+
+- **Root:** `[data-motion-dialog-overlay]`
+- **Triggers:** `click`, `focus`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `trigger` | `[data-motion-overlay-trigger]` | optional | one |
+| `dialog` | `[data-motion-overlay-dialog]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add dialog-overlay
+```
+
+### `nav-active-indicator`
+
+Move a visual indicator between semantic navigation items. Reinforce current and focused navigation state.
+
+- **Root:** `[data-motion-nav-indicator]`
+- **Triggers:** `focus`, `pointer`, `click`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `items` | `[data-motion-nav-item]` | required | many |
+| `indicator` | `[data-motion-nav-active-indicator]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add nav-active-indicator
+```
+
+### `accordion-disclosure`
+
+Animate native disclosure content with transform and opacity. Give a native accordion restrained open-state feedback.
+
+- **Root:** `[data-motion-accordion-motion]`
+- **Triggers:** `click`
+- **Performance:** low
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `panel` | `[data-motion-accordion-panel]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add accordion-disclosure
+```
+
+### `command-palette`
+
+Open a searchable native dialog from a trigger or keyboard shortcut. Provide a fast keyboard-accessible command surface.
+
+- **Root:** `[data-motion-command-palette]`
+- **Triggers:** `click`, `focus`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `dialog` | `[data-motion-overlay-dialog]` | required | one |
+| `input` | `[data-motion-command-input]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add command-palette
+```
+
+## Loops, progress and ambient
+
+### `marquee`
+
+Run a seamless transform driven content loop. Create a pauseable, reduced-motion-safe horizontal loop.
+
+- **Root:** `[data-motion-marquee]`
+- **Triggers:** `load`, `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `track` | `[data-motion-marquee-track]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add marquee
+```
+
+### `counter-value`
+
+Count a readable value toward its authored result. Emphasize a metric without replacing its accessible output.
+
+- **Root:** `[data-motion-counter]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `value` | `[data-motion-counter-value]` | optional | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add counter-value
+```
+
+### `progress-ring`
+
+Draw an SVG progress ring to a bounded value. Show nonessential progress with a readable text equivalent.
+
+> **Needs DrawSVGPlugin.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-progress-ring]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `ring` | `[data-motion-progress-ring-value]` | required | one |
+| `label` | `[data-motion-progress-ring-label]` | optional | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add progress-ring
+```
+
+### `ambient-float`
+
+Float a decorative element while it is in view. Add restrained ambient movement without changing layout.
+
+- **Root:** `[data-motion-ambient-float]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+_The root element is the only target._
+
+_No parameters._
+
+```bash
+npx synced-motion add ambient-float
+```
+
+### `looping-logo-belt`
+
+Loop a duplicated logo track with viewport pausing. Present partner marks in a continuous reduced-motion-safe belt.
+
+- **Root:** `[data-motion-logo-belt]`
+- **Triggers:** `load`, `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `track` | `[data-motion-logo-belt-track]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add looping-logo-belt
+```
+
+## FLIP and layout
+
+### `flip-list-reorder`
+
+Animate application-owned list reordering through FLIP. Preserve spatial context when a semantic list changes order.
+
+> **Needs Flip.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-flip-list]`
+- **Triggers:** `state`
+- **Performance:** high
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `items` | `[data-motion-flip-item]` | required | many |
+
+_No parameters._
+
+```bash
+npx synced-motion add flip-list-reorder
+```
+
+### `flip-card-to-detail`
+
+Expand a card detail while retaining spatial continuity. Reveal card detail from a native action without disorienting layout jumps.
+
+> **Needs Flip.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-flip-card]`
+- **Triggers:** `click`
+- **Performance:** high
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `trigger` | `[data-motion-flip-card-trigger]` | required | one |
+| `detail` | `[data-motion-flip-card-detail]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add flip-card-to-detail
+```
+
+### `flip-filter-grid`
+
+Animate a semantic filtered grid between result sets. Keep items spatially understandable while native filter controls update results.
+
+> **Needs Flip.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-flip-filter]`
+- **Triggers:** `click`
+- **Performance:** high
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `controls` | `[data-motion-filter-control]` | required | many |
+| `items` | `[data-motion-filter-item]` | required | many |
+
+_No parameters._
+
+```bash
+npx synced-motion add flip-filter-grid
+```
+
+### `flip-nav-indicator`
+
+Move an inert indicator between semantic navigation items. Reinforce navigation focus and current state without changing semantics.
+
+> **Needs Flip.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-flip-nav]`
+- **Triggers:** `focus`, `click`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `items` | `[data-motion-flip-nav-item]` | required | many |
+| `indicator` | `[data-motion-flip-nav-indicator]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add flip-nav-indicator
+```
+
+### `layout-accordion-grid`
+
+Animate one expanded grid item while controls retain native semantics. Explore dense content with clear spatial continuity.
+
+> **Needs Flip.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-layout-accordion-grid]`
+- **Triggers:** `click`
+- **Performance:** high
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `items` | `[data-motion-layout-item]` | required | many |
+| `triggers` | `[data-motion-layout-trigger]` | required | many |
+
+_No parameters._
+
+```bash
+npx synced-motion add layout-accordion-grid
+```
+
+## SVG, path and morph
+
+### `svg-line-draw`
+
+Draw stroked SVG geometry as it enters the viewport. Introduce explanatory line art without hiding its meaning.
+
+> **Needs DrawSVGPlugin.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-svg-line-draw]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+_The root element is the only target._
+
+_No parameters._
+
+```bash
+npx synced-motion add svg-line-draw
+```
+
+### `svg-path-morph`
+
+Morph between compatible SVG path states from a native action. Show a meaningful visual state change in a compact illustration.
+
+> **Needs MorphSVGPlugin.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-svg-morph]`
+- **Triggers:** `click`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `source` | `[data-motion-svg-morph-source]` | required | one |
+| `target` | `[data-motion-svg-morph-target]` | required | one |
+| `trigger` | `[data-motion-svg-trigger]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add svg-path-morph
+```
+
+### `svg-icon-state`
+
+Morph a controlled icon between two pressed states. Reinforce a button state without replacing its accessible name.
+
+> **Needs MorphSVGPlugin.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-svg-icon-state]`
+- **Triggers:** `click`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `source` | `[data-motion-svg-icon-source]` | required | one |
+| `target` | `[data-motion-svg-icon-target]` | required | one |
+| `trigger` | `[data-motion-svg-trigger]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add svg-icon-state
+```
+
+### `svg-orbit`
+
+Move a decorative subject along an authored SVG path. Connect scroll progress to a bounded explanatory path.
+
+> **Needs MotionPathPlugin.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-svg-orbit]`
+- **Triggers:** `scroll`
+- **Performance:** high
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `subject` | `[data-motion-svg-orbit-subject]` | required | one |
+| `path` | `[data-motion-svg-orbit-path]` | required | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add svg-orbit
+```
+
+### `svg-signature-reveal`
+
+Draw a multi-stroke signature in authored order. Reveal a decorative signature while leaving the complete mark available without motion.
+
+> **Needs DrawSVGPlugin.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-svg-signature]`
+- **Triggers:** `viewport`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+_The root element is the only target._
+
+_No parameters._
+
+```bash
+npx synced-motion add svg-signature-reveal
+```
+
+## Page load and routing
+
+### `page-load-hero`
+
+Sequence local hero content after the page becomes interactive. Establish hierarchy with a restrained initial page entrance.
+
+- **Root:** `[data-motion-page-load-hero]`
+- **Triggers:** `load`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `items` | `[data-motion-page-load-item]` | required | many |
+
+_No parameters._
+
+```bash
+npx synced-motion add page-load-hero
+```
+
+### `page-load-brand-mark`
+
+Introduce a local brand mark without blocking content. Give a brand signature a short, nonblocking entrance.
+
+- **Root:** `[data-motion-page-load-brand]`
+- **Triggers:** `load`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `mark` | `[data-motion-brand-mark]` | optional | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add page-load-brand-mark
+```
+
+### `route-fade`
+
+Coordinate outgoing and incoming route regions through a scoped event. Soften application-owned route replacement without owning navigation.
+
+- **Root:** `[data-motion-route-fade]`
+- **Triggers:** `route`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `outgoing` | `[data-motion-route-outgoing]` | optional | one |
+| `incoming` | `[data-motion-route-incoming]` | optional | one |
+
+_No parameters._
+
+```bash
+npx synced-motion add route-fade
+```
+
+### `route-shared-media`
+
+Animate application-owned shared media placement through FLIP. Preserve visual continuity while a router changes page structure.
+
+> **Needs Flip.** Import from `@syncedco/motion/full`, or pass the plugin through `dependencies`.
+
+- **Root:** `[data-motion-route-shared-media]`
+- **Triggers:** `route`
+- **Performance:** high
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+| Slot | Selector | Required | Count |
+| --- | --- | --- | --- |
+| `media` | `[data-motion-shared-media]` | required | many |
+
+_No parameters._
+
+```bash
+npx synced-motion add route-shared-media
+```
+
+### `route-scroll-restore`
+
+Restore application-provided scroll position after route completion. Keep route navigation position predictable and refresh scroll measurements.
+
+- **Root:** `[data-motion-route-scroll-restore]`
+- **Triggers:** `route`
+- **Performance:** medium
+- **Reduced motion:** final — Preserve the authored readable final state.
+- **Without JavaScript:** Content and controls remain available in their authored final state.
+- **Accessibility:** Motion does not change document order; interactive semantics remain native.
+
+_The root element is the only target._
+
+_No parameters._
+
+```bash
+npx synced-motion add route-scroll-restore
+```