@nerdev/skillset 0.2.1

package/skills/ui/animaxxing/SKILL.md

@@ -0,0 +1,58 @@
+---
+name: animaxxing
+description: "Build reusable GSAP text and particle effects while preserving the project's design: split-text entrances, scattering headlines, speak-in copy, letter waves, particle buttons/cards, and blast-off exits. Use for Animaxxing motion, expressive animation, or these individual effects without a restyle. Pair with the matching GSAP framework skill for lifecycle ownership. Not for choosing a brand, redesigning layout, framework routing, or isolated GSAP API questions."
+license: MIT
+metadata:
+  short-description: Reusable GSAP text and particle motion for any brand
+---
+
+# Animaxxing
+
+Portable vanilla TypeScript and GSAP recipes drawn from Animaxxing. Keep the project's fonts, colors, layout, and component styling. No style skill, design tokens, or particular font family is required.
+
+Read the matching `gsap-<framework>` skill first (including `gsap-vanilla` for plain sites). It owns **mount → initial state → intro → settled → outro → end state → unmount**, initialization, navigation, recovery, interruption, and cleanup timing. This skill supplies effect builders its controller calls. Install the matching framework skill if unavailable; do not invent framework lifecycle guidance here.
+
+## Setup and adaptation
+
+- Check installed GSAP docs/types. SplitText recipes require 3.13+ (`SplitText.create`, `smartWrap`, `mask`, `aria`); register only the plugins used. Use the official GSAP skills for API details as needed.
+- Select only effects the request calls for. A particle button does not imply a page transition, a font change, or a complete hero sequence.
+- Recipe constants are editable defaults, not brand rules. Adapt timing, stagger, spread, and intensity to the surface. Use each recipe's documented options; expose additional constants in the copied module if the app needs runtime configuration.
+- Weight effects require a loaded variable weight axis, not Rethink Sans. Match endpoints and resting weight to the existing face; the examples use 400–800. Choose transform-only effects or omit weight moves when that capability is absent.
+- Particle canvases use their computed CSS `color`; inherit or assign an existing brand color with suitable contrast. Keep existing control geometry and focus styling.
+- Use `style-animaxxing` only when its visual design is requested. It selects and configures these recipes for the full Animaxxing look.
+
+## Read only what you need
+
+| Task | Reference |
+|---|---|
+| Choose in/out effects, configure defaults, coordinate with the controller | [Motion vocabulary](references/motion-vocabulary.md) |
+| Character animation: font readiness, kerning, masks, stable split/revert | [Text stability](references/text-stability.md) |
+| Character, word, line, or scramble entrances/exits | [Split entrances](references/recipes/split-entrances.md) |
+| Page items, including scattering headlines | [Route letters](references/recipes/route-letters.md) |
+| Short display copy arriving at speaking pace | [Speak-in](references/recipes/speak-in.md) |
+| Ambient headline ripple | [Wave](references/recipes/wave.md) |
+| Dispersal on a call to action | [Blast-off](references/recipes/blast-off.md) |
+| Particle buttons, cards, links, or command fields | [Particle effects](references/recipes/particle-effects.md) plus [field/attach helpers](references/recipes/particle-field.md) |
+| Roll back partial setup and restore modified content | [Effect restoration](references/effect-restoration.md) |
+| Verify effects and reuse on another brand | [Verification](references/verification.md), then the framework's relevant checks |
+
+## Recipe contract
+
+Copy only the selected recipe and its named local helpers. Return shapes differ: timelines, `{ timeline, revert }`, stop functions, and particle controls are documented per recipe; do not assume one universal interface.
+
+| Framework phase | Effect responsibility |
+|---|---|
+| initial state | Targets prepared under the framework's pre-paint/no-script mechanism |
+| intro | Entrance builder or `enter(delay)` |
+| settled | Clear temporary styles; optional `idle()` or wave |
+| outro | Exit builder, `exit()`, or `blastOff(...)` |
+| end state | Notify completion; controller decides the next action |
+| unmount | Controller calls the recipe's stop, `destroy`, or `revert` handle |
+
+- Apply the [effect restoration contract](references/effect-restoration.md) when copying a recipe, including failure before a handle returns.
+- Builders do not navigate, mount, remount, or subscribe to page lifecycle changes. The framework controller calls them and owns phase state.
+- Retain required split markup only while an effect needs it (speak-in finishes and an active wave are exceptions to immediate revert). Revert on the controller's cleanup boundary; preserve accessible text and nested controls.
+- Use `overwrite: "auto"`; clear temporary styles and `will-change` when their phase ends.
+- Reduced motion reaches the documented settled or exit state and preserves completion callbacks. Use the project's preference helper, including any app override; no ambient motion under reduced motion.
+- Avoid competing effects on a target. Expose controls so the owner can pause ambient motion off screen and stop it on exit. Pointer states need keyboard parity.
+- Width changes can invalidate split measurements; report those requirements to the framework controller. Recipes do not prescribe page remounts.

package/skills/ui/animaxxing/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: "Animaxxing"
+  short_description: "Reusable GSAP text and particle motion for any brand"
+  default_prompt: "Use $animaxxing with the matching GSAP framework skill to add text and particle effects while preserving this site's design."
+
+policy:
+  allow_implicit_invocation: true

package/skills/ui/animaxxing/references/effect-restoration.md

@@ -0,0 +1,26 @@
+# Effect restoration
+
+Apply this when adapting any recipe. The examples show effects, not a complete failure boundary. The installed `gsap-<framework>` skill owns initialization deadlines, visit tokens, navigation, and recovery timing. Its controller needs rollback registered before effect setup, not just a handle returned afterward.
+
+## Builder guarantees
+
+- Capture original values only for properties and DOM the effect changes. Preserve existing inline styles, accessible text, nested links, and controls.
+- Acquire resources inside a guarded setup block. Register each disposer immediately after acquisition, before the next operation can throw. A split created before a later tween fails still needs reverting.
+- On a construction exception, stop acquired work, undo partial changes, then rethrow for the framework to settle its owner. Attempt every disposer even if one fails. Do not wait for an `onComplete` that will never run.
+- Return an idempotent teardown or register one with the controller. Existing timeline-only builders need context ownership plus explicit teardown for non-GSAP resources; `timeline.kill()` alone is not DOM restoration.
+- Stop writers before restoring values: timelines, delayed calls, tickers, resize/font observers, and pointer/focus listeners. The controller invalidates async work before invoking teardown.
+- Revert nested splits inside out. Use plugin revert handles on isolated text leaves. SplitText revert reconstructs descendants from saved HTML; it does not preserve their node identity or attached listeners. Keep framework-bound children and controls outside the split target, or animate a separate visual copy while preserving accessible controls. Never restore a framework subtree with your own saved `innerHTML`. Restore ARIA changes and avoid duplicate accessible text.
+- Undo effect-owned masks, clipping, child opacity, transforms, weight, pinned widths, and suspended CSS transitions. Preserve normal hidden states and unrelated application styles. Avoid blanket `clearProps: "all"` in shared targets.
+- A disposer does not navigate, release route locks, focus another page, replay ambient effects, or decide which page becomes visible. It restores its changes; the controller applies the correct settled or end state afterward.
+
+## Recipe-specific resources
+
+| Recipe | Teardown must cover |
+|---|---|
+| Split entrances / route letters | Timelines, every split, masks, original item styles, and any suspended CSS transition. |
+| Speak-in | Nested word/character splits, persistent tilt/weight finishes, widths, and timeline callbacks. |
+| Wave | Scheduled next cycles, active tweens, splits, pinned glyph widths, and inline weight. |
+| Blast-off | Tweens and splits across the composition, including container transforms and button changes. |
+| Particle field/effects | Ticker callbacks, emitters, particles/tweens, observers, event listeners, and effect-owned canvas/wrapper styles. |
+
+Reduced motion preserves normal completion without creating unnecessary split or particle resources. Recovery teardown must also be safe when setup returned early or completed already. The controller decides whether essential completion still needs to run once.

package/skills/ui/animaxxing/references/motion-vocabulary.md

@@ -0,0 +1,142 @@
+# Motion vocabulary
+
+Read this to select and adapt reusable effects. The framework skill decides when each phase runs. Existing design or an explicitly selected style determines which surfaces receive them; none of the recipes requires the Animaxxing layout or palette.
+
+## Tokens
+
+The examples use three durations, three eases, and three distances. These are editable starting points: micro 0.14s / 4px, component 0.2s / 8px, page 0.28s / 16px; entrance `power2.out`, exit `power2.in`, shift `power2.inOut`. Reuse the consuming app's motion values where appropriate. Recipe-specific display sequences can run longer. No token file is required. Transforms, `autoAlpha`, `clip-path`, blur, and `fontWeight` only; never `width`, `height`, `top`, `left`, `color`, or `display`. Timeline defaults are `{ overwrite: "auto" }`.
+
+Reduced motion uses a `set()` to reach the documented entrance or exit state, so the timeline still completes and every callback still fires.
+
+```ts
+export function prefersReducedMotion(): boolean {
+  if (typeof window === "undefined") return true;
+  const choice = document.documentElement.dataset.motion;
+  if (choice === "reduced") return true;
+  if (choice === "full") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+```
+
+`data-motion` on `<html>` is an optional app-level override (`full` or `reduced`) so reduced motion can be reviewed without changing system settings. Every builder reads the helper when it builds, so an override applies to the next animation at once. If the project already has a helper, use it everywhere instead.
+
+## The shelf: paired entrances and exits
+
+Named in/out pairs, each built the same way. Pick from the shelf by watching them, then promote the one a screen uses under a name that says what it is for.
+
+```ts
+import gsap from "gsap";
+
+type MotionOptions = { delay?: number; stagger?: number; onComplete?: () => void };
+type MotionTarget = gsap.TweenTarget;
+type Pair = (target: MotionTarget, options?: MotionOptions) => gsap.core.Timeline;
+
+function build(options: MotionOptions): gsap.core.Timeline {
+  const tl = gsap.timeline({ delay: options.delay ?? 0, defaults: { overwrite: "auto" } });
+  if (options.onComplete) tl.eventCallback("onComplete", options.onComplete);
+  return tl;
+}
+
+/** Builds an in/out pair from vars, with the reduced path handled once. */
+function pair(from: gsap.TweenVars, to: gsap.TweenVars, settledIn: gsap.TweenVars, outVars: gsap.TweenVars): [Pair, Pair] {
+  const entrance: Pair = (target, options = {}) => {
+    const tl = build(options);
+    if (prefersReducedMotion()) return tl.set(target, { autoAlpha: 1, ...settledIn });
+    return tl.fromTo(target, from, { ...to, stagger: options.stagger ?? 0 });
+  };
+  const exit: Pair = (target, options = {}) => {
+    const tl = build(options);
+    if (prefersReducedMotion()) return tl.set(target, { autoAlpha: 0 });
+    return tl.to(target, { ...outVars, stagger: options.stagger ?? 0 });
+  };
+  return [entrance, exit];
+}
+
+const SETTLED = { x: 0, y: 0, scale: 1, rotationX: 0, filter: "blur(0px)" };
+```
+
+| Pair | From | In | Out | When |
+|---|---|---|---|---|
+| `fadeIn` / `fadeOut` | `{ autoAlpha: 0 }` | `{ autoAlpha: 1, duration: 0.2, ease: "power2.out" }` | `{ autoAlpha: 0, duration: 0.14, ease: "power2.in" }` | The plainest thing there is. |
+| `riseIn` / `riseOut` | `{ autoAlpha: 0, y: 8 }` | `{ autoAlpha: 1, y: 0, 0.2, power2.out }` | `{ autoAlpha: 0, y: -4, 0.14, power2.in }` | The workhorse: anything just committed. |
+| `dropIn` / `dropOut` | `{ autoAlpha: 0, y: -8 }` | `{ y: 0, 0.2, power2.out }` | `{ y: 4, 0.14, power2.in }` | Things that interrupt: a status, a banner. |
+| `slideInLeft` / `slideOutLeft` | `{ autoAlpha: 0, x: -16 }` | `{ x: 0, 0.2, power2.out }` | `{ x: -8, 0.14, power2.in }` | A pane from the left edge. Mirror for right. |
+| `scaleIn` / `scaleOut` | `{ autoAlpha: 0, scale: 0.96 }` | `{ scale: 1, 0.2, power2.out }` | `{ scale: 0.98, 0.14, power2.in }` | Reads as focus, not zoom. |
+| `popIn` / `popOut` | `{ autoAlpha: 0, scale: 0.4 }` | `{ scale: 1, 0.2, "back.out(2.4)" }` | `{ scale: 0.6, 0.14, "back.in(2)" }` | Small and infrequent. |
+| `wipeUp` / `wipeDown` | `{ clipPath: "inset(0% 0% 100% 0%)" }` | `{ clipPath: "inset(0% 0% 0% 0%)", 0.28, power2.out }` | `{ clipPath: "inset(100% 0% 0% 0%)", 0.2, power2.in }` | The most editorial. Settled vars: the open inset. |
+| `wipeAcross` / `wipeBack` | `{ clipPath: "inset(0% 100% 0% 0%)" }` | same, 0.28 | `{ clipPath: "inset(0% 0% 0% 100%)", 0.2 }` | Rules, bars, code lines. |
+| `flipIn` / `flipOut` | `{ autoAlpha: 0, rotationX: -60, transformPerspective: 800, transformOrigin: "50% 0%" }` | `{ rotationX: 0, 0.28, power2.out }` | `{ rotationX: 25, 0.2, power2.in }` | The loudest. Almost never. |
+| `focusIn` / `focusOut` | `{ autoAlpha: 0, filter: "blur(8px)" }` | `{ filter: "blur(0px)", 0.28, power2.out }` | `{ filter: "blur(6px)", 0.2, power2.in }` | Costly to paint; one element at a time. |
+| `weightIn` / `weightOut` | `{ autoAlpha: 0, fontWeight: 400, y: 4 }` | `{ fontWeight: 800, y: 0, 0.28, power2.inOut }` | `{ fontWeight: 400, 0.2, power2.inOut }` | Type that gains its weight as it arrives. Settled: `{ fontWeight: 800, y: 0 }`. |
+
+Table entries abbreviate `duration` and `ease`; they are not copyable object literals. Every entrance merges `autoAlpha: 1` into its destination and every exit merges `autoAlpha: 0`. Wipes keep `autoAlpha: 1` at both ends and animate only the clip. Pass the matching settled vars to `pair`.
+
+## Split families
+
+Use character effects on display type such as headings. Keep ordinary reading text immediately readable; use speak-in only for selected short display copy. Keep the existing type scale and font family.
+
+| Family | Split | Move | Role |
+|---|---|---|---|
+| `charsRiseIn` | chars, masked | `yPercent: 115 → 0`, 0.5s, `power3.out`, stagger 0.03 | Masked character reveal. Check [mask ink clearance](text-stability.md#apparent-weight-change-from-clipped-glyph-ink) for tight type. |
+| `charsSpringIn` | chars, unmasked | `yPercent: 115`, `autoAlpha`, 1.1s, `elastic.out(1, 0.5)` | An elastic character entrance. Unmasked because the overshoot would clip. |
+| `charsCascadeIn` / `Out` | chars | `y: -18`, random `rotation ±14`, `back.out(1.8)`, stagger 0.02 from random | A dealer flicking cards. |
+| `charsFlipIn` / `Out` | chars | `rotationX: -90` about the top edge | Each letter tips over. |
+| `charsScatterIn` / `Out` | chars | random `x ±120`, `y ±60`, `rotation ±45`, `scale 0.6`, `power3.out`, stagger from center | Letters converge from wherever they were thrown. The route version scales the spread to the viewport. |
+| `charsWeightWave` | chars, widths pinned | `fontWeight` dips to the far end of the axis and back, stagger 0.03 | A wave of weight through a line. |
+| `wordsSlideIn` / `Out` | words | `x ±40` alternating sides, `power2.out`, stagger 0.05 | Words zip together. |
+| `linesMaskIn` / `Out` | lines, masked | `yPercent: 110 → 0`, 0.28s, `power3.out`, stagger 0.05 | Whole lines wiped up behind masks. |
+| `scrambleIn` / `Out` | none | ScrambleText over `01{}/<>()=;` | Text resolving out of noise. Display only; needs ScrambleTextPlugin. |
+
+Split entrances use `aria: "auto"` and revert when their timeline completes. Under reduced motion nothing is split; the text is simply already there. Code is in [split-entrances.md](recipes/split-entrances.md).
+
+Weight moves require a variable face. The table and recipe examples use 400–800; adapt endpoints and the resting weight to the loaded axis, or choose effects without weight motion. Do not change the font to enable an effect. Weight moves pin each character to its width at the heaviest weight it will reach, `display: inline-block; text-align: center`, so the axis can move without letters shoving each other along the line.
+
+## Route grammar
+
+When a page transition is requested, its selected elements opt in with a `data-page-transition` attribute. These markers belong to the route recipe and do not require a particular page layout. The outro orders items in reverse document order; the intro uses document order. The framework controller determines the swap timing. A page with no marked elements is treated as one whole-page item.
+
+| Value | Entrance | Exit |
+|---|---|---|
+| `""` (standard) | `autoAlpha 0, y 16 → 0`, 0.42s, `power3.out`, stagger 0.09. Starts at `enter+=0.89` when the page has letters, else at `enter`. | `autoAlpha 0, y -8`, 0.22s, `power2.in`, each item 0.055s after the previous. |
+| `letters` | Split to chars. Each starts at random `x ±60vw`, `y ±60vh`, `rotation ±90`, `scale 0.5`, hidden. After a 0.75s hold, 0.75s `power4.out`, stagger 0.02 from random. | Chars fly back out to the same spread at `scale 1.6`, 0.28s, `power2.in`, stagger 0.012 from edges, 0.1s after the standard items start. |
+| `letters-sides` | Chars alternate from `x ∓60vw`, no vertical spread. 0.6s `power4.out`, stagger 0.012 from center, starting 0.14s after the letters. | Same sides, 0.24s, stagger 0.008 from center. |
+| `slide-horizontal` | `autoAlpha 0, x -16 → 0`, 0.2s, `power2.out`, 0.09s after the standard items. Its own CSS transition is suspended for the tween. | `x 8`, 0.14s, `power2.in`. |
+
+Reduced motion: `set(items, { autoAlpha: 1 })` on enter, `set(items, { autoAlpha: 0 })` on exit. Code is in [route-letters.md](recipes/route-letters.md).
+
+### Transition state
+
+The page container reports its phase on `data-transition-state`:
+
+| Value | Framework phase | Meaning |
+|---|---|---|
+| `entering` | intro | The intro timeline is running. Surface effects that play alongside it start here. |
+| `idle` | settled | Intro complete, splits reverted, temporary styles cleared. Effects that need the letters back (the wave) start here. |
+| `exiting` | outro | The outro is running. Every effect winds down. |
+| `waiting` | end state | The outro finished. The page is sealed until the framework swaps it. |
+
+These are optional labels for the framework controller's existing phase state. It invokes surface controls directly; recipes do not observe the document or own phase transitions.
+
+### Pre-paint hiding
+
+The framework controller applies its pre-paint/no-script mechanism to the recipe's targets: `data-page-transition`, `data-speak-intro`, `data-hero-actions`, `data-particle-card`, and any shell/logo/footer intro hooks used. Keep them hidden only until their initial values are ready; `autoAlpha: 1` reveals them. A hidden particle wrapper also needs an explicit reveal because revealing its child cannot reveal the wrapper.
+
+Register recipe rollback before hiding or splitting. Restore partial DOM/style changes through [effect restoration](effect-restoration.md); removing a CSS marker alone is insufficient. The matching installed framework skill’s `references/initialization.md` owns deadlines and late-work guards.
+
+If the controller uses `waiting` for its swap barrier, it owns that rule and its release. Do not add unconditional hiding CSS or a separate readiness mechanism here.
+
+## Resize
+
+Width changes can invalidate split positions and the wave's pinned character widths; height-only changes from mobile browser chrome do not. Keep text readable during a resize. Particle fields remeasure through their own observers.
+
+The framework controller decides whether to rebuild an affected effect or replay an entrance. Supply fresh measurements when called; no recipe remounts the page or resets page state. Reduced motion stays settled.
+
+## Ambient motion
+
+Loops that run while a surface idles: the letter wave on a headline, embers off a button, a runner on a card outline. Rules:
+
+- Avoid competing ambient effects on the same target. A style can select a wave for a headline or particles for a button, but neither is required.
+- Expose controls for the framework controller to call at settled, outro, and unmount; it owns those signals.
+- Pause off screen. The particle field does this through an `IntersectionObserver`; the wave should be stopped by the same signal if the headline can scroll away.
+- Every cycle ends exactly where it started. The wave clears its transforms; embers die.
+- Never under reduced motion. The helper returns before anything is split or spawned.

package/skills/ui/animaxxing/references/recipes/blast-off.md

@@ -0,0 +1,119 @@
+# Recipe: blast off
+
+Failure contract: apply [effect restoration](../effect-restoration.md) when adapting this module. The framework controller chooses recovery timing. this effect must undo even partial setup.
+
+The hero's outro when a call to action presses: the whole composition throws apart from the pressed button outward, fast. Headline letters fly away from it and tumble, the subhead's words drop off the page, the pressed button flares out while the others collapse, and the page rocks. The timeline reverses, so the same motion played backward pulls everything back.
+
+The framework skill's controller calls `blastOff` as the outro that precedes navigation and hands off once the page clears. this module never decides when and never navigates. Pair it with the particle `blast()` of the pressed button.
+
+Dependencies: `gsap`, `gsap/SplitText`.
+
+Setup: use [stable typography for character animation](../text-stability.md#stable-typography-for-character-animation) before creating splits. keep that target CSS after revert and under reduced motion. Verify the split-to-unsplit boundary with the [cleanup checks](../verification.md#splittext-cleanup-stability).
+
+```ts
+import gsap from "gsap";
+import { SplitText } from "gsap/SplitText";
+
+gsap.registerPlugin(SplitText);
+
+function prefersReducedMotion(): boolean {
+  if (typeof window === "undefined") return true;
+  const choice = document.documentElement.dataset.motion;
+  if (choice === "reduced") return true;
+  if (choice === "full") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+const rnd = gsap.utils.random;
+/** Fast is the point. */
+const LETTER_TIME: [number, number] = [0.4, 0.6];
+const WORD_TIME: [number, number] = [0.32, 0.5];
+
+export type BlastOffOptions = {
+  /** The hero container: it gets the shake. */
+  root: HTMLElement;
+  heading: HTMLElement;
+  /** The subhead's words, already split by speakIn; they are animated in place. */
+  words: HTMLElement[];
+  pressed: HTMLElement;
+  others: HTMLElement[];
+};
+
+export type BlastOff = {
+  timeline: gsap.core.Timeline;
+  /** Puts the headline markup back. Call once the timeline is done with, either way. */
+  revert: () => void;
+};
+
+function centre(el: Element): { x: number; y: number } {
+  const r = el.getBoundingClientRect();
+  return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+}
+
+export function blastOff({ root, heading, words, pressed, others }: BlastOffOptions): BlastOff {
+  if (prefersReducedMotion()) {
+    const timeline = gsap.timeline().set([heading, ...words, pressed, ...others], { autoAlpha: 0 });
+    return { timeline, revert: () => { timeline.revert(); } };
+  }
+  const origin = centre(pressed);
+  const split = SplitText.create(heading, { type: "chars,words" });
+  const chars = split.chars as HTMLElement[];
+  const timeline = gsap.timeline({ defaults: { overwrite: "auto" } });
+
+  // The page rocks the instant the button is pressed.
+  timeline
+    .to(root, { x: () => rnd(-8, 8), y: () => rnd(-5, 5), duration: 0.04, repeat: 7, yoyo: true, ease: "none" }, 0)
+    .set(root, { x: 0, y: 0 }, ">");
+
+  // The pressed button flares and burns out; the others fold in on themselves.
+  timeline.to(pressed, { scale: 1.35, autoAlpha: 0, filter: "blur(14px)", duration: 0.28, ease: "power4.out" }, 0);
+  if (others.length > 0) {
+    timeline.to(others, { scale: 0, rotation: () => rnd(-200, 200), autoAlpha: 0, duration: 0.32, ease: "back.in(2.5)" }, 0.02);
+  }
+
+  // Letters are thrown straight away from the pressed button, each tumbling on its own.
+  gsap.set(chars, { willChange: "transform, opacity" });
+  for (const char of chars) {
+    const c = centre(char);
+    const angle = Math.atan2(c.y - origin.y, c.x - origin.x) + rnd(-0.45, 0.45);
+    const distance = rnd(340, 820);
+    timeline.to(
+      char,
+      {
+        x: Math.cos(angle) * distance,
+        y: Math.sin(angle) * distance,
+        rotation: rnd(-720, 720),
+        scale: rnd(0.3, 2.4),
+        autoAlpha: 0,
+        duration: rnd(LETTER_TIME[0], LETTER_TIME[1]),
+        ease: "expo.out",
+      },
+      rnd(0, 0.1),
+    );
+  }
+
+  // Words lose their footing and drop off the bottom, spinning.
+  for (const word of words) {
+    timeline.to(
+      word,
+      { x: rnd(-360, 360), y: rnd(260, 620), rotation: `+=${rnd(-240, 240)}`, autoAlpha: 0, duration: rnd(WORD_TIME[0], WORD_TIME[1]), ease: "power2.in" },
+      rnd(0, 0.14),
+    );
+  }
+
+  return {
+    timeline,
+    revert: () => {
+      // revert() puts every target back exactly as it was, including the words' resting tilts.
+      timeline.revert();
+      split.revert();
+      gsap.set([pressed, ...others], { clearProps: "filter" });
+      gsap.set(root, { clearProps: "transform" });
+    },
+  };
+}
+```
+
+## Controller contract
+
+`blastOff({ root, heading, words, pressed, others })` returns `{ timeline, revert }`. Stop competing headline/particle effects before calling it. Keep any speak-in word handles valid while the blast uses them. The framework controller consumes timeline completion and invokes `revert` when the visual no longer needs its split. navigation and cancellation policy belong to that controller.