trykeyline 0.1.0 → 0.1.2

package/plugins/keyline/skills/keyline/glass/motion/assets/motion-presets.ts

@@ -1,24 +1,9 @@
 /**
- * Motion presets — every spring and tween in the system, with the
- * reduced-motion substitutes.
- *
- * Two vocabularies appear here on purpose:
- *   bounce + duration          — a designer's controls; predictable arrival
- *   stiffness + damping + mass — needed when the RELATIONSHIP between two
- *                                springs is the effect (see GROW / CROSS)
- *
- * The one rule that applies to all of them: opacity never springs. Position
- * wants physics, opacity wants a curve. A spring on opacity overshoots past
- * its clamp and hitches on the way back — a visible flicker at the tail of
- * every fade.
+ * Motion presets — the springs and tweens glass uses. Why each number is what
+ * it is: glass/motion/springs.md. Opacity never springs (motion law 6).
  */
 
-/* ── Shared element re-targeting ─────────────────────────────────────────
-   A highlight or tooltip sliding to a new item. bounce is near the floor of
-   "perceptibly springy" on purpose: this is a thing MOVING, not a thing
-   ARRIVING. Bounce implies a moment of settling, and a highlight that
-   settles at every stop draws attention to itself instead of to the item
-   it's marking. */
+/** Shared highlight or tooltip re-targeting: moving, not arriving. */
 export const SLIDE = {
   type: "spring",
   bounce: 0.2,
@@ -26,184 +11,25 @@ export const SLIDE = {
   opacity: { duration: 0.16, ease: "easeOut" },
 } as const;
 
-/* ── The one playful moment ──────────────────────────────────────────────
-   Cards rising out of a folder on hover. 40% more bounce and 25% more
-   duration than anything else in the system. That it's the ONLY such moment
-   is why it works: against a baseline of restraint, one exuberant
-   interaction reads as craft. Three of them read as a template. */
+/** Cards rising out of a folder — the one playful moment. */
 export const LIFT = { type: "spring", bounce: 0.28, duration: 0.5 } as const;
 
-/* ── Squash and stretch, out of physics ──────────────────────────────────
-   Two springs of deliberately different character, applied to the two axes
-   of one panel. Every difference pushes the same direction — GROW is fast
-   and loose, CROSS is slow and controlled:
-
-     stiffness  620 vs 380   GROW pulls harder, moves sooner
-     damping     19 vs  30   GROW resists less, overshoots
-     mass      0.85 vs   1   GROW is lighter, accelerates faster
-
-   Through the overshoot the panel is briefly TALLER and NARROWER than it
-   ends up, then settles. Squash and stretch emerging from physics rather
-   than a hand-authored timeline — interruptible and velocity-aware for free.
-
-   Generalises: when two axes of one element move together, giving them
-   different springs creates deformation, and deformation reads as mass. */
+/** Squash and stretch: GROW on scaleY and y, CROSS on scaleX (glass/motion/guide.md §4). */
 export const GROW = { type: "spring", stiffness: 620, damping: 19, mass: 0.85 } as const;
 export const CROSS = { type: "spring", stiffness: 380, damping: 30 } as const;
 
-/* ── Closing ─────────────────────────────────────────────────────────────
-   A tween, not a spring. easeIn, so it accelerates away rather than
-   decelerating in. 130ms, well under the state tier.
-
-   A bounce on the way out reads as the interface being reluctant, and it
-   stands between the user and whatever they're reaching for next.
-   Entrances can have character; exits should get out of the way. */
+/** Closing: a flat tween that gets out of the way. */
 export const CLOSE = { duration: 0.13, ease: "easeIn" } as const;
 
-/* ── Reduced motion ──────────────────────────────────────────────────────
-   Substitute, don't subtract. The preference exists because large-area or
-   accelerating motion is physically unpleasant for some users — it is not a
-   preference for a static interface. A user who sets it still needs to know
-   that a menu opened.
-
-   Flat, state-tier, no overshoot. The state change stays legible; the
-   physics goes away. */
-export const FLAT = { duration: 0.15 } as const;
-
-/** Pick the spring or its flat substitute. `reduce` from useReducedMotion(). */
-export function motionOr<T>(reduce: boolean | null, animated: T) {
-  return reduce ? FLAT : animated;
-}
-
-/* ── Duration ladder, for inline JS use ──────────────────────────────────
-   Mirrors motion-tokens.css. Seconds, because that's what Motion takes. */
-export const DURATION = {
-  micro: 0.1,
-  state: 0.15,
-  popover: 0.2,
-  route: 0.26,
-  overlay: 0.3,
-  theme: 0.4,
-} as const;
-
-/* ── Off the ladder, deliberately ────────────────────────────────────────
-   The ladder is for STATE: something changed and the user has to follow it.
-   Two categories aren't state, and squeezing them onto the ladder makes
-   them worse rather than tighter.
-
-   THE SUBJECT OF THE MOMENT. When the thing animating IS the content, the
-   user is looking directly at it and the motion has to read in its own
-   right. Note the discipline in the pair below: same component, two
-   durations, decided by whether the motion is the subject or the report. */
-export const SUBJECT = {
-  /** Stepping between images — a noise-thresholded dissolve, not a cut. */
-  dissolve: 0.62,
-  /** The same image moving between two layouts. On screen at both ends, so
-      it only has to be followable — back inside the overlay tier. */
-  flight: 0.42,
-} as const;
-
-/* A SET PIECE gets its own budget by never appearing again: once per tab,
-   never blocking a deep link, never played under reduced motion. See §14 of
-   glass/motion/guide.md for the gating. */
-export const SET_PIECE = {
-  /** The first open of a disclosure, per line. */
-  theatreLine: 0.34,
-  /** Every subsequent open of the same thing. */
-  quietLine: 0.16,
-  /** Between staggered children on the first open only. */
-  stagger: 0.09,
-} as const;
-
-/* ── The curve for a track that also drives a filter ─────────────────────
-   NOT --ease-geist. The house curve overshoots past 1, and a blur animating
-   to 0px would have to pass through a NEGATIVE radius to settle back.
-   Browsers clamp rather than crash, so the symptom isn't an error — it's a
-   value stuck at zero for the tail while everything else is still moving,
-   which reads as the animation stalling right at the end.
-
-   Applies to any property with a hard floor: blur, brightness, a radius
-   going to 0, a scale you've promised won't invert. Expo-out has the same
-   "arrives decisively" character without ever leaving [0, 1]. */
-export const EASE_FILTER = [0.16, 1, 0.3, 1] as const;
-
-/* ── Blur crossfade ──────────────────────────────────────────────────────
-   Text swapping in place — a wordmark revealing its tagline on hover, say.
-   Note the asymmetry (280 in / 180 out): same principle as the springs.
-
-   Blur is the vestibular trigger; the fade isn't. So reduced motion swaps
-   only the blur amount to 0px and keeps the crossfade. Animating
-   blur(0px) → blur(0px) is a no-op the browser optimises away, so this needs
-   no second code path. */
-export function blurCrossfade(reduce: boolean | null) {
-  const blur = reduce ? "blur(0px)" : "blur(4px)";
-  return {
-    initial: { opacity: 0, filter: blur },
-    animate: { opacity: 1, filter: "blur(0px)", transition: { duration: 0.28, ease: "easeOut" } },
-    exit: { opacity: 0, filter: blur, transition: { duration: 0.18, ease: "easeIn" } },
-  } as const;
-}
-
-/* ── First-open theatre ──────────────────────────────────────────────────
-   Staggered lines behind a blur, on the FIRST open only; every subsequent
-   open is a quick fade. `theatre` comes from sessionStorage, so it is false
-   on the server for everyone and true on the client for most.
-
-   Which is why the shut state below is a CONSTANT. Branch a rendered style
-   on a client-only flag and React hands you two different first paints and
-   says so in the console. Only the transition reads the flags — a transition
-   isn't a style, so there's nothing for hydration to disagree about, and a
-   reader who asked for less motion gets a zero-length transition to the same
-   end state rather than a different starting position.
-
-   Record "seen" on animation COMPLETE, not on start: setting it earlier
-   lands in the same render batch as the open and cancels the very animation
-   it's recording. */
-export function theatreLine(reduce: boolean | null, theatre: boolean) {
-  return {
-    shut: { opacity: 0, y: 6, filter: "blur(4px)" },
-    open: {
-      opacity: 1,
-      y: 0,
-      filter: "blur(0px)",
-      transition: {
-        duration: reduce ? 0 : theatre ? SET_PIECE.theatreLine : SET_PIECE.quietLine,
-        // A blur is on this track — see EASE_FILTER above.
-        ease: EASE_FILTER,
-      },
-    },
-  } as const;
-}
-
-/** The parent's stagger. Zero after the first open, so a re-open is instant. */
-export function theatreList(theatre: boolean) {
-  return {
-    open: {
-      transition: {
-        staggerChildren: theatre ? SET_PIECE.stagger : 0,
-        delayChildren: theatre ? 0.06 : 0,
-      },
-    },
-  } as const;
-}
-
-/* ── Icon fill ───────────────────────────────────────────────────────────
-   Fill means CHOSEN — the page you're on, or the one you're pointing at.
-   Nothing is filled because it looks better.
-
-   The filled variant is not a second drawing: it's the same outline with its
-   interior painted in, layered OVER the stroke at the same coordinates. The
-   silhouette never moves, so the two crossfade in place — no pop, no reflow.
-
-   ease-out, not the house curve: the overshoot is right for travel and wrong
-   for a fade. Same split the springs make between position and opacity. */
+/* Icon fill: the filled layer sits over the outline at the same coordinates
+   and cross-fades in place (glass/motion/guide.md §13). ease-out, not the
+   house curve. */
 export const fillFade = (on: boolean) =>
   `transition-opacity duration-200 ease-out motion-reduce:transition-none ${
     on ? "opacity-100" : "opacity-0"
   }`;
 
-/** The inverse — interior lines a solid shape swallows (a briefcase's
-    divider, a document's rules) have to leave as the fill arrives. */
+/** The inverse — interior lines the fill swallows (a briefcase's divider). */
 export const detailFade = (on: boolean) =>
   `transition-opacity duration-200 ease-out motion-reduce:transition-none ${
     on ? "opacity-0" : "opacity-100"

package/plugins/keyline/skills/keyline/glass/motion/assets/motion-tokens.css

@@ -1,56 +1,20 @@
 /* ─────────────────────────────────────────────────────────────────────────
    Interface motion — tokens and CSS-driven effects
    Drop-in for Tailwind v4 (@theme) or plain CSS (the :root fallback below).
+   The ladder and the reasons for each value: glass/motion/guide.md §1–2.
    ───────────────────────────────────────────────────────────────────────── */
 
 @theme {
-  /* ── One curve for the whole system ─────────────────────────────────────
-     The 1.1 end control point overshoots ~10% and settles back — enough to
-     feel physical, not enough to read as bounce. A single shared curve is
-     why unrelated elements moving at once still feel like one mechanism.
-
-     Do NOT add a second bezier "because this needs a different feel." If an
-     element needs distinct character it needs a spring — that's the axis
-     where character belongs without fragmenting the system. */
+  /* One curve for the whole system; the 1.1 overshoots ~10% and settles.
+     Character beyond it belongs to springs, never a second bezier. */
   --ease-geist: cubic-bezier(0.175, 0.885, 0.32, 1.1);
 
-  /* ── Duration ladder ────────────────────────────────────────────────────
-     Set by how much of the screen changes, not by how important the element
-     feels. Three numbers carry almost everything: 150 / 200 / 300. */
-  --duration-micro: 100ms;    /* one property, no position — link opacity  */
-  --duration-state: 150ms;    /* colour, background, small transform, icon */
-  --duration-popover: 200ms;  /* chevron, hover card, compound glyph       */
-  --duration-route: 260ms;    /* whole viewport, on the critical path      */
-  --duration-overlay: 300ms;  /* large region entering or collapsing       */
-  --duration-theme: 400ms;    /* literally everything, at once            */
-
-  /* ── Off the ladder, deliberately ───────────────────────────────────────
-     The ladder is for STATE. Two things aren't state, and squeezing them
-     onto it makes them worse rather than tighter.
-
-     THE SUBJECT OF THE MOMENT — the thing animating IS the content, so the
-     user is looking directly at it and the motion has to read in its own
-     right. Note the pair: the dissolve is the subject, the flight is a
-     report about it, so the flight stays inside the overlay tier. */
-  --duration-dissolve: 620ms; /* stepping between images                   */
-  --duration-flight: 420ms;   /* one image moving between two layouts      */
-
-  /* A SET PIECE earns its budget by never appearing again — once per tab,
-     never blocking a deep link, never played under reduced motion. */
-  --duration-setpiece-in: 560ms;
-  --duration-setpiece-out: 320ms;
-
-  /* ── The curve for a track that also drives a filter ────────────────────
-     NOT --ease-geist. The house curve overshoots past 1, and a blur
-     animating to 0px would have to pass through a NEGATIVE radius to settle
-     back. Browsers clamp rather than crash, so the symptom is a value stuck
-     at zero for the tail of the transition — which reads as the animation
-     stalling right at the end, and is very hard to attribute.
-
-     Applies to any property with a hard floor: blur, brightness, a radius
-     going to 0, a scale you've promised won't invert. Expo-out has the same
-     "arrives decisively" character without ever leaving [0, 1]. */
-  --ease-filter: cubic-bezier(0.16, 1, 0.3, 1);
+  /* The state tiers these rules use. The full ladder, and the off-ladder
+     subject and set-piece timings, are in the guide. */
+  --duration-state: 150ms;
+  --duration-route: 260ms;
+  --duration-overlay: 300ms;
+  --duration-theme: 400ms;
 }
 
 /* Plain-CSS fallback if you're not on Tailwind v4. */
@@ -60,24 +24,20 @@
 
 @layer components {
   /* ── Reveal on scroll ────────────────────────────────────────────────────
-     CSS animates; JS only sets `data-in` (see useReveal.ts). 8px of travel —
-     enough to register, small enough that a page of revealing paragraphs
-     doesn't feel like it's sliding around. */
+     CSS animates; JS only sets `data-in` (useReveal.ts, which also holds the
+     <noscript> reset this needs). 8px of travel. */
   .reveal {
     opacity: 0;
     transform: translateY(8px);
     transition: opacity var(--duration-overlay) var(--ease-geist),
                 transform var(--duration-overlay) var(--ease-geist);
   }
-  /* An attribute, not a class — see useReveal.ts for why a class can't survive. */
   .reveal[data-in] {
     opacity: 1;
     transform: translateY(0);
   }
 
-  /* Off entirely — the animation IS the effect, so there's nothing to
-     degrade to. Note it resolves to opacity: 1; the danger with any
-     reveal-on-scroll is leaving content stuck at opacity: 0. */
+  /* Resolves to opacity: 1 — never leave reveal content stuck at 0. */
   @media (prefers-reduced-motion: reduce) {
     .reveal {
       opacity: 1;
@@ -86,8 +46,8 @@
     }
   }
 
-  /* Print is a real presentation, and scroll-triggered content prints blank
-     without this. The most-forgotten line in the file. */
+  /* Scroll-triggered content prints blank without this. The one copy of the
+     print reset; layout-tokens.css's print block relies on it. */
   @media print {
     .reveal {
       opacity: 1;
@@ -95,29 +55,9 @@
     }
   }
 
-  /* THE THIRD GUARD IS NOT CSS. A feature check can't catch "JavaScript
-     never ran at all": the rules above ship, `.reveal` applies, and nothing
-     arrives to add `.in`. The reader gets a correct document they cannot
-     see — a blank page rather than a plain one. Put this in the head:
-
-       <noscript>
-         <style>.reveal { opacity: 1 !important; transform: none !important; }</style>
-       </noscript>
-
-     The general rule: any CSS that hides content pending JavaScript needs a
-     <noscript> reset. */
-
   /* ── Route transition ───────────────────────────────────────────────────
-     Opacity only — no slide, no scale. Directional motion implies a spatial
-     relationship between routes; in a flat site map there isn't one.
-
-     260ms rather than 300: a page transition sits directly between "I
-     clicked" and "I can read," and that latency reads as the site being
-     slow. 260 is the shortest crossfade that isn't mistaken for a flicker.
-
-     `both` holds the from-state before the animation starts, preventing a
-     one-frame flash of opaque content. Key the wrapper on the pathname to
-     replay it on each navigation. */
+     Opacity only, 260ms; `both` holds the from-state so there's no one-frame
+     flash. Key the wrapper on the pathname (glass/motion/easing-and-duration.md). */
   .route-fade {
     animation: routeFade var(--duration-route) var(--ease-geist) both;
   }
@@ -130,21 +70,10 @@
   }
 
   /* ── Theme crossfade ────────────────────────────────────────────────────
-     Added by the theme setter for ~440ms on an explicit toggle only, then
-     removed. Left in permanently it would make EVERY hover state on the site
-     400ms and sluggish — the !important is what lets it beat each
-     component's own duration-150 for those 440ms, and the removal is what
-     stops it poisoning everything else.
-
-     400ms because this is the largest possible change: every surface, text
-     colour, border, icon fill and shadow simultaneously.
-
-     Plain `ease`, not the house curve — overshoot on a position is momentum;
-     overshoot on a colour interpolation means the background travels past
-     its target and comes back, which reads as a wobble in the light.
-
-     The whole rule sits inside no-preference, so it's opt-in. Reduced-motion
-     users still get the theme change, just instantly. */
+     setThemeChoice (glass/color/assets/theme.ts) adds the class on an
+     explicit toggle for ~440ms, then removes it; the !important beats every
+     component's own duration for that window only. Plain `ease`, and opt-in
+     under no-preference. Why: glass/motion/easing-and-duration.md. */
   @media (prefers-reduced-motion: no-preference) {
     :root.theme-transition,
     :root.theme-transition *,
@@ -159,18 +88,5 @@
     }
   }
 
-  /* ── Skip link ──────────────────────────────────────────────────────────
-     Parked off-screen with a transform (not display:none, which would take
-     it out of the tab order) and slid in on focus at the state tier. */
-  .skip {
-    position: absolute;
-    left: 16px;
-    top: 16px;
-    z-index: 100;
-    transform: translateY(-200%);
-    transition: transform var(--duration-state) var(--ease-geist);
-  }
-  .skip:focus {
-    transform: translateY(0);
-  }
+  /* The skip link lives in glass/layout/assets/layout-tokens.css. */
 }

package/plugins/keyline/skills/keyline/glass/motion/easing-and-duration.md

@@ -33,12 +33,7 @@ The gap between 150 and 200 maps to *whether other things move too*:
 
 ## Why route transitions are 260ms
 
-```css
-.route-fade { animation: routeFade 260ms var(--ease-geist) both; }
-@keyframes routeFade { from { opacity: 0 } to { opacity: 1 } }
-```
-
-260ms is the shortest crossfade that still reads as intentional; below ~200ms a full-viewport opacity change looks like a rendering artefact (law 3 caps it). Opacity only, because a directional transition implies a spatial relationship between routes, and the site map (home, experience, writing, playground) is flat.
+The rule is `.route-fade` in `glass/motion/assets/motion-tokens.css`. 260ms is the shortest crossfade that still reads as intentional; below ~200ms a full-viewport opacity change looks like a rendering artefact (law 3 caps it). Opacity only, because a directional transition implies a spatial relationship between routes, and the site map (home, experience, writing, playground) is flat.
 
 Keying the wrapper on the pathname replays the CSS animation on every navigation:
 
@@ -50,33 +45,9 @@ Keying the wrapper on the pathname replays the CSS animation on every navigation
 
 ## Why the theme crossfade breaks both rules
 
-```css
-@media (prefers-reduced-motion: no-preference) {
-  :root.theme-transition,
-  :root.theme-transition *,
-  :root.theme-transition *::before,
-  :root.theme-transition *::after {
-    transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease,
-      fill 400ms ease, stroke 400ms ease, box-shadow 400ms ease !important;
-  }
-}
-```
-
 **400ms, longest on the ladder**: every surface, text colour, border, icon fill and shadow at once. At 150ms it reads as a jarring flash; at 400ms, as the lights coming up. **Plain `ease`, not the house curve**, because colour has no mass (law 5).
 
-The class is applied only on an explicit toggle, then removed:
-
-```ts
-export function setThemeChoice(choice: ThemeChoice): void {
-  localStorage.setItem(KEY, choice);
-  const root = document.documentElement;
-  root.classList.add("theme-transition");
-  applyTheme(choice);
-  window.setTimeout(() => root.classList.remove("theme-transition"), 440);
-}
-```
-
-It exists for ~440ms, the duration plus a 40ms margin, and its `!important` beats every component's own `transition-colors duration-150` for that window. Why it's scoped this way is in `domains/motion/patterns.md`, theme cross-fade.
+The `.theme-transition` rule is in `glass/motion/assets/motion-tokens.css`; `setThemeChoice` in `glass/color/assets/theme.ts` adds it only on an explicit toggle and removes it after ~440ms, the duration plus a 40ms margin, so its `!important` beats every component's own `transition-colors duration-150` for that window only. Why it's scoped this way is in `domains/motion/patterns.md`, theme cross-fade.
 
 ## The overshoot in the house curve
 

package/plugins/keyline/skills/keyline/glass/motion/guide.md

@@ -38,7 +38,7 @@ Glass uses two of law 4's classes:
 
 One curve for the whole site. The `1.1` end control point overshoots slightly and settles back, physical but not bouncy. The exceptions:
 
-- **Opacity-only micro-transitions**: `ease-out` at 100ms.
+- **100ms opacity hovers and icon fills** (§13): `ease-out`. Opacity entrances (`.reveal`, the route fade) keep the house curve on purpose: on opacity the overshoot clamps at 1.
 - **The theme crossfade**: plain `ease`.
 - **Anything spring-driven**: no bezier at all.
 - **Any track that also drives a filter**, or any property floored at zero (law 5): expo-out, `cubic-bezier(0.16, 1, 0.3, 1)`, which never exceeds 1. It is the same intent in a curve legal for the property, not a second character.
@@ -116,11 +116,7 @@ The details that keep it from flickering are in `domains/motion/patterns.md`, th
 
 ### When the DOM element isn't enough
 
-A *photograph* travelling between layouts escalates to the GPU (law 13): one viewport-sized canvas above the gallery draws the open photo into a screen rect, four numbers in a uniform, no reflow. The wall stays DOM, since a hundred tiles as textures is ~590MB before atlasing; the open photo is `alt=""`, its labels sitting beside it; failure returns `null` and keeps the caller's `<img>`.
-
-**Carry the reading position across**: open the other layout on the tile nearest the viewport centre, measured before React commits it, and give each end its own rect around a shared centre (law 8).
-
-→ The measurement (`centreFrame`) and the WebGL notes: `glass/motion/shared-element.md`, escalating to the GPU
+A *photograph* travelling between layouts escalates to the GPU (law 13), opening on the tile nearest the viewport centre (law 8): `glass/motion/shared-element.md`, escalating to the GPU
 
 ## 7. Reduced motion
 
@@ -152,34 +148,11 @@ One passive listener and one rAF per behaviour (law 12; the shape is in `domains
 
 ## 9. Reveal on scroll
 
-CSS animates; JavaScript only marks an element as arrived:
-
-```css
-.reveal { opacity: 0; transform: translateY(8px);
-          transition: opacity 300ms var(--ease-geist), transform 300ms var(--ease-geist); }
-.reveal[data-in] { opacity: 1; transform: translateY(0); }
-
-@media (prefers-reduced-motion: reduce) {
-  .reveal { opacity: 1; transform: none; transition: none; }
-}
-```
-
-`threshold: 0` with `rootMargin: "0px 0px -40px 0px"`, one-shot, re-run on the pathname. 8px of travel registers without a page of paragraphs seeming to slide. Every guard is law 11 and `domains/motion/guards.md`; the two the site hit:
-
-- **A fractional threshold on a tall element.** Every rendered SKILL.md on the site, eight to thirteen thousand pixels in one `.reveal`, once sat invisible at opacity 0 behind `0.1`.
-- **A class the framework owns.** Tag-filtered rows went blank as the pointer left, when React rewrote a state-dependent `className` and wiped an `in` added with `classList.add`. Hence `data-in`.
-
-The no-JavaScript reset, in the head:
-
-```html
-<noscript>
-  <style>.reveal { opacity: 1 !important; transform: none !important; }</style>
-</noscript>
-```
+300ms on the house curve, 8px of travel, `threshold: 0`, `rootMargin: "0px 0px -40px 0px"`, marked by `data-in`; the guards are law 11, whose two bugs are this site's. → `glass/motion/assets/motion-tokens.css`, `glass/motion/assets/useReveal.ts`
 
 ## 10. Performance: `m` not `motion`
 
-`m.div` inside `<LazyMotion features={domAnimation} strict>`, never a bare `motion.*` (`domains/motion/performance.md`). The menu animates a bare `<m.div>` around the `glass-panel`, so the wrapper scales and the child carries the blur (law 13).
+`m.div` inside `<LazyMotion features={domAnimation} strict>`, never a bare `motion.*` (`domains/motion/performance.md`). The menu's wrapper scales and its `glass-panel` child carries the blur (law 13; `glass/depth/guide.md` §3).
 
 ## 11. Hover intent
 
@@ -204,11 +177,7 @@ active:scale-[0.92]   /* 8% — felt, not seen */
 
 On `pointerdown` (law 3).
 
-The site synthesises a "tok" on hover and click (Web Audio, no asset files): a sine fundamental, a fast-decaying marimba-like 3.9:1 partial, and a lowpassed noise transient for the wooden attack. Hover is quiet and high (1200Hz, 0.09s, 0.05 gain), click lower and louder (900Hz, 0.14s, 0.13 gain); it's gated on the autoplay policy, muteable, and persisted. Dense surfaces opt out of the hover tick with `[data-quiet-hover]`; clicks still sound. The rules for arming and muting are in `domains/motion/patterns.md`, sound.
-
-**Sound can be a phrase, not just an event.** The opening screen's run, a note per photograph, is written out in A major pentatonic, where no two notes clash, so a run cut short by a failed image still resolves; the landing note, the only accented one, sits a fifth *below* the start, closing the phrase rather than adding a step.
-
-Sound is *on* by default here, which is defensible only on a personal site and only if you're confident. → Synthesis walkthrough and delegation pattern: `glass/motion/sound.md`
+Sound is *on* by default here, defensible only on a personal site: a synthesised "tok" on hover and click, muteable; `[data-quiet-hover]` silences hover on dense surfaces. → `glass/motion/sound.md`; the rules: `domains/motion/patterns.md`, sound
 
 ## 13. Fill means chosen
 
@@ -223,7 +192,7 @@ export const detailFade = (on: boolean) =>
   `transition-opacity duration-200 ease-out motion-reduce:transition-none ${on ? "opacity-0" : "opacity-100"}`;
 ```
 
-**200ms `ease-out`, not the house curve**: overshoot suits travel, not a fade. The knockout mask for interior lines is in `domains/motion/patterns.md`, fill means chosen.
+**200ms `ease-out`, not the house curve** (§2). The knockout mask for interior lines is in `domains/motion/patterns.md`, fill means chosen.
 
 **How the marks that can't fill signal instead:**
 
@@ -235,7 +204,7 @@ export const detailFade = (on: boolean) =>
 
 ## 14. Set pieces play once
 
-Two set pieces, each once a session (law 15): the opening screen, and a summary panel's first reveal.
+Two set pieces, each once a session (law 15): the opening screen, and a summary panel's first reveal. The first open runs each line at 340ms, its children staggered 90ms after a 60ms delay; every later open runs 160ms with no stagger, and reduced motion runs none.
 
 ```ts
 // Once a session, per item. The theatre is a welcome; a re-run is a delay.
@@ -265,8 +234,8 @@ Collapsibles animate height and stay mounted (law 11), so the content stays in t
 
 ## Assets
 
-- `glass/motion/assets/motion-tokens.css` — easing curve, duration ladder, `.reveal`, route fade, theme crossfade.
-- `glass/motion/assets/motion-presets.ts` — every spring and tween above, plus reduced-motion substitutes.
+- `glass/motion/assets/motion-tokens.css` — easing curve, state durations, `.reveal`, route fade, theme crossfade.
+- `glass/motion/assets/motion-presets.ts` — the springs, the close and the icon-fill fades.
 - `glass/motion/assets/DropMenu.tsx` — the squash-and-stretch menu.
 - `glass/motion/assets/useScrollTick.ts` — rAF-throttled scroll with hysteresis.
 - `glass/motion/assets/useReveal.ts` — the IntersectionObserver hook and its guards.
@@ -277,7 +246,7 @@ The domain checklist first; then glass's values:
 
 - [ ] Every duration on the ladder: no 250ms, 500ms or 1s.
 - [ ] Off-ladder timing is the subject of the moment (the 620ms dissolve) or a once-a-session set piece, and says which.
-- [ ] `--ease-geist` everywhere, plus `ease-out` for opacity-only, plain `ease` for the theme fade, and expo-out on any track driving a filter.
+- [ ] `--ease-geist` everywhere, opacity entrances included, plus `ease-out` for 100ms opacity hovers and icon fills, plain `ease` for the theme fade, and expo-out on any track driving a filter.
 - [ ] Menus open on the `GROW`/`CROSS` pair and close on `CLOSE`.
 - [ ] Hover timed by area: a link 100ms, a card-sized wash 200ms.
 - [ ] No translate on hover, bar the folder's rising cards.

package/plugins/keyline/skills/keyline/glass/motion/reduced-motion.md

@@ -60,13 +60,7 @@ One variable turns a blur-crossfade into a plain crossfade; `blur(0px)` → `blu
 
 ## In CSS
 
-The `.reveal` rule is §9 of `glass/motion/guide.md`; the theme crossfade's opt-in block is in `glass/motion/easing-and-duration.md`. The route fade:
-
-```css
-@media (prefers-reduced-motion: reduce) {
-  .route-fade { animation: none; }
-}
-```
+The `.reveal` reset, the route fade's `animation: none` and the theme crossfade's `no-preference` opt-in are all in `glass/motion/assets/motion-tokens.css`.
 
 ### Tailwind's `motion-reduce:` variant
 

package/plugins/keyline/skills/keyline/glass/motion/scroll-performance.md

@@ -18,40 +18,11 @@ const ANCHOR = "scroll-mt-28";   // 112px — matched to READING_LINE = 120
 
 Every heading carries `scroll-mt-28`, so a jump lands it 112px below the viewport top, just above the 120px line.
 
-### Deep links without the router
+Deep links scroll with `scrollIntoView({ behavior: reduce ? "auto" : "smooth" })` and set the hash with `history.replaceState` (`domains/motion/performance.md`, scroll spies).
 
-```tsx
-el.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "start" });
-window.history.replaceState(null, "", `#${id}`);
-```
-
-The URL stays copyable without a second scroll fighting the first.
-
-## The `1fr` ↔ `0fr` grid trick, in Tailwind
-
-Collapsing a region to zero width without animating `width`:
-
-```tsx
-<li
-  className="grid transition-[grid-template-columns] duration-300 ease-geist motion-reduce:transition-none"
-  style={{ gridTemplateColumns: expanded ? "1fr" : "0fr" }}
->
-  <div className="flex min-w-0 items-center overflow-hidden">{children}</div>
-</li>
-```
-
-`min-w-0` on the child is required (flex children default to `min-width: auto` and won't shrink below their content); `overflow-hidden` clips during the collapse.
-
-## `backdrop-filter` and transforms
-
-The animating wrapper and the glass surface are different elements (law 13):
-
-```tsx
-<DropMenu open={open}>            {/* animates scale + y */}
-  <ul className="glass-panel …">  {/* carries the blur, never transformed */}
-```
+## The dock's collapse
 
-Where the panel itself must animate, carry more of the effect in the tint than the blur: `glass-panel` sits at 97% opacity because its blur is compromised while it animates.
+The dock's icon row collapses on `grid-template-columns` `1fr` ↔ `0fr`, 300ms on the house curve, with `min-w-0 overflow-hidden` on the child (the technique: `domains/motion/performance.md`, what to animate). The menu's wrapper/surface split is §3 of `glass/depth/guide.md`.
 
 ## Timers
 

package/plugins/keyline/skills/keyline/glass/motion/shared-element.md

@@ -114,7 +114,7 @@ export type Rect = { x: number; y: number; width: number; height: number };
 export function lerpRect(a: Rect, b: Rect, t: number): Rect { /* … */ }
 ```
 
-The rules are law 13 and `domains/motion/performance.md`, escalating to the GPU. Here the wall stays DOM and the open photo is `alt=""`, its labels in the strip beside it.
+The rules are law 13 and `domains/motion/performance.md`, escalating to the GPU. Here the wall stays DOM, since a hundred tiles as textures is ~590MB before atlasing, and the open photo is `alt=""`, its labels in the strip beside it.
 
 **Failing returns `null`:**