transitions-refine 0.1.0

package/.agents/skills/transitions-dev/11-avatar-group-hover.md

@@ -0,0 +1,200 @@
+# Avatar group hover
+
+## When to use
+
+Hovering an item in a horizontal stack (avatar row, chip group, badge cluster, segmented button) should lift the hovered item, gently lift its neighbors with a power-falloff, then snap everything back with an overshoot spring on `mouseleave`. Direction-aware easing (clean ease-in on hover, bouncy ease-out on return) is what gives the group its springy, physical feel.
+
+Equally good for: pill stacks in a tag editor, chips in a filter bar, reaction-emoji rows, anywhere a horizontal row benefits from a "comb" interaction signal.
+
+## HTML usage
+
+```html
+<!-- Apply .t-avatar to each item in your group (avatar,
+     chip, badge, button — anything). Bring your own size,
+     shape, and stacking; this stylesheet only owns the
+     hover transform + transition. -->
+<div class="t-avatar-group">
+  <div class="t-avatar"><!-- your item --></div>
+  <div class="t-avatar"><!-- your item --></div>
+  <!-- … -->
+</div>
+```
+
+Wire-up (vanilla JS):
+  On `mouseenter` of any .t-avatar, walk every sibling and
+  set inline:
+    el.style.setProperty('--shift',
+      (lift * Math.pow(falloff, distance)).toFixed(3) + 'px');
+    el.style.setProperty('--scale-active',
+      i === activeIdx ? scale : 1);
+  Set transition-timing-function inline BEFORE the
+  variable writes — use --avatar-ease-in on hover-in and
+  --avatar-ease-out on the root's `mouseleave` (resets
+  --shift to 0 and --scale-active to 1).
+
+## Tunable variables
+
+| Variable | Default | Notes |
+| --- | --- | --- |
+| `--avatar-lift` | `-4px` | sourced from `--p11-lift` |
+| `--avatar-dur` | `320ms` | sourced from `--p11-dur` |
+| `--avatar-scale` | `1.05` | sourced from `--p11-scale` |
+| `--avatar-falloff` | `0.45` | sourced from `--p11-falloff` |
+| `--avatar-ease-in` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p11-ease-in` |
+| `--avatar-ease-out` | `cubic-bezier(0.34, 3.85, 0.64, 1)` | sourced from `--p11-ease-out` |
+
+The `:root` defaults below match the live tuning on [transitions.dev](https://transitions.dev). Drop them into your global stylesheet once — every transition in this skill reads from semantic names like these, so multiple transitions can share a single `:root` block.
+
+```css
+:root {
+  --avatar-lift: -4px;
+  --avatar-dur: 320ms;
+  --avatar-scale: 1.05;
+  --avatar-falloff: 0.45;
+  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
+  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
+}
+```
+
+## CSS
+
+```css
+/* Hover-spring transition only — bring your own avatar/chip
+   styling (size, shape, border, stacking, background). */
+.t-avatar {
+  transform-origin: center;
+  /* translateY before scale so scale doesn't amplify the lift offset. */
+  transform:
+    translateY(var(--shift, 0px))
+    scale(var(--scale-active, 1));
+  transition: transform var(--avatar-dur) var(--avatar-ease-in);
+  will-change: transform;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-avatar { transition: none !important; transform: none !important; }
+}
+```
+
+The `@media (prefers-reduced-motion: reduce)` guard at the bottom of the snippet is required — keep it. It zeroes the transition for users who have asked for less motion at the OS level.
+
+## JavaScript orchestration
+
+```js
+// Distance-falloff lift with direction-aware easing. The trick
+// is setting transition-timing-function inline BEFORE writing the
+// CSS variables — the browser uses whatever timing-function is
+// current at the moment a transitionable property changes, so this
+// gives us ease-in on the way up and a bouncy spring on the return
+// without two separate transition declarations.
+const root = document.querySelector(".t-avatar-group");
+const avatars = Array.from(root.querySelectorAll(".t-avatar"));
+const cs = getComputedStyle(document.documentElement);
+const num = (name, fb) => {
+  const v = parseFloat(cs.getPropertyValue(name));
+  return Number.isFinite(v) ? v : fb;
+};
+const ease = (name, fb) =>
+  cs.getPropertyValue(name).trim() || fb;
+
+function setShifts(activeIdx, phase) {
+  const lift    = num("--avatar-lift", -4);
+  const falloff = num("--avatar-falloff", 0.45);
+  const scale   = num("--avatar-scale", 1.05);
+  const tf      = phase === "out"
+    ? ease("--avatar-ease-out", "cubic-bezier(0.34, 3.85, 0.64, 1)")
+    : ease("--avatar-ease-in",  "cubic-bezier(0.22, 1, 0.36, 1)");
+
+  avatars.forEach((el, i) => {
+    el.style.transitionTimingFunction = tf;
+    if (activeIdx == null) {
+      el.style.setProperty("--shift", "0px");
+      el.style.setProperty("--scale-active", "1");
+      return;
+    }
+    const d = Math.abs(i - activeIdx);
+    el.style.setProperty(
+      "--shift",
+      (lift * Math.pow(falloff, d)).toFixed(3) + "px"
+    );
+    el.style.setProperty(
+      "--scale-active",
+      i === activeIdx ? String(scale) : "1"
+    );
+  });
+}
+
+avatars.forEach((el, i) => {
+  el.addEventListener("mouseenter", () => setShifts(i, "in"));
+});
+root.addEventListener("mouseleave", () => setShifts(null, "out"));
+```
+
+### React form
+
+```jsx
+import { useRef } from "react";
+
+// `items` is any list of React nodes (avatars, chips, badges, …)
+// — this hook only owns the hover-spring transition. Each item is
+// wrapped in a .t-avatar so it picks up the transform/transition
+// rules from CSS.
+export function AvatarGroup({ items }) {
+  const rootRef = useRef(null);
+
+  const setShifts = (activeIdx, phase) => {
+    if (!rootRef.current) return;
+    const cs = getComputedStyle(document.documentElement);
+    const num = (name, fb) => {
+      const v = parseFloat(cs.getPropertyValue(name));
+      return Number.isFinite(v) ? v : fb;
+    };
+    const ease = (name, fb) =>
+      cs.getPropertyValue(name).trim() || fb;
+
+    const lift    = num("--avatar-lift", -4);
+    const falloff = num("--avatar-falloff", 0.45);
+    const scale   = num("--avatar-scale", 1.05);
+    const tf      = phase === "out"
+      ? ease("--avatar-ease-out", "cubic-bezier(0.34, 3.85, 0.64, 1)")
+      : ease("--avatar-ease-in",  "cubic-bezier(0.22, 1, 0.36, 1)");
+
+    rootRef.current.querySelectorAll(".t-avatar").forEach((el, i) => {
+      el.style.transitionTimingFunction = tf;
+      if (activeIdx == null) {
+        el.style.setProperty("--shift", "0px");
+        el.style.setProperty("--scale-active", "1");
+        return;
+      }
+      const d = Math.abs(i - activeIdx);
+      el.style.setProperty(
+        "--shift",
+        (lift * Math.pow(falloff, d)).toFixed(3) + "px"
+      );
+      el.style.setProperty(
+        "--scale-active",
+        i === activeIdx ? String(scale) : "1"
+      );
+    });
+  };
+
+  return (
+    <div ref={rootRef} onMouseLeave={() => setShifts(null, "out")}>
+      {items.map((node, i) => (
+        <div
+          key={i}
+          className="t-avatar"
+          onMouseEnter={() => setShifts(i, "in")}
+        >
+          {node}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Why the timing-function is set inline before the variable writes
+
+Both the lift (hover-in) and the return (mouseleave) animate the same property — `transform`. If we declared one fixed `transition-timing-function` in CSS, both directions would share it. Setting it inline immediately before mutating `--shift` / `--scale-active` means each new transition picks up the timing-function that was current at the moment the property changed, giving us a clean curve on the way up and a bouncy overshoot on the way back without a second `.is-leaving` class.
+

package/.agents/skills/transitions-dev/12-error-state-shake.md

@@ -0,0 +1,202 @@
+# Error state shake
+
+## When to use
+
+Form validation feedback — invalid email, wrong password, missing required field, mismatched confirmation. The input shakes left/right with overshoot, the border switches to error color, and a message reveals beneath. After a hold timer (long enough to read the message), border + message fade back to neutral. Optional: typing into the input cancels the auto-revert immediately.
+
+The `t-` snippet is also a fit for any "this is wrong, try again" moment that needs a percussive hint without an OS-level alert — a wrong-PIN field on a lock screen, a duplicate-tag warning in a tag editor, a "name already taken" username field.
+
+## HTML usage
+
+```html
+<!-- Apply .t-input-wrap to your wrapper, .t-input to the
+     element that should shake (your input field, its
+     bordered wrapper — whatever owns the visible border),
+     and .t-error-msg to the message you want to reveal.
+     Bring your own sizing, padding, border colors, and
+     typography. -->
+<div class="t-input-wrap">
+  <div class="t-input">
+    <input type="text">
+  </div>
+  <p class="t-error-msg">Please enter a valid email.</p>
+</div>
+```
+
+Trigger:
+  - Add `.is-error` to .t-input-wrap and .t-input. Your
+    own border-color rules drive the visible color; this
+    stylesheet only owns the tween.
+  - Restart the shake by removing `.is-shaking` from
+    .t-input, forcing a reflow, then re-adding it.
+  - Optional: after --revert-hold ms, drop both
+    `.is-error` classes so border + message fade back
+    to neutral over --revert-dur.
+
+Per-segment ease: each keyframe stop carries its own
+animation-timing-function so each leg follows the Figma
+cubic-bezier curve independently.
+
+## Tunable variables
+
+| Variable | Default | Notes |
+| --- | --- | --- |
+| `--shake-distance` | `6px` | sourced from `--p12-shake-distance` |
+| `--shake-overshoot` | `4px` | sourced from `--p12-shake-overshoot` |
+| `--shake-dur-a` | `80ms` | sourced from `--p12-shake-dur-a` |
+| `--shake-dur-b` | `60ms` | sourced from `--p12-shake-dur-b` |
+| `--shake-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p12-shake-ease` |
+| `--revert-hold` | `3000ms` | sourced from `--p12-revert-hold` |
+| `--revert-dur` | `280ms` | sourced from `--p12-revert-dur` |
+
+The `:root` defaults below match the live tuning on [transitions.dev](https://transitions.dev). Drop them into your global stylesheet once — every transition in this skill reads from semantic names like these, so multiple transitions can share a single `:root` block.
+
+```css
+:root {
+  --shake-distance: 6px;
+  --shake-overshoot: 4px;
+  --shake-dur-a: 80ms;
+  --shake-dur-b: 60ms;
+  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --revert-hold: 3000ms;
+  --revert-dur: 280ms;
+}
+```
+
+## CSS
+
+```css
+/* Border-color tween. Define your input's default / focused
+   / error border-color in your own component CSS — this rule
+   only owns the interpolation. Use a constant border-width
+   across states so the tween never shifts inner content. */
+.t-input {
+  transition: border-color 150ms ease-out;
+  will-change: transform;
+}
+.t-input.is-error {
+  /* Error border auto-reverts on the hold timer, so the
+     fade-out uses the slower revert duration (matches the
+     message fade). */
+  transition: border-color var(--revert-dur, 280ms) ease-out;
+}
+
+/* Error message reveal. Visibility is delayed by --revert-dur
+   on hide so the message stays painted for the full opacity
+   fade-out. Entering .is-error drops the delay to 0 so the
+   message becomes visible immediately. */
+.t-error-msg {
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity    var(--revert-dur, 280ms) ease-out,
+    visibility 0s linear var(--revert-dur, 280ms);
+}
+.t-input-wrap.is-error .t-error-msg {
+  opacity: 1;
+  visibility: visible;
+  transition:
+    opacity    var(--revert-dur, 280ms) ease-out,
+    visibility 0s linear 0s;
+}
+
+/* Multi-segment keyframe with per-stop easing so each leg
+   of the shake follows its own cubic-bezier independently.
+   %-stops are cumulative durations as a fraction of the
+   total (80, 60, 80, 60 = 280ms): 28.57%, 57.14%, 78.57%,
+   100%. Recompute if any segment duration changes. */
+.t-input.is-shaking {
+  animation: t-input-shake calc(
+      var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2
+    ) linear;
+}
+@keyframes t-input-shake {
+  0%      { transform: translateX(0);                                 animation-timing-function: var(--shake-ease); }
+  28.57%  { transform: translateX(var(--shake-distance));             animation-timing-function: var(--shake-ease); }
+  57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
+  78.57%  { transform: translateX(var(--shake-overshoot));            animation-timing-function: var(--shake-ease); }
+  100%    { transform: translateX(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-input { animation: none !important; transform: none !important; }
+}
+```
+
+The `@media (prefers-reduced-motion: reduce)` guard at the bottom of the snippet is required — keep it. It zeroes the transition for users who have asked for less motion at the OS level.
+
+## JavaScript orchestration
+
+```js
+// Trigger the error state, replay the shake, and schedule the
+// auto-revert. Cancel any in-flight revert so the timer always
+// tracks the latest call.
+const wrap = document.querySelector(".t-input-wrap");
+const input = wrap.querySelector(".t-input");
+
+const cs = getComputedStyle(document.documentElement);
+const ms = (name, fb) => {
+  const v = parseFloat(cs.getPropertyValue(name));
+  return Number.isFinite(v) ? v : fb;
+};
+
+function showError() {
+  wrap.classList.add("is-error");
+  input.classList.add("is-error");
+
+  // Replay the shake from a clean baseline.
+  input.classList.remove("is-shaking");
+  void input.offsetWidth; // force reflow
+  input.classList.add("is-shaking");
+
+  const shakeMs =
+    ms("--shake-dur-a", 80) * 2 +
+    ms("--shake-dur-b", 60) * 2;
+  setTimeout(() => input.classList.remove("is-shaking"), shakeMs + 20);
+
+  // Auto-revert: hold long enough to read the message, then fade
+  // border + message back to neutral via the CSS transitions.
+  if (wrap._revertTimer) clearTimeout(wrap._revertTimer);
+  const hold = ms("--revert-hold", 3000);
+  wrap._revertTimer = setTimeout(() => {
+    wrap._revertTimer = null;
+    wrap.classList.remove("is-error");
+    input.classList.remove("is-error");
+  }, shakeMs + hold);
+}
+
+// Optional but recommended: typing cancels the auto-revert and
+// clears the error so the user isn't shaking at a value they're
+// already correcting.
+const inputEl = wrap.querySelector("input, textarea");
+  inputEl?.addEventListener("input", () => {
+  if (wrap._revertTimer) {
+    clearTimeout(wrap._revertTimer);
+    wrap._revertTimer = null;
+  }
+  wrap.classList.remove("is-error");
+  input.classList.remove("is-error");
+});
+```
+
+### Recomputing the keyframe stops
+
+The `%`-stops in `@keyframes t-input-shake` are cumulative leg durations as a fraction of the total. The default leg pattern is **A, A, B, B** — the two big-swing legs (right peak → left peak) take `--shake-dur-a` each, the two recovery legs (left peak → overshoot → rest) take `--shake-dur-b` each:
+
+```
+total                = 2·A + 2·B  =  2·80 + 2·60 = 280ms
+stop 1 (start)       =   0  / 280 =   0%      (rest)
+stop 2 (after A)     =  80  / 280 =  28.57%   (peak right,    +distance)
+stop 3 (after 2·A)   = 160  / 280 =  57.14%   (peak left,    -distance)
+stop 4 (after 2·A+B) = 220  / 280 =  78.57%   (overshoot,   +overshoot)
+stop 5 (end)         = 280  / 280 = 100%      (rest)
+```
+
+The total in the CSS uses `calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2)` — so the math stays consistent with the variables, but the **percentages** are baked literals. If you tune `--shake-dur-a` and `--shake-dur-b` to a different ratio, recompute the percentages by hand or the legs will drift out of sync with the duration calc.
+
+### Why three classes (`.is-error` on wrap + input, `.is-shaking` on input)
+
+- `.is-error` on `.t-input-wrap` controls the **message** visibility — the message lives in the wrap, not the input.
+- `.is-error` on `.t-input` controls the **border color** — the input owns the border.
+- `.is-shaking` on `.t-input` is **separate** from `.is-error` so you can replay the shake (remove → reflow → add) without flickering the error state on/off in the same tick. Keeping the shake state orthogonal also lets you trigger the shake on its own (e.g. for a "hint" jiggle) without the full error treatment.
+

package/.agents/skills/transitions-dev/13-input-clear-dissolve.md

@@ -0,0 +1,276 @@
+# Input clear with dissolve
+
+## When to use
+
+Clearing a text field — search box, filter input, any field with a clear (×) button. The typed text flies down + blurs + fades while a soft per-word streak ignites under each word, and the placeholder falls in from above. Per-frame JS is required: the streak envelope and per-word gradient stack cannot be expressed as static @keyframes.
+
+## HTML usage
+
+```html
+<!-- Drop .t-clear on a wrapper that you've sized like an
+     input field (positioning, padding, border, radius are
+     yours). Inside it stack a real <input>, a mirror that
+     visualizes the value, a fake placeholder for the new
+     empty state, and a glow layer that gets the per-word
+     radial-gradient stack written into it from JS. -->
+<div class="t-clear has-value">
+  <input type="text" value="…" />
+  <div class="t-clear-mirror" aria-hidden="true">…</div>
+  <div class="t-clear-placeholder" aria-hidden="true">Search</div>
+  <div class="t-clear-glow" aria-hidden="true"></div>
+  <button class="t-clear-btn" aria-label="Clear">…</button>
+</div>
+```
+
+Pair with a small JS routine (mirrors the gallery code) that
+flips `.is-clearing`, animates the mirror's translateY/opacity
+per frame, mirrors the math on the placeholder, and writes a
+stack of `radial-gradient(...)` layers onto .t-clear-glow's
+background so each word gets its own streak. Per-frame JS is
+unavoidable: the streak's rise/peak/fall envelope cannot be
+expressed as a static @keyframe.
+
+## Tunable variables
+
+| Variable | Default | Notes |
+| --- | --- | --- |
+| `--clear-dur` | `1000ms` | sourced from `--p13-clear-dur` |
+| `--clear-out-dur` | `400ms` | sourced from `--p13-text-out-dur` |
+| `--clear-in-dur` | `400ms` | sourced from `--p13-text-in-dur` |
+| `--clear-out-fly` | `12px` | sourced from `--p13-text-out-fly` |
+| `--clear-in-fly` | `12px` | sourced from `--p13-text-in-fly` |
+| `--clear-out-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p13-text-out-ease` |
+| `--clear-in-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p13-text-in-ease` |
+| `--clear-blur` | `2px` | sourced from `--p13-blur` |
+| `--glow-delay` | `50ms` | sourced from `--p13-glow-delay` |
+| `--glow-peak-at` | `0.15` | sourced from `--p13-glow-peak-at` |
+| `--glow-opacity` | `0.42` | sourced from `--p13-glow-opacity` |
+| `--glow-spread` | `1.5` | sourced from `--p13-glow-spread` |
+
+The `:root` defaults below match the live tuning on [transitions.dev](https://transitions.dev). Drop them into your global stylesheet once — every transition in this skill reads from semantic names like these, so multiple transitions can share a single `:root` block.
+
+```css
+:root {
+  --clear-dur: 1000ms;
+  --clear-out-dur: 400ms;
+  --clear-in-dur: 400ms;
+  --clear-out-fly: 12px;
+  --clear-in-fly: 12px;
+  --clear-out-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --clear-in-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --clear-blur: 2px;
+  --glow-delay: 50ms;
+  --glow-peak-at: 0.15;
+  --glow-opacity: 0.42;
+  --glow-spread: 1.5;
+}
+```
+
+## CSS
+
+```css
+/* The wrap clips the glow to its rounded box. The hairline
+   border is `inset` so it sits inside that clip — when the
+   glow's mix-blend-mode darkens its area, the border
+   underneath darkens with it. Bring your own width / height /
+   border-radius / surface color. */
+.t-clear {
+  position: relative;
+  overflow: hidden;
+}
+.t-clear-mirror,
+.t-clear-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+  white-space: nowrap;
+  overflow: hidden;
+  z-index: 2;
+}
+.t-clear-mirror { opacity: 0; }
+.t-clear.has-value .t-clear-mirror,
+.t-clear.is-clearing .t-clear-mirror { opacity: 1; }
+/* Hide the input's own glyphs while the mirror owns them so
+   the cleared text doesn't double-render with the fly-up. */
+.t-clear.has-value > input,
+.t-clear.is-clearing > input {
+  -webkit-text-fill-color: transparent;
+}
+.t-clear.has-value .t-clear-placeholder { opacity: 0; }
+/* The streak overlay: empty by default; JS writes a stack of
+   `radial-gradient(...)` layers into background during a clear,
+   then animates opacity. mix-blend-mode: multiply darkens the
+   underlying input + hairline; flip to `screen` in dark mode
+   so the same alpha values lighten instead of vanish. */
+.t-clear-glow {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+  z-index: 3;
+  mix-blend-mode: multiply;
+}
+
+/* The transitions live in JS (per-frame transform/opacity/
+   filter writes), so this stylesheet only owns the resting
+   state + the variables that JS reads. Read them with
+   `parseFloat(getComputedStyle(root).getPropertyValue(...))`
+   so live tweaks apply on the next clear without a reload. */
+
+@media (prefers-reduced-motion: reduce) {
+  .t-clear-glow { opacity: 0 !important; }
+}
+```
+
+The `@media (prefers-reduced-motion: reduce)` guard at the bottom of the snippet is required — keep it. It zeroes the transition for users who have asked for less motion at the OS level.
+
+## JavaScript orchestration
+
+```js
+// One clear routine per .t-clear. Reads timing/geometry from the
+// CSS variables each call so live tweaks apply without a reload.
+const root = document.documentElement;
+const num = (name, fb) => {
+  const v = parseFloat(getComputedStyle(root).getPropertyValue(name));
+  return Number.isFinite(v) ? v : fb;
+};
+// Minimal cubic-bezier(x1,y1,x2,y2) sampler so JS easing matches CSS.
+function bezier(str) {
+  const m = String(str).match(/cubic-bezier\(([-\d.]+),([-\d.]+),([-\d.]+),([-\d.]+)\)/);
+  if (!m) return (t) => t;
+  const [x1, y1, x2, y2] = m.slice(1).map(parseFloat);
+  const cx = 3 * x1, bx = 3 * (x2 - x1) - cx, ax = 1 - cx - bx;
+  const cy = 3 * y1, by = 3 * (y2 - y1) - cy, ay = 1 - cy - by;
+  return (t) => {
+    if (t <= 0) return 0;
+    if (t >= 1) return 1;
+    let s = t;
+    for (let i = 0; i < 8; i++) {
+      const dx = ((ax * s + bx) * s + cx) * s - t;
+      const d = (3 * ax * s + 2 * bx) * s + cx;
+      if (Math.abs(dx) < 1e-6 || d === 0) break;
+      s -= dx / d;
+    }
+    return ((ay * s + by) * s + cy) * s;
+  };
+}
+
+document.querySelectorAll(".t-clear").forEach((wrap) => {
+  const input  = wrap.querySelector("input");
+  const mirror = wrap.querySelector(".t-clear-mirror");
+  const phold  = wrap.querySelector(".t-clear-placeholder");
+  const glow   = wrap.querySelector(".t-clear-glow");
+  const btn    = wrap.querySelector(".t-clear-btn");
+  const canvas = document.createElement("canvas").getContext("2d");
+  let clearing = false;
+
+  const sync = () => {
+    const has = input.value.length > 0;
+    wrap.classList.toggle("has-value", has);
+    if (has) mirror.textContent = input.value.replace(/ /g, "\u00a0");
+  };
+
+  function buildGlow(text) {
+    canvas.font = getComputedStyle(input).font;
+    const isDark = root.getAttribute("data-theme") === "dark";
+    const rgb = isDark ? "255,255,255" : "0,0,0";
+    const w = wrap.clientWidth || 280;
+    const padLeft = parseFloat(getComputedStyle(input).paddingLeft) || 12;
+    const spread = num("--glow-spread", 1.5);
+    const layers = [];
+    let x = 0;
+    text.split(/(\s+)/).forEach((seg) => {
+      const segW = canvas.measureText(seg).width;
+      if (seg.trim()) {
+        const cx = padLeft + x + segW / 2;
+        const hw = Math.max(segW * 0.45, 8) * spread;
+        [[0, 0.8, 7, 0.22], [hw * 0.45, 0.55, 8, 0.18],
+         [-hw * 0.4, 0.65, 6, 0.16], [hw * 0.15, 0.9, 5, 0.14]]
+          .forEach(([dx, rwm, rh, a]) => {
+            const lx = (((cx + dx) / w) * 100).toFixed(2);
+            layers.push(
+              `radial-gradient(ellipse ${Math.max(hw * rwm, 2).toFixed(1)}px ${rh}px at ${lx}% 100%, rgba(${rgb},${a}), transparent)`
+            );
+          });
+      }
+      x += segW;
+    });
+    return layers.join(", ");
+  }
+
+  function clearWithAnimation() {
+    if (clearing || !input.value) return;
+    clearing = true;
+    const keepFocus = document.activeElement === input;
+    mirror.textContent = input.value.replace(/ /g, "\u00a0");
+
+    const total = num("--clear-dur", 1000);
+    const outDur = num("--clear-out-dur", 400);
+    const inDur  = num("--clear-in-dur", 400);
+    const outFly = num("--clear-out-fly", 12);
+    const inFly  = num("--clear-in-fly", 12);
+    const blur   = num("--clear-blur", 2);
+    const delay  = num("--glow-delay", 50);
+    const peakAt = num("--glow-peak-at", 0.15);
+    const gOp    = num("--glow-opacity", 0.42);
+    const easeOut = bezier(getComputedStyle(root).getPropertyValue("--clear-out-ease"));
+    const easeIn  = bezier(getComputedStyle(root).getPropertyValue("--clear-in-ease"));
+
+    input.value = "";
+    wrap.classList.remove("has-value");
+    wrap.classList.add("is-clearing");
+    glow.style.background = buildGlow(mirror.textContent);
+    glow.style.opacity = "0";
+    phold.style.transform = `translateY(-${inFly}px)`;
+    phold.style.opacity = "0.9";
+    phold.style.filter = `blur(${blur}px)`;
+
+    const t0 = performance.now();
+    (function tick(now) {
+      const el = now - t0;
+      const eo = easeOut(Math.min(1, el / outDur));
+      mirror.style.transform = `translateY(${(eo * outFly).toFixed(1)}px)`;
+      mirror.style.opacity = (1 - eo).toFixed(3);
+      mirror.style.filter = `blur(${(eo * blur).toFixed(1)}px)`;
+
+      const ei = easeIn(Math.min(1, el / inDur));
+      phold.style.transform = `translateY(${(-inFly + ei * inFly).toFixed(1)}px)`;
+      phold.style.opacity = (0.9 + ei * 0.1).toFixed(3);
+      phold.style.filter = `blur(${(blur - ei * blur).toFixed(1)}px)`;
+
+      let g = 0;
+      if (el > delay) {
+        const gp = Math.min(1, (el - delay) / Math.max(1, total - delay));
+        g = gp < peakAt ? gp / peakAt : 1 - (gp - peakAt) / (1 - peakAt);
+      }
+      glow.style.opacity = (g * gOp).toFixed(3);
+
+      if (el < total) {
+        requestAnimationFrame(tick);
+      } else {
+        wrap.classList.remove("is-clearing");
+        [mirror, phold].forEach((el) => (el.style.cssText = ""));
+        mirror.textContent = "";
+        glow.style.opacity = "0";
+        glow.style.background = "";
+        clearing = false;
+        if (keepFocus) requestAnimationFrame(() => input.focus({ preventScroll: true }));
+      }
+    })(performance.now());
+  }
+
+  const keep = (e) => { if (document.activeElement === input) e.preventDefault(); };
+  btn.addEventListener("pointerdown", keep);
+  btn.addEventListener("mousedown", keep);
+  btn.addEventListener("click", clearWithAnimation);
+  input.addEventListener("input", sync);
+  sync();
+});
+```
+
+### Dark mode
+
+The glow uses `mix-blend-mode: multiply` in light mode. In dark mode flip to `screen`, bump `--glow-opacity` to ~0.85, and paint **white** gradients in JS — multiply over a dark surface vanishes.
+