transitions-refine 0.1.0

package/.agents/skills/transitions-dev/19-card-tilt.md

@@ -0,0 +1,170 @@
+# Card hover tilt
+
+## When to use
+
+A card / tile / media surface that tilts in 3D toward the pointer while hovered, with a soft light "glare" tracking the cursor across it. Use for product cards, credit / membership cards, feature tiles, cover art — anything that should feel physical and reactive on hover. Pointer-only (skips touch) and flattens under reduced motion.
+
+The pointer is tracked on an **outer flat wrapper** (`.t-tilt`) that never transforms, so the tilting card can't rotate its own edges out from under the cursor (which causes hover flicker). The inner `.t-tilt-card` is the element that actually rotates.
+
+## HTML usage
+
+```html
+<div class="t-tilt">                <!-- flat hit area -->
+  <div class="t-tilt-card">       <!-- the element that tilts -->
+    … card content …
+    <div class="t-tilt-glare"></div>
+  </div>
+</div>
+```
+
+Track the pointer on the OUTER `.t-tilt` (it never
+transforms) and write four custom properties from JS:
+  el.style.setProperty('--tilt-rx', rxDeg + 'deg');
+  el.style.setProperty('--tilt-ry', ryDeg + 'deg');
+  el.style.setProperty('--tilt-gx', gxPct + '%');
+  el.style.setProperty('--tilt-gy', gyPct + '%');
+Add `.is-tilting` while moving (fast follow) and
+`.is-hover` to fade the glare in; remove both on leave.
+
+## Tunable variables
+
+| Variable | Default | Notes |
+| --- | --- | --- |
+| `--tilt-perspective` | `1000px` | sourced from `--p19-perspective` |
+| `--tilt-return` | `1000ms` | sourced from `--p19-return-dur` |
+| `--tilt-return-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p19-return-ease` |
+| `--tilt-follow` | `400ms` | sourced from `--p19-follow-dur` |
+| `--tilt-follow-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p19-follow-ease` |
+| `--tilt-glare-opacity` | `0.32` | sourced from `--p19-glare-opacity` |
+| `--tilt-glare-fade` | `300ms` | sourced from `--p19-glare-fade` |
+| `--tilt-glare-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p19-glare-ease` |
+
+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 {
+  --tilt-perspective: 1000px;
+  --tilt-return: 1000ms;
+  --tilt-return-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --tilt-follow: 400ms;
+  --tilt-follow-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --tilt-glare-opacity: 0.32;
+  --tilt-glare-fade: 300ms;
+  --tilt-glare-ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
+```
+
+## CSS
+
+```css
+/* The outer wrapper is the flat hit area; touch-action:none
+   lets a finger drag tilt the card instead of scrolling the
+   page, so tap-hold-drag works on mobile. */
+.t-tilt { touch-action: none; }
+/* The card tilts toward the pointer via rotateX/rotateY fed
+   from JS; on leave it eases back to flat. A separate
+   .is-tilting class swaps in a short linear follow while the
+   pointer moves so the tilt tracks the cursor 1:1. */
+.t-tilt-card {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  transform:
+    perspective(var(--tilt-perspective))
+    rotateX(var(--tilt-rx, 0deg))
+    rotateY(var(--tilt-ry, 0deg));
+  transform-style: preserve-3d;
+  transition: transform var(--tilt-return) var(--tilt-return-ease);
+  will-change: transform;
+}
+.t-tilt-card.is-tilting {
+  transition: transform var(--tilt-follow) var(--tilt-follow-ease);
+}
+/* Cursor-tracked glare: layered soft circles that add like
+   light (screen blend) at the pointer position. */
+.t-tilt-glare {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+  mix-blend-mode: screen;
+  background:
+    radial-gradient(circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
+      rgba(255,255,255,0.48), rgba(255,255,255,0.06) 52%, rgba(255,255,255,0) 84%),
+    radial-gradient(circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
+      rgba(255,255,255,0.22), rgba(255,255,255,0.04) 58%, rgba(255,255,255,0) 78%),
+    radial-gradient(circle 360px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
+      rgba(255,255,255,0.10), rgba(255,255,255,0) 88%);
+  transition: opacity var(--tilt-glare-fade) var(--tilt-glare-ease);
+}
+.t-tilt.is-hover .t-tilt-glare { opacity: var(--tilt-glare-opacity); }
+
+@media (prefers-reduced-motion: reduce) {
+  .t-tilt-card { transform: none !important; transition: 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
+// Track the pointer on the OUTER .t-tilt (never transforms) and write
+// rotation + glare position onto the inner card. Works for mouse
+// (hover) and touch / pen (tap-hold-drag) — a touch pointermove only
+// fires while a finger is down, so the press naturally drives the tilt.
+const tilt = document.querySelector(".t-tilt");
+const card = tilt.querySelector(".t-tilt-card");
+const reduce = matchMedia("(prefers-reduced-motion: reduce)");
+
+const MAX = 14; // peak tilt in degrees at the card edges (raise for a stronger lean)
+
+function reset() {
+  tilt.classList.remove("is-hover");
+  card.classList.remove("is-tilting");
+  card.style.setProperty("--tilt-rx", "0deg");
+  card.style.setProperty("--tilt-ry", "0deg");
+}
+
+function track(e) {
+  if (reduce.matches) return;
+  const r = tilt.getBoundingClientRect();
+  const px = Math.min(1, Math.max(0, (e.clientX - r.left) / r.width));
+  const py = Math.min(1, Math.max(0, (e.clientY - r.top) / r.height));
+  tilt.classList.add("is-hover");
+  card.classList.add("is-tilting");
+  card.style.setProperty("--tilt-ry", ((px - 0.5) * MAX).toFixed(2) + "deg");
+  card.style.setProperty("--tilt-rx", ((0.5 - py) * MAX).toFixed(2) + "deg");
+  card.style.setProperty("--tilt-gx", (px * 100).toFixed(1) + "%");
+  card.style.setProperty("--tilt-gy", (py * 100).toFixed(1) + "%");
+}
+
+tilt.addEventListener("pointerdown", (e) => {
+  // Touch / pen: capture so the drag keeps targeting the card even if
+  // the finger drifts past its edge. Pair with touch-action: none on
+  // .t-tilt so the drag tilts instead of scrolling the page.
+  if (e.pointerType !== "mouse") {
+    try { tilt.setPointerCapture(e.pointerId); } catch (_) {}
+  }
+});
+tilt.addEventListener("pointermove", track);
+tilt.addEventListener("pointerup", reset);
+tilt.addEventListener("pointercancel", reset);
+tilt.addEventListener("pointerleave", (e) => {
+  // Mouse: leaving the card flattens it. Touch already reset on up.
+  if (e.pointerType === "mouse") reset();
+});
+```
+
+### Peak tilt angle
+
+The rotation magnitude is a JS constant (`MAX`, in degrees), not a CSS variable — the orchestration writes `--tilt-rx` / `--tilt-ry` from the pointer position scaled by `MAX`. Raise it for a stronger lean (the live demo goes up to ~40°); 10–16° reads as a subtle, tasteful tilt.
+
+### Why the pointer is tracked on the flat wrapper
+
+Bind `pointermove` to the outer `.t-tilt` (which never transforms), not the `.t-tilt-card` that rotates. If you track the tilting element, its rotating edges slip out from under the cursor near the borders and the hover flickers on and off.
+
+### Touch / mobile
+
+Because it uses Pointer Events, the tilt also works on touch: tap-hold-drag on the card and it follows your finger (a touch `pointermove` only fires while pressed). Two pieces make this reliable — `touch-action: none` on `.t-tilt` so the drag tilts instead of scrolling the page, and `setPointerCapture` on `pointerdown` so the gesture keeps targeting the card even if the finger drifts past its edge.
+

package/.agents/skills/transitions-dev/20-plus-menu-morph.md

@@ -0,0 +1,167 @@
+# Plus to menu morph
+
+## When to use
+
+A small circular trigger (a "+" FAB, a compose button, an add-action affordance) that **morphs into the menu / panel it opens** instead of popping a separate surface next to it. The button's box grows in width / height and relaxes its corner radius into a rounded panel while the plus icon cross-fades + rotates out and the menu content slides in.
+
+Reach for this over **menu dropdown** when the trigger and the surface are the *same* element (the button becomes the panel). Use plain **menu dropdown** when the surface is a distinct popover that merely grows from the trigger's corner.
+
+## HTML usage
+
+```html
+<div class="t-morph" data-open="false">
+  <div class="t-morph-menu"> … menu items … </div>
+  <button class="t-morph-plus" aria-expanded="false">+</button>
+</div>
+```
+
+Toggle `data-open` on the container (and `aria-expanded`
+on the button). CSS animates the surface size + corner
+radius and cross-fades the plus ↔ menu. Wrap the morph in
+a relatively-positioned anchor sized to the OPEN footprint
+if you want it to grow out of a fixed corner.
+
+## Tunable variables
+
+| Variable | Default | Notes |
+| --- | --- | --- |
+| `--morph-open-dur` | `350ms` | sourced from `--p20-open-dur` |
+| `--morph-close-dur` | `250ms` | sourced from `--p20-close-dur` |
+| `--morph-ease` | `cubic-bezier(0.34, 1.25, 0.64, 1)` | sourced from `--p20-ease` |
+| `--morph-close-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p20-close-ease` |
+| `--morph-r-closed` | `40px` | sourced from `--p20-r-closed` |
+| `--morph-r-open` | `20px` | sourced from `--p20-r-open` |
+| `--morph-fade-dur` | `200ms` | sourced from `--p20-fade-dur` |
+| `--morph-slide` | `40px` | sourced from `--p20-slide-in-shift` |
+| `--morph-rotate` | `45deg` | sourced from `--p20-rotate` |
+| `--morph-scale` | `0.97` | sourced from `--p20-scale` |
+| `--morph-blur` | `2px` | sourced from `--p20-blur` |
+
+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 {
+  --morph-open-dur: 350ms;
+  --morph-close-dur: 250ms;
+  --morph-ease: cubic-bezier(0.34, 1.25, 0.64, 1);
+  --morph-close-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --morph-r-closed: 40px;
+  --morph-r-open: 20px;
+  --morph-fade-dur: 200ms;
+  --morph-slide: 40px;
+  --morph-rotate: 45deg;
+  --morph-scale: 0.97;
+  --morph-blur: 2px;
+}
+```
+
+## CSS
+
+```css
+/* Closed: a small circular button. Open: a rounded panel.
+   Width/height/border-radius animate; the open state uses a
+   bouncier ease than the close. */
+.t-morph {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--morph-r-closed);
+  overflow: hidden;
+  transition:
+    width var(--morph-close-dur) var(--morph-close-ease),
+    height var(--morph-close-dur) var(--morph-close-ease),
+    border-radius var(--morph-close-dur) var(--morph-close-ease);
+}
+.t-morph[data-open="true"] {
+  width: 183px;
+  height: 172px;
+  border-radius: var(--morph-r-open);
+  transition:
+    width var(--morph-open-dur) var(--morph-ease),
+    height var(--morph-open-dur) var(--morph-ease),
+    border-radius var(--morph-open-dur) var(--morph-ease);
+}
+/* Plus fades + slides out and the icon rotates into an ×. */
+.t-morph-plus {
+  position: absolute;
+  inset: auto 0 0 auto;
+  width: 40px; height: 40px;
+  display: grid; place-items: center;
+  border: 0; background: transparent; cursor: pointer;
+  transition:
+    opacity var(--morph-fade-dur) var(--morph-close-ease),
+    transform var(--morph-open-dur) var(--morph-close-ease),
+    filter var(--morph-fade-dur) var(--morph-close-ease);
+}
+.t-morph-plus svg {
+  transition: transform var(--morph-open-dur) var(--morph-close-ease);
+}
+.t-morph[data-open="true"] .t-morph-plus {
+  opacity: 0;
+  transform: translateX(calc(-1 * var(--morph-slide)));
+  filter: blur(var(--morph-blur));
+  pointer-events: none;
+}
+.t-morph[data-open="true"] .t-morph-plus svg {
+  transform: scale(var(--morph-scale)) rotate(var(--morph-rotate));
+}
+/* Menu starts slid in + scaled + blurred; reveals on open. */
+.t-morph-menu {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transform: translateX(var(--morph-slide)) scale(var(--morph-scale));
+  filter: blur(var(--morph-blur));
+  pointer-events: none;
+  transition:
+    opacity var(--morph-fade-dur) var(--morph-close-ease),
+    transform var(--morph-open-dur) var(--morph-close-ease),
+    filter var(--morph-fade-dur) var(--morph-close-ease);
+}
+.t-morph[data-open="true"] .t-morph-menu {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+  filter: blur(0);
+  pointer-events: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-morph, .t-morph-plus, .t-morph-menu { transition: 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
+// Toggle data-open on the container; CSS owns the morph. Mirror the
+// state to aria-expanded and close on outside click / Escape.
+const morph = document.querySelector(".t-morph");
+const plus = morph.querySelector(".t-morph-plus");
+
+function setOpen(open) {
+  morph.setAttribute("data-open", String(open));
+  plus.setAttribute("aria-expanded", String(open));
+}
+
+plus.addEventListener("click", (e) => {
+  e.stopPropagation();
+  setOpen(morph.getAttribute("data-open") !== "true");
+});
+document.addEventListener("click", (e) => {
+  if (!morph.contains(e.target)) setOpen(false);
+});
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") setOpen(false);
+});
+```
+
+### Pin the plus button to a corner
+
+The plus button must overlay the panel, pinned to a corner (`inset: auto 0 0 auto`), so it stays put while the box grows up-and-left out of it. If it's in normal flow it gets shoved around as the container resizes. `overflow: hidden` on `.t-morph` is load-bearing — it clips the menu content during the size morph so items don't spill outside the growing rounded box.
+
+### Open and close use different eases
+
+The bouncy `--morph-ease` only drives the open; the close falls back to the calm `--morph-close-ease`. Don't collapse them into one variable. Adjust the open `width` / `height` in the snippet to your real panel size — they're hardcoded, not derived from the content.
+

package/.agents/skills/transitions-dev/21-accordion.md

@@ -0,0 +1,124 @@
+# Accordion expand
+
+## When to use
+
+A disclosure / accordion / collapsible section whose panel grows and shrinks in height when toggled, with the header chevron flipping between a downward "v" and an upward "^". Use for settings groups, FAQs, filter sections, "show more" details — any header + collapsible body.
+
+Height animates via `grid-template-rows: 0fr ↔ 1fr`, so there's **no JS height measuring** and content of any size animates cleanly. The chevron flips vertically (`scaleY`) from a "v" to a "^", passing through a flat line at the midpoint.
+
+## HTML usage
+
+```html
+<div class="t-acc" data-open="false">
+  <button class="t-acc-head" aria-expanded="false">
+    Title
+    <span class="t-acc-chevron">
+      <svg viewBox="0 0 16 16"><path d="M4 6.5L8 10.5L12 6.5"/></svg>
+    </span>
+  </button>
+  <div class="t-acc-panel"><div class="t-acc-panel-inner"> … </div></div>
+</div>
+```
+
+Toggle `data-open` on the item. The panel animates via
+grid-template-rows 0fr ↔ 1fr (no JS height measuring) and
+the chevron flips vertically (scaleY) from a "v" to a "^".
+
+## Tunable variables
+
+| Variable | Default | Notes |
+| --- | --- | --- |
+| `--acc-expand` | `250ms` | sourced from `--p21-expand-dur` |
+| `--acc-collapse` | `250ms` | sourced from `--p21-collapse-dur` |
+| `--acc-chevron` | `250ms` | sourced from `--p21-chevron-dur` |
+| `--acc-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p21-ease` |
+
+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 {
+  --acc-expand: 250ms;
+  --acc-collapse: 250ms;
+  --acc-chevron: 250ms;
+  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
+```
+
+## CSS
+
+```css
+/* grid-template-rows 0fr → 1fr gives a clean height animation
+   with no JS measurement; the inner element clips overflow. */
+.t-acc-panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
+}
+.t-acc[data-open="true"] .t-acc-panel {
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
+}
+.t-acc-panel-inner {
+  overflow: hidden;
+  opacity: 0;
+  filter: blur(2px);
+  transition:
+    opacity var(--acc-collapse) var(--acc-ease),
+    filter var(--acc-collapse) var(--acc-ease);
+}
+.t-acc[data-open="true"] .t-acc-panel-inner {
+  opacity: 1;
+  filter: blur(0);
+  transition:
+    opacity var(--acc-expand) var(--acc-ease),
+    filter var(--acc-expand) var(--acc-ease);
+}
+/* Flip the chevron vertically to turn the "v" into a "^".
+   scaleY(-1) about the centre passes through a flat line at
+   the midpoint (same look as a `d:` path morph) but animates
+   in every browser, unlike CSS `d:` morphing (Chromium only).
+   The chevron path is symmetric about the 16x16 viewBox
+   centre, so the flip lands exactly on the "^"; non-scaling
+   -stroke keeps the stroke width constant through the flip. */
+.t-acc-chevron {
+  display: inline-flex;
+  transform: scaleY(1);
+  transform-origin: center;
+  transition: transform var(--acc-chevron) var(--acc-ease);
+}
+.t-acc-chevron path { vector-effect: non-scaling-stroke; }
+.t-acc[data-open="true"] .t-acc-chevron {
+  transform: scaleY(-1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron {
+    transition: 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
+// Toggle data-open on the item; CSS owns the height + chevron morph.
+const acc = document.querySelector(".t-acc");
+const head = acc.querySelector(".t-acc-head");
+
+head.addEventListener("click", () => {
+  const open = acc.getAttribute("data-open") === "true";
+  acc.setAttribute("data-open", String(!open));
+  head.setAttribute("aria-expanded", String(!open));
+});
+```
+
+### Two-element panel + padding placement
+
+The panel needs the two-element structure (`.t-acc-panel` grid track + `.t-acc-panel-inner` with `overflow: hidden`). The `0fr → 1fr` track can only collapse a child that clips its own overflow. Keep padding on `.t-acc-panel-inner`, never on `.t-acc-panel` — padding on the `0fr` track leaves a residual height strip so the panel never fully closes.
+
+### Why the chevron flips instead of morphing its path
+
+The natural way to turn the "v" into a "^" is to morph the chevron's SVG `d` between two vertex sets — but CSS `d:` path interpolation is **Chromium-only**, so on mobile Safari and Firefox it snaps (or doesn't move at all). A vertical flip (`transform: scaleY(-1)`) reproduces the same motion — it passes through a flat horizontal line at the midpoint, exactly like the path morph — and animates in every browser. Two requirements make it land cleanly: the chevron path must be **symmetric about the centre of its viewBox** (so the flip maps the "v" onto the "^"), and the path needs `vector-effect: non-scaling-stroke` so the stroke width stays constant while the box is squashed mid-flip.
+