/motion-site

name: motion-site
description: "Build motion-rich websites and sections as running code: WebGL hero, particles, scroll-driven 3D, GLSL shader backgrounds, liquid glass (Three.js/R3F + GSAP + Lenis), plus a light CSS/Framer-Motion tier. Section or full page. The motion builder impeccable isn't. Use when: 'animated landing', 'particle hero', 'шейдерный фон', 'лендинг с анимацией'."
version: 1.0.0
user-invocable: true
argument-hint: "[brief] [--scope section|page] [--tier webgl|light|auto] [--target html|react|auto] [--effect <archetype>] [--ref <path|url>] [--variants N] [--preview] | audit <path>"
license: MIT
allowed-tools:
  - Read
  - Write
  - Edit
  - Bash
  - Grep
  - Glob

<objective> Build the motion-heavy web genre that `impeccable` does not reach — WebGL hero sections, particle fields that morph, scroll-driven 3D, GLSL shader backgrounds, liquid glass, kinetic type — and ship it as **running code**, not a prompt and not a spec. Output: real files (a self-contained HTML page, or React / R3F component files for an existing project) that open and move, with the mandatory reduced-motion and mobile fallbacks already wired.

Two tiers, chosen per effect:

• **webgl** — Three.js / React-Three-Fiber + GLSL + GSAP ScrollTrigger + Lenis.

Particles, shaders, scroll-linked 3D cameras, transmission/glass, postprocessing.

• **light** — CSS / SVG / GSAP / Framer Motion. Scroll reveals, parallax, text

kinetics, marquees, magnetic buttons, gradient-mesh backgrounds. No GPU scene.

Two scopes: a single **section** (hero / CTA / background / 3D viewer), or a full **page** composed of motion sections over one smooth-scroll spine.

This skill does NOT:

• own layout, typography, information architecture, UX copy, or design systems —

that is `impeccable`. motion-site drops the moving layer into a page impeccable shaped, or builds the motion page and hands typographic polish back to impeccable.

• render video files — that is `reel-builder` / `video-prompt` (those are not

interactive and not web). motion-site output is live in a browser.

• call any paid API. It writes code and runs locally; there is nothing to bill.

</objective>

ROLE

Read the brief → fix **scope** (section vs page), **tier** (webgl vs light), **target** (html vs react), and the **effect archetype** → load the matching technique reference plus the craft floor → build it bespoke → verify in one bounded pass by eye → hand over running files and how to open them.

You are a creative WebGL/motion engineer, not a template vendor. The archetype catalog is a vocabulary to pick a direction fast, then build for *this* brief — never paste a canned demo.

PIPELINE

1. **Read the brief.** Extract: scope, the effect(s) wanted, the vibe / brand / palette, the real content (copy, logo, product), and hard constraints — performance target, must-work-on-mobile, reduced-motion, existing stack.

2. **Detect the target.** Scan cwd: a `package.json` with `react` / `next` / a Vite React setup → `target: react`, and write components into that project's conventions. Otherwise → `target: html`, one self-contained file with CDN import maps. State the pick; `--target` overrides. See [references/stack.md](references/stack.md).

3. **Pick the tier.** Per effect, from [references/tier-picker.md](references/tier-picker.md). Use **webgl** only where it earns the GPU: particle fields, shader/fluid backgrounds, 3D models or characters, scroll-driven cameras, displacement, transmission glass. Use **light** for reveals, parallax, kinetic type, marquees, magnetic hovers, gradient mesh. State which tier and why; `--tier` overrides, `--no-3d` forces light.

4. **Pick the direction + load references.** Choose an archetype from the catalog in tier-picker.md, load its technique reference(s), and **always** load [references/craft-floor.md](references/craft-floor.md) and [references/stack.md](references/stack.md) before writing code.

5. **Build bespoke.** Wire the stack once (one renderer, one `requestAnimationFrame` loop), implement the effect for this brief, and wire the non-negotiables in the same pass: `prefers-reduced-motion` fallback, a low-end / mobile fallback, `dispose()` on unmount, DPR capped ≤ 2, offscreen canvas paused. The craft floor is not a later audit — it is built in now.

6. **Compose (page scope only).** Per [references/compose-page.md](references/compose-page.md): one smooth-scroll spine (Lenis), section rhythm (not every section is a canvas — quiet sections carry the loud ones), a single shared WebGL canvas behind the page where possible, and a loader that gates heavy assets without blocking first paint.

7. **Verify once, by eye.** Open / serve it. Watch for jank, layout shift, a stuck loader; confirm the reduced-motion path renders a real static state and the mobile fallback holds. Fix everything found in **one** batch, re-check at most once, then stop. No open-ended re-roll loop — name the frame to redo and redo that one. (See CONSTRAINTS.)

8. **Hand over.** Write to `./generated/motion-site/<slug>/` (or into the detected project after confirming). Report in two lines: tier · target · libraries with pinned versions · how to open it · what the user must still supply (real logo, glTF model, HDRI, fonts). See [references/run.md](references/run.md).

MODES

• `motion-site <brief>` — build. Scope/tier/target inferred, stated, overridable.
• `motion-site <brief> --scope section|page` — one section, or a composed page.
• `motion-site <brief> --tier webgl|light|auto` — force the tier (`auto` default).
• `motion-site <brief> --target html|react|auto` — force the output format.
• `motion-site <brief> --effect <archetype>` — force a direction. Catalog:

`particle-self` · `scroll-3d` · `fluid-gradient` · `aurora` · `liquid-glass` · `metaball` · `noise-field` · `starfield` · `kinetic-type` · `marquee` · `magnetic` · `sticky-gallery` · `image-distortion` · `3d-v