stylegallery 0.1.6 → 0.1.8

package/expression/techniques/grain-and-texture.md

@@ -0,0 +1,83 @@
+---
+type: Domain Recipe
+title: Grain And Texture
+description: Copy-ready film grain, noise, and halftone textures without image files.
+domain: expression
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Grain And Texture
+
+Primary role: visual technique recipe.
+
+## Repository Boundary
+
+Product-layer CSS for `showcase/` works and consumer pages. Never add these declarations to reusable Layout pattern CSS.
+
+## Reusable Method
+
+### Film Grain Overlay
+
+An SVG turbulence filter as a data URI, tiled over the whole page. No image file, about 400 bytes.
+
+```html
+<div class="grain" aria-hidden="true"></div>
+```
+
+```css
+.grain {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  inset: 0;
+  mix-blend-mode: overlay;
+  opacity: 0.22;
+  pointer-events: none;
+  position: fixed;
+  z-index: 90;
+}
+```
+
+Tuning: `baseFrequency` 0.6 is coarse and filmic, 0.9 is fine and digital. Opacity 0.15-0.25 on dark grounds, 0.08-0.12 on light grounds with `mix-blend-mode: multiply` and a black `feColorMatrix` (replace the three `1` channel values with `0`).
+
+### Halftone
+
+Dots from a repeating radial gradient, masked onto an image or a flat color block.
+
+```css
+.halftone {
+  background-image: radial-gradient(circle at center, #141210 0.9px, transparent 1.1px);
+  background-size: 6px 6px;
+  mix-blend-mode: multiply;
+}
+```
+
+Place the `.halftone` layer over a grayscale image (`filter: grayscale(1) contrast(1.2)`) for a print look.
+
+### Paper Tooth
+
+For light directions, a very low-frequency turbulence adds unevenness without visible grain: `baseFrequency='0.02'`, `numOctaves='2'`, opacity 0.35, `mix-blend-mode: multiply`.
+
+## Opinionated Guidance
+
+Grain should be felt, not seen. If someone notices it in a screenshot at 100% zoom, it is too strong.
+
+## Platform-Specific Guidance
+
+A fixed full-viewport overlay is composited on every scroll frame. With `pointer-events: none` it never blocks input; if scrolling stutters on low-end devices, switch `position: fixed` to `absolute` on a page-height container.
+
+## Unsupported Absolutes
+
+Grain strength that works on a large desktop display can look dirty on a small high-density phone screen. Check both sizes.
+
+## Verification Contract
+
+The overlay is `aria-hidden`, has `pointer-events: none`, and does not intercept focus. The showcase focus-order check passes with the overlay present.
+
+## Source, License, And Attribution
+
+Locally authored recipe. No upstream source.
+
+## IA Navigation
+
+Parent: [Expression](../index.md).
+Next: [WebGL Hero Field](webgl-hero.md).

package/expression/techniques/webgl-hero.md

@@ -0,0 +1,123 @@
+---
+type: Domain Recipe
+title: WebGL Hero Field
+description: A three.js point field behind a hero, with pointer parallax, offscreen pausing, and safe fallbacks.
+domain: expression
+lifecycle: experimental
+provenance_kind: local
+---
+
+# WebGL Hero Field
+
+Primary role: visual technique recipe.
+
+## Repository Boundary
+
+Product-layer script for `showcase/` works and consumer pages. The canvas is decorative atmosphere; no content or control may live only inside it.
+
+## Reusable Method
+
+```html
+<section class="hero">
+  <canvas class="hero_canvas" aria-hidden="true"></canvas>
+  <!-- content -->
+</section>
+```
+
+```css
+.hero { isolation: isolate; overflow: clip; position: relative; }
+.hero_canvas { block-size: 100%; inline-size: 100%; inset: 0; position: absolute; z-index: -1; }
+```
+
+```js
+const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+async function startHeroField(canvas) {
+  let THREE, renderer;
+  try {
+    THREE = await import("https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js");
+    renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true, powerPreference: "low-power" });
+  } catch {
+    return; // CSS atmosphere behind the canvas remains
+  }
+  renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 100);
+  camera.position.set(0, 1.4, 7);
+
+  const columns = 140, rows = 70;
+  const positions = new Float32Array(columns * rows * 3);
+  const colors = new Float32Array(columns * rows * 3);
+  const a = new THREE.Color("#ff5a36"), b = new THREE.Color("#7b5cff");
+  for (let r = 0; r < rows; r++) for (let c = 0; c < columns; c++) {
+    const i = (r * columns + c) * 3;
+    positions[i] = (c / (columns - 1) - 0.5) * 18;
+    positions[i + 2] = (r / (rows - 1) - 0.5) * 12;
+    const color = a.clone().lerp(b, c / (columns - 1));
+    colors.set([color.r, color.g, color.b], i);
+  }
+  const geometry = new THREE.BufferGeometry();
+  geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+  geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
+  const points = new THREE.Points(geometry, new THREE.PointsMaterial({
+    size: 0.045, vertexColors: true, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false,
+  }));
+  scene.add(points);
+
+  const pointer = { x: 0, y: 0 };
+  addEventListener("pointermove", (e) => { pointer.x = e.clientX / innerWidth - 0.5; pointer.y = e.clientY / innerHeight - 0.5; }, { passive: true });
+
+  function resize() {
+    renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
+    camera.aspect = canvas.clientWidth / Math.max(canvas.clientHeight, 1);
+    camera.updateProjectionMatrix();
+    points.position.y = camera.aspect < 1 ? -3.2 : -1.2; // keep the field under portrait copy
+  }
+  function frame(time) {
+    const t = time * 0.00045, p = geometry.attributes.position.array;
+    for (let i = 0; i < p.length; i += 3) {
+      p[i + 1] = Math.sin(p[i] * 0.55 + t * 2) * 0.35 + Math.cos(p[i + 2] * 0.7 + t * 1.4) * 0.3;
+    }
+    geometry.attributes.position.needsUpdate = true;
+    camera.position.x += (pointer.x * 1.6 - camera.position.x) * 0.04;
+    camera.position.y += (1.4 - pointer.y * 0.8 - camera.position.y) * 0.04;
+    camera.lookAt(0, 0, 0);
+    renderer.render(scene, camera);
+  }
+  resize();
+  addEventListener("resize", resize);
+  if (reduceMotion) return frame(0); // one still frame
+  let visible = true;
+  new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; }).observe(canvas);
+  renderer.setAnimationLoop((time) => { if (visible) frame(time); });
+}
+
+startHeroField(document.querySelector(".hero_canvas"));
+```
+
+Variations: swap the plane for `THREE.SphereGeometry` vertices for a globe of points, raise `size` and lower the count for bokeh, or map `scrollY` into `t` for a scroll-scrubbed field.
+
+## Opinionated Guidance
+
+Put a [CSS gradient atmosphere](gradient-atmosphere.md) behind the canvas. When WebGL fails, the hero still looks intentional instead of empty.
+
+## Platform-Specific Guidance
+
+Cap device pixel ratio at 2, request `low-power`, and pause rendering offscreen; a 10k-point field updated on the CPU is fine on laptops but should drop to about half the points on phones if frame rate matters. Import three.js as an ES module from a pinned version, never `@latest`.
+
+## Unsupported Absolutes
+
+Point counts and wave constants were tuned for one hero. They are not a performance guarantee; measure on the slowest device you care about.
+
+## Verification Contract
+
+The showcase check reports no page errors with or without network access to the CDN. Under reduced motion, only a still frame renders. The canvas is `aria-hidden` and holds no focusable content.
+
+## Source, License, And Attribution
+
+Locally authored recipe. three.js is MIT licensed and loaded at runtime; no three.js source is reproduced.
+
+## IA Navigation
+
+Parent: [Expression](../index.md).
+Next: [Brand Studies](../brand-studies.md).

package/guides/vocabulary.md

@@ -15,7 +15,7 @@ Primary role: vocabulary and scannability contract.
 - Canonical: `domain`
   - Concept: top-level knowledge ownership
   - Definition: A governed StyleGallery decision surface with a named scope, exclusions, lifecycle, source-of-truth, validator, and review owner.
-  - Use for: Layout, Motion, Design Engineering, Game UI, Platform Guides, Design Terminology, root routing, and `domain` frontmatter on governed leaves.
+  - Use for: Layout, Motion, Design Engineering, Platform Guides, Design Terminology, Expression, root routing, and `domain` frontmatter on governed leaves.
 - Canonical: `category`
   - Concept: domain-local browse placement
   - Definition: A canonical grouping inside one domain; it cannot change the owning domain or its evidence boundary.

package/index.md

@@ -4,7 +4,7 @@ okf_version: "0.1"
 
 # StyleGallery
 
-StyleGallery is an OKF-style knowledge bundle organized into governed interface-knowledge domains. Existing Layout paths remain canonical while Motion, Design Engineering, Game UI, Platform Guides, and Design Terminology own separate product and reference boundaries.
+StyleGallery is an OKF-style knowledge bundle organized into governed interface-knowledge domains. Existing Layout paths remain canonical while Motion, Design Engineering, Platform Guides, Design Terminology, and Expression own separate product and reference boundaries. Finished expressive pages live in the Showcase work area.
 
 Primary role: OKF bundle map.
 
@@ -14,9 +14,10 @@ Primary role: OKF bundle map.
 - [Layout](layout/index.md) - Existing spatial patterns, recipes, planning guides, and layout quality routes.
 - [Motion](motion/index.md) - Motion terminology, review workflow, and evidence-bounded practice reference.
 - [Design Engineering](design-engineering/index.md) - Product-layer interface-craft decisions and verification questions.
-- [Game UI](game-ui/index.md) - Game-interface classification, hierarchy, reference records, and named engine implementation guides.
 - [Platform Guides](platform-guides/index.md) - Bounded comparative references for named platforms.
 - [Design Terminology](design-terminology/index.md) - Source-kind and concept-family classification, typed term relations, and cross-system conflict cases for named vocabulary sources.
+- [Expression](expression/index.md) - Art-direction briefs, named directions with starting values, visual technique recipes, and brand-study policy.
+- [Showcase](showcase/README.md) - Free-form expressive works checked by outcome instead of Layout authoring rules.
 - [Consumer reference](consumer-reference/index.md) - Shared non-domain receiver contract for declared repository-local JSON records or reasoned non-applicability.
 - [Agent-Native StyleGallery](consumer-reference/agent-native/README.md) - Machine-facing identity, retrieval, operation, CLI, read-only MCP, task projection, and governed-learning contracts.
 - [Consumer migration readiness](design-engineering/consumer-migration-readiness.md) - Experimental Design Engineering method for consumer-owned conformance, runtime proof, and source-bound page evidence.
@@ -40,6 +41,5 @@ Primary role: OKF bundle map.
 
 - [Motion Decision Tree](motion/decision-tree.md) - Choose a behavior from the user task.
 - [Design Engineering Decision Tree](design-engineering/decision-tree.md) - Route the uncertain product decision.
-- [Game UI Decision Tree](game-ui/decision-tree.md) - Choose by player task and ownership.
 - [Platform Adaptation Workflow](platform-guides/adaptation-workflow.md) - Record native facts, target decisions, and fallbacks.
 - [Design Term Comparison Workflow](design-terminology/comparison-workflow.md) - Resolve a source-specific question and produce a scoped handoff.

package/log.md

@@ -1,5 +1,69 @@
 # StyleGallery Log
 
+## 2026-09-28
+
+Understood as: switch the repository package manager from npm to Bun and release `stylegallery@0.1.8`.
+
+- Replaced `package-lock.json` with `bun.lock`, migrated from the npm lockfile so every one of the 184 resolved package versions and the `brace-expansion` override are unchanged, and declared `"packageManager": "bun@1.3.14"`. Scripts still run on Node.js 22; Bun installs dependencies and runs package scripts.
+- CI workflows add `oven-sh/setup-bun` pinned by commit, install with `bun install --frozen-lockfile --ignore-scripts`, and run `bun run` and `bunx playwright`. Playwright container jobs install `unzip` first because the pinned image does not include it. The setup-bun pin joins the immutable action pins.
+- New capture sessions and the conformance matrix source binding hash `bun.lock` in place of `package-lock.json`; the capture-session schema accepts `bun.lock` as a source path and still accepts `package-lock.json` for earlier sessions. Existing capture evidence remains bound to its recorded revision.
+- With owner approval, the sentinel-calibration and page-evidence records and their validator constants were refreshed for the new workflow bytes, including the calibration and page-evidence job hashes and the protected hashes of `scripts/run-consumer-page-evidence-ci.mjs` and `quality/evidence/executable-evidence.md`, whose commands now name Bun. Owners, deadlines, and decisions are unchanged.
+- Development commands in the documentation now use `bun run`. Consumer install commands such as `npx stylegallery` and `npm install --global stylegallery` are unchanged because the package is still published to the npm registry.
+
+Consumer reference: not_applicable
+Consumer reference reason: This change replaces the repository package manager and selects no consumer-reference profile or record.
+
+Understood as: remove the Game UI domain from the repository together with the Expression change.
+
+- Removed the Game UI domain: its thirteen governed files under `game-ui/`, the Unity organization-wiki and Unity source-contract validators with their fixture tests and CI steps, and every route, manifest row, governance row, ownership entry, quality scenario, validator requirement, example link, and packaged path that referred to it. Earlier log entries remain as history.
+- The domain set is Layout, Motion, Design Engineering, Platform Guides, Design Terminology, and Expression. Domain-count sentences return to six governed domains, so `quality/evidence/executable-evidence.md` returns to its previously sealed bytes. Material v2 admits 180 documents.
+- Removing the two Unity steps changed `.github/workflows/validate.yml`. With owner approval, only the whole-file active and derived retired workflow hashes were refreshed in the sentinel-calibration and page-evidence records and their validator constants; the calibration and page-evidence job bytes, owners, deadlines, and decisions are unchanged. The A2A and AG-UI extension source inventories were regenerated for the edited documents.
+
+Consumer reference: not_applicable
+Consumer reference reason: This change removes a documentation domain and its validators and selects no consumer-reference profile or record.
+
+## 2026-09-27
+
+Understood as: let StyleGallery produce finished, expressive pages without loosening the Layout contract, and keep only the parts that belong in the official repository.
+
+- Added Expression as a governed domain: a direction brief, an unofficial brand-study policy, two named directions with concrete values (Nocturne Editorial, Warm Print), and three visual technique recipes (gradient atmosphere, grain and texture, WebGL hero field). Expression owns art direction; it owns no Layout mechanics, motion timing, or governed tokens.
+- Added two executable Motion techniques: scroll choreography (GSAP ScrollTrigger with Lenis on one ticker, pinned horizontal travel, a CSS scroll-timeline alternative) and kinetic type (split-word rises, scroll-lit paragraphs, count-ups, marquees).
+- Added the `showcase/` work area, which is not a domain: a work contract, a QA contract with fifteen ideal-state properties and twenty-one scenarios, the outcome checker `scripts/check-showcase.mjs`, its fixture self-test, and `scripts/serve-showcase.mjs`. Layout authoring rules do not apply to showcase CSS; outcome checks for overflow, focus, contrast, reduced motion, honest actions, hash navigation, short viewports, offscreen loops, and offline and no-script reading do. No works are committed.
+- Added the Creative Build Route to AGENTS.md and registered the domain in the manifest, root routes, governance, ownership, IA, and domain validators and fixtures, and admitted the eleven new documents to Material v2.
+- The A2A and AG-UI extension source inventories were regenerated for the edited caller documents, as in the 2026-09-21 research expansion.
+
+Consumer reference: not_applicable
+Consumer reference reason: This change adds domain guidance and showcase tooling and selects no consumer-reference profile or record.
+
+## 2026-09-22
+
+- Prepared `stylegallery@0.1.7` with direct website capture, transcription, and workflow commands in the SG CLI and MCP. The compiler remains a separately installed checkout; frozen v1 knowledge entrypoints remain available.
+- Routed faithful reconstruction, adaptation, and sale-package work through the compiler's task-aware workflow. Reconstruction prioritizes usable original media, additional observation, explicit replacement decisions, and visual QA. The automatic sale-edition builder is labeled as a package preview.
+- Added compiler transport, cancellation, packaged-install, and local real-capture checks. These verify the integration; they do not establish an improvement in clone quality.
+
+Implementation handoff: `consumer_reference: consumer-reference/agent-native/registry.json`.
+
+Consumer reference: declared
+Consumer reference record: consumer-reference/agent-native/registry.json
+
+## 2026-09-21
+
+Understood as: substantially enrich Motion, Design Engineering, Platform Guides, and Design Terminology with primary-source research integrated into governed local documents. The user excluded Layout and Game UI from this work.
+
+- Added twelve local research guides: motion accessibility/interruption/rendering; native interaction contracts, multilingual input, and asynchronous feedback; platform adaptation/preferences/input; and token, interaction, and typography semantics. Each separates source-backed findings, local proposals, failure cases, and unexecuted verification scenarios.
+- Inspected 66 cited official source pages on 2026-09-21. Recorded source status and target-version limits; read Apple page bodies through official documentation JSON when the HTML reader exposed a JavaScript shell. Preserved prior source-review dates for unrelated term records.
+- Added fourteen source-qualified terms and nine scoped relations, bringing the terminology tables to twenty-five terms and seventeen relations. These are author-reviewed experimental judgments, not independent semantic approval.
+- Registered the twelve leaves in domain membership, local navigation, the closed Material v2 admission set, and npm packaging. The admitted corpus has 181 documents. New guidance remains experimental and does not add profile values, native implementations, or a domain.
+- Verified Markdown structure, links, IA, governance, domain membership, terminology, consumer handoffs, and material admission in an isolated checkout of the research changes. Domain/terminology/governance, consumer/evidence, and frozen-v1 regression suites passed; package installation and CLI/MCP retrieval passed. Fixed the package inventory test's omission of the three existing license/notice files while preserving its exact allow-list assertion.
+- Checked every cited URL and fragment. Applied two fresh-reader corrections to the term-comparison method and contributor verification route. Eight author-selected search probes retrieved the intended guide within the first two results; these are retrieval smoke checks, not an independent usability evaluation. No browser, native IME, assistive-technology, or product performance execution is claimed.
+
+Implementation handoff: `consumer_reference: consumer-reference/agent-native/registry.json`.
+
+Consumer reference: declared
+Consumer reference record: consumer-reference/agent-native/registry.json
+
+Terminology reliance: `dtcg.alias`, `fluent.alias-token`, `fluent.global-token`, `carbon.color-token`, `dtcg.resolver-modifier`, `html.popover`, `apple.popover`, `html.dialog`, `aria.dialog`, `apple.text-style`, `fluent.type-ramp`, `material3.typography`, `dtcg.typography`, `css.font`, `dtcg.token`, `dtcg.group`, and `css.custom-property`. Relation types used: `partial_overlap`, `implementation_representation`, and `not_comparable`. Named sources for these terms were rechecked on 2026-09-21; the older Figma, historical-format, component/pattern, and Layout relations retain their original review scope. Direct locators and boundaries are in [Term Cases](design-terminology/conflict-cases.md).
+
 ## 2026-09-09
 
 - Added a full-page fixed-viewport scene-navigation example with chapter hashes/history, wheel-burst gating, keyboard and art-surface swipe navigation, native copy overflow, immediate reduced-motion transitions, and a complete reading escape.

package/motion/accessible-motion.md

@@ -0,0 +1,90 @@
+---
+type: Domain Guide
+title: Accessible Motion And Equivalent Feedback
+description: Separate motion preferences, automatic updates, flashing, and semantic feedback before designing reduced-motion behavior.
+domain: motion
+lifecycle: experimental
+provenance_kind: local
+reviewed_on: 2026-09-21
+---
+
+# Accessible Motion And Equivalent Feedback
+
+Primary role: source-backed motion accessibility decision guide.
+
+## Repository Boundary
+
+This page owns product-motion decisions and their evidence requirements. Shared [accessibility evidence](../quality/evidence/accessibility.md) governs conformance claims. No motion values or decorative declarations become reusable Layout CSS.
+
+## Reusable Method
+
+Inventory each effect by trigger, duration, affected area, information conveyed, and available controls. Evaluate the separate source conditions below; one reduced-motion media query is not a complete accessibility review. Then specify an equivalent path that exposes the same information and actions with less movement.
+
+### What The Sources Establish
+
+| Source | Bounded finding | Decision it informs |
+| --- | --- | --- |
+| [WCAG 2.2 SC 2.3.3 explanation](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) | The AAA criterion concerns disabling interaction-triggered motion animation unless essential. | Identify extra movement induced by scrolling, dragging, expanding, or changing routes. |
+| [SC 2.2.2 explanation](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) | The A criterion has distinct conditions for automatically moving information and automatically updating information. The latter has no five-second exception. | Audit rotating content and live updates separately from a short transition. |
+| [SC 2.3.1 explanation](https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html) | Flash evaluation includes frequency and defined area/luminance thresholds. | A pause button cannot substitute for evaluating flashing content. |
+| [Media Queries Level 5](https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion) | `prefers-reduced-motion` exposes a preference; it does not select an application-specific replacement. | Author the replacement and verify preference changes. |
+| [SC 4.1.3 explanation](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) | Status information can require programmatic exposure without moving focus. | Preserve feedback when a spinner, movement, or success effect disappears. |
+
+WCAG Understanding pages are informative explanations of the [normative WCAG 2.2 requirements](https://www.w3.org/TR/WCAG22/). Media Queries Level 5 is a Working Draft. These sources do not establish implementation support for a particular browser or certify a product.
+
+### Classify Before Replacing
+
+| Product behavior | Local replacement proposal | Failure to look for |
+| --- | --- | --- |
+| Scroll-linked zoom into a product detail | Keep the reading sequence; switch details at explicit boundaries or expose them together. | Essential copy is available only at an intermediate animation frame. |
+| Reordering a list | Update the order and selection immediately; provide a concise completion message if needed. | Visual order changes while reading order or selected identity does not. |
+| Loading shimmer | Use a stationary placeholder and textual waiting state. | The placeholder is mistaken for loaded content or the request appears to have stopped. |
+| Modal entrance | Present the usable modal immediately, with the same focus and dismissal contract. | Focus is delayed until a completion event that never fires in reduced mode. |
+| Automatically advancing announcement | Provide durable stop/control behavior appropriate to the applicable criterion. | Moving focus elsewhere restarts an update the user had paused. |
+| Success celebration | Retain the durable success state and next action. | Removing confetti also removes the only completion signal. |
+
+These are proposed product choices, not W3C-prescribed recipes. A fade is another effect to evaluate; reducing translation does not prove that every replacement is comfortable.
+
+### Preference Changes During Work
+
+Record whether an in-product setting inherits the system preference or further reduces motion. Define how an active effect settles when the effective preference changes. The settlement must preserve the current task, release transient visual resources, and make the destination usable. Avoid replaying an entrance merely because the preference changed back.
+
+Separate pausing the presentation from pausing the underlying process. A dashboard may stop replacing visible figures while data collection continues. A resumed display must say whether it shows current information or replays buffered history. For transaction feedback, stopping an animation never means a server write was cancelled.
+
+## Opinionated Guidance
+
+Start with a complete stationary interaction, then add motion with a named explanatory purpose. This makes the no-motion path directly inspectable. Keep user-chosen pauses durable across focus changes and make preference controls reachable before the effect they govern.
+
+Do not infer an accessibility need from a device class. The effective preference, explicit user action, and actual interaction matter more than a touch/desktop label.
+
+## Platform-Specific Guidance
+
+Web CSS and script-driven effects need a coordinated preference owner. Native Reduce Motion behavior belongs to its named OS/API; see [Preferences And Accessibility](../platform-guides/preferences-and-accessibility.md). Animated media, canvas, and embedded content require their own controls and evidence because disabling a CSS transition does not govern them.
+
+## Unsupported Absolutes
+
+“Under five seconds is accessible,” “a crossfade is always safe,” and “the media query makes the page WCAG AA compliant” are unsupported. A criterion's conformance level is not a reason to claim that another criterion covers its behavior.
+
+## Verification Contract
+
+The following cases are unexecuted test designs. Record actual outcomes in the consumer's evidence, including source revision, browser/OS, input, effective preference, and the asserted result.
+
+| Case | Required observation |
+| --- | --- |
+| Reduced motion is active before load | Essential content and actions appear without waiting for motion. |
+| Preference changes halfway through a transition | The active task settles once; no stranded overlay, stale focus, or rejected-promise error remains. |
+| Keyboard activates the same action | The destination and feedback match the pointer path. |
+| Animation support is removed | The state transition still completes. |
+| User pauses automatic information, then tabs away | The pause persists; resumption follows the documented policy. |
+| Visual completion feedback is removed | The result remains available visually and through relevant assistive technology. |
+
+Source inspection verifies the criterion distinctions. DOM checks can verify state and focus; recordings can reveal movement. Neither alone establishes vestibular comfort or screen-reader announcement behavior. Re-review when source conditions, effect ownership, or the target runtime changes.
+
+## Source, License, And Attribution
+
+Locally authored synthesis. All linked external sources were inspected on 2026-09-21. No upstream prose, example code, or assets are reproduced. `consumer_reference: not_applicable` because this guide selects no consumer implementation record.
+
+## IA Navigation
+
+Parent: [Motion](index.md).
+Next: [Interruption And Retargeting](interruption-and-retargeting.md).

package/motion/index.md

@@ -17,6 +17,8 @@ Out of scope: universal timing or easing rules, unmeasured performance claims, a
 | Build a scroll-driven product story and inspect runnable examples. | [Scroll-driven Story](interaction-recipes.md#scroll-driven-story) and [Scroll Story Lab](../examples/scroll-story/README.md) |
 | Keep the page fixed while navigating between full-screen chapters. | [Full-viewport Scene Navigation](interaction-recipes.md#full-viewport-scene-navigation) and [runnable example](../examples/scene-navigation/README.md) |
 | Apply feedback, disclosure, modal, reorder, progress, and drag contracts. | [Motion Interaction Recipes](interaction-recipes.md) |
+| Copy a working GSAP ScrollTrigger and Lenis setup, pinned horizontal travel, or a CSS scroll-timeline scrub. | [Scroll Choreography Technique](techniques/scroll-choreography.md) |
+| Copy split-word headline rises, scroll-lit paragraphs, count-ups, or a marquee. | [Kinetic Type Technique](techniques/kinetic-type.md) |
 
 These workflows and worked cases are usable experimental guidance. Expected-result tables are test designs; actual product, engine, and reader evidence must be recorded separately. Review on a failed task, a source change, or a changed ownership contract.
 
@@ -25,6 +27,13 @@ These workflows and worked cases are usable experimental guidance. Expected-resu
 - [Motion Vocabulary](vocabulary.md) maps observed behavior to implementation-neutral terms while preserving ambiguity.
 - [Motion Review Workflow](review-workflow.md) structures evidence-first review and remediation.
 - [Motion Practice Reference](practice-reference.md) classifies mechanics, heuristics, platform notes, and unsupported claims.
+- [Observed Choreography Transcription](observed-choreography.md) transcribes an observed scroll choreography into Scene Composition Contract vocabulary.
+
+## Source-Backed Deep Dives
+
+- [Accessible Motion And Equivalent Feedback](accessible-motion.md). Separate motion preferences, automatic updates, and equivalent feedback.
+- [Interruption And Retargeting](interruption-and-retargeting.md). Resolve repeated input, cancellation, and stale completion callbacks.
+- [Motion Rendering And Performance](rendering-and-performance.md). Choose native mechanisms and diagnose measured delivery failures.
 
 ## Domain Contract
 

package/motion/interaction-recipes.md

@@ -60,7 +60,13 @@ Trace: pending → cancellation requested → confirmed cancelled or completed;
 
 Use when direct manipulation previews a change before commitment. Separate the preview value from the committed value. Release on a valid target commits; cancellation restores or reconciles with the current model. A new gesture retargets from the presented position where continuity is intended. Provide a task-equivalent non-drag operation.
 
-Test release inside/outside, cancellation, pointer loss, a changing destination, and repeated reversal. Focus and the selected item must remain traceable while visual position changes. The engine or browser adapter owns gesture events; the product owns acceptance of the new value.
+The non-drag operation has two separate audiences. [WCAG 2.2 Success Criterion 2.5.7 Dragging Movements](https://www.w3.org/TR/WCAG22/#dragging-movements) (Level AA) asks that functionality operated by dragging also be achievable with a single pointer without dragging: a click or tap, not a held path. Its [Understanding document](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html) states that keyboard equivalence does not meet this criterion by itself unless those controls can also be clicked or tapped, and that the keyboard and single-pointer requirements are evaluated independently. A sortable list with arrow-key reordering therefore still needs pointer-operable move controls, and move buttons that only respond to a pointer still need keyboard operation.
+
+Two exceptions bound the criterion. Dragging may remain the only pointer method when it is essential to the task, and the criterion does not cover dragging that the user agent determines and the author has not modified, such as native scrolling. The alternative cannot itself be a path-based gesture such as a swipe or flick; the Understanding document's own examples are tapping a slider track, move controls beside a sortable item, and a text input for a precise value. It does cover content that suppresses native scrolling and interprets the drag itself, which includes a custom carousel, a canvas pan, or the art-surface swipe in [full-viewport scene navigation](#full-viewport-scene-navigation). Record an essential claim with its reason rather than assuming it.
+
+Failure cases: the alternative exists only in a keyboard handler; the alternative appears only on hover, so touch cannot reach it; the alternative commits a different value or skips the validation that release performs; the alternative moves the item but leaves focus or the announced position on the old location.
+
+Test release inside/outside, cancellation, pointer loss, a changing destination, and repeated reversal. Run the same task three ways (drag, single-pointer activation without movement, keyboard only) and compare the committed value and the final focus. Focus and the selected item must remain traceable while visual position changes. The engine or browser adapter owns gesture events; the product owns acceptance of the new value.
 
 ### Scroll-Driven Story
 
@@ -156,7 +162,7 @@ The [Interaction Lab](../examples/domain-interactions/README.md) provides a boun
 
 ## Source, License, And Attribution
 
-Locally authored recipes and HTML. The linked W3C APG pages and Media Queries Level 5 were rechecked on 2026-09-08 for the specific semantics and preference signal above. No upstream examples or timing prescriptions are copied.
+Locally authored recipes and HTML. The linked W3C APG pages and Media Queries Level 5 were rechecked on 2026-09-08 for the specific semantics and preference signal above. WCAG 2.2 (W3C Recommendation, 12 December 2024) and its Understanding page for Success Criterion 2.5.7 (updated 10 August 2026) were rechecked on 2026-09-19 for the criterion text, its two exceptions, and its relationship to keyboard operation; the Understanding page is informative, and the failure cases above are local and unexecuted. No upstream examples or timing prescriptions are copied.
 
 ## IA Navigation
 

package/motion/interruption-and-retargeting.md

@@ -0,0 +1,90 @@
+---
+type: Domain Guide
+title: Interruption And Retargeting
+description: Keep semantic intent, presented motion, cancellation, and teardown consistent under repeated input.
+domain: motion
+lifecycle: experimental
+provenance_kind: local
+reviewed_on: 2026-09-21
+---
+
+# Interruption And Retargeting
+
+Primary role: motion lifecycle and ownership guide.
+
+## Repository Boundary
+
+This page describes presentation behavior when an interaction is interrupted. Application state and request authority remain in [State Management](../design-engineering/state-management/index.md). A presentation controller cannot silently cancel a transaction or overwrite newer semantic intent.
+
+## Reusable Method
+
+For each transition, record four independent facts: the committed application state, the current user intent, the presented visual state, and the current transition identity. Choose which fact authorizes each callback. A visible intermediate frame is not necessarily a valid application state.
+
+### Source Findings
+
+| Source | Bounded finding | Consequence |
+| --- | --- | --- |
+| [Web Animations, cancellation](https://www.w3.org/TR/web-animations-1/#canceling-an-animation-section) | Cancelling a non-idle animation rejects its current finished promise with `AbortError` and resets timing state. | Treat expected cancellation separately from an implementation failure. |
+| [Web Animations, playback](https://www.w3.org/TR/web-animations-1/#the-animation-interface) | Play, pause, reverse, finish, and cancel are distinct operations. | Select an operation by desired lifecycle behavior, not its convenient name. |
+| [CSS Transitions Level 2](https://www.w3.org/TR/css-transitions-2/) | Transition events include cancellation; entry styling can be supplied with `@starting-style` when prior rendered styling is absent. | A normal end event is not the only exit path. |
+| [View Transitions Level 1](https://www.w3.org/TR/css-view-transitions-1/#viewtransition) | Skipping the visual transition does not prevent its DOM update callback. | Visual cancellation is not transaction rollback. |
+| [Pointer Events Level 3](https://www.w3.org/TR/pointerevents3/#the-pointercancel-event) | A pointer stream can be cancelled by the user agent. | A drag needs an explicit cancellation path, not only pointer-up handling. |
+
+These are specification contracts at the documents read on 2026-09-21. Draft maturity and API presence do not prove behavior on a target browser; name the tested implementation separately.
+
+### Choose The Interruption Policy
+
+| Policy | Suitable local scenario | Cost or boundary |
+| --- | --- | --- |
+| Retarget from current presentation | A panel is asked to close before it finishes opening. | Sample or preserve the current pose; do not restart from a stale endpoint. |
+| Reverse the same effect | The underlying states and path are genuinely reversible. | Reversing visual time cannot undo committed external effects. |
+| Settle immediately | Motion is disabled, the surface is disposed, or presentation continuity is unimportant. | Preserve semantic state and focus even when no animation runs. |
+| Coalesce pending presentation | Several updates describe only the newest displayed reading. | Do not drop independent operation acknowledgements. |
+| Queue meaningful steps | The user explicitly needs a sequential demonstration. | Provide interruption or escape; state which queued events can be discarded. |
+
+The policy is a product proposal. Keep the queue bounded and its meaning explicit. A list of queued animations is not an audit log of business actions.
+
+### Worked Race: Open, Close, Open
+
+The user opens a details pane, closes it during entrance, and opens it again during exit. Give each new intent an identity. The oldest entrance completion may release its own animation handle, but it cannot mark the current pane closed, move focus, or remove the latest pane instance.
+
+| Event | Owner action | Invariant |
+| --- | --- | --- |
+| Open A | Commit open intent; establish an accessible pane and entrance effect. | Required semantics do not wait for an effect to finish. |
+| Close B during A | Invalidate A's authority; choose the exit policy and focus destination. | A's completion cannot restore open intent. |
+| Open C during B | Invalidate B; retarget or settle from the current presentation. | B cannot remove C's DOM instance. |
+| B's delayed completion | Clean up only B's resources. | Current intent remains C. |
+| Dispose surface | Invalidate all callbacks; release listeners and handles. | No later callback changes focus or another surface. |
+
+Specify when leaving content stops accepting input. If an exiting visual remains on screen after the semantic close, it must not leave a second active focus surface. Conversely, a modal's focus containment must remain correct until the chosen modal-close operation occurs. Review that timing with the [native interaction contract](../design-engineering/native-interaction-contracts.md).
+
+## Opinionated Guidance
+
+Prefer one owner per animated property and one lifecycle owner per surface. When multiple effects compose, explicitly name the composite rule and cleanup ownership. Do not use a timer equal to a nominal duration as the authority for saving data, unlocking an action, or removing a currently reused element.
+
+For direct manipulation, preserve the position reached by the user. Whether a release should preserve velocity, overshoot, or snap is a local perceptual decision; no spring parameter follows from this ownership model.
+
+## Platform-Specific Guidance
+
+CSS events, Web Animations promises, framework unmount hooks, and native gesture callbacks have different lifecycle semantics. Bind them through the same declared policy without claiming interchangeable APIs. Coordinate reduced-motion settlement through [Accessible Motion](accessible-motion.md).
+
+## Unsupported Absolutes
+
+`cancel()` does not mean “restore the original screen.” A resolved animation promise does not prove a server operation succeeded. A reverse animation does not guarantee that focus, history, or side effects were reversed.
+
+## Verification Contract
+
+Run repeated input at several points in the effect, including immediately before completion. The points are race probes, not statistically representative samples. Record request/intent identity, callback identity, final state, focused element, and remaining active effects.
+
+Exercise normal completion, cancellation, reversal, removal, reduced-motion change, and pointer cancellation. Inject a late callback from the previous transition and verify it cannot remove or refocus the current instance. Compare the no-animation path against the same semantic outcomes.
+
+These are unexecuted scenarios. A model test can prove callback acceptance rules in that model; actual event order and visual continuity require browser evidence. Re-review after a lifecycle adapter or animation API changes.
+
+## Source, License, And Attribution
+
+Locally authored synthesis of the linked specifications, inspected 2026-09-21. No upstream implementation is copied. `consumer_reference: not_applicable` because the example specifies a proposed interaction and selects no consumer record.
+
+## IA Navigation
+
+Parent: [Motion](index.md).
+Next: [Rendering And Performance](rendering-and-performance.md).

package/motion/observed-choreography.md

@@ -0,0 +1,73 @@
+---
+type: Domain Guide
+title: Observed Choreography Transcription
+description: Transcribe an observed scroll choreography into Scene Composition Contract vocabulary without copying assets or claiming implementation knowledge.
+domain: motion
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Observed Choreography Transcription
+
+Primary role: observed scroll-choreography transcription workflow.
+
+## Repository Boundary
+
+This workflow turns an externally observed scroll-driven presentation into a transcription record written in the [Scroll-Driven Story](interaction-recipes.md#scroll-driven-story) vocabulary: `start`, `distance`, `scene_ranges`, progress-derived state, and static path. It exists so that a reimplementation study, a review, or an automated capture pipeline can hand a builder one document instead of raw pixels.
+
+It does not authorize copying an observed site's assets, copy, code, or brand into this repository or into a study; it does not add motion or decorative properties to reusable Layout pattern CSS; and a transcription record is an observation of an unaffiliated external artifact, not evidence about this repository's own examples. The consuming study owns its own imagery, copy, and visual values.
+
+## Reusable Method
+
+### Capture Protocol
+
+Record the capture identity before transcribing: URL, capture date, viewport, tool, wait strategy, and total scroll height. Capture in two passes:
+
+1. A coarse scene pass segments the page into scene y-ranges using layout landmarks (full-width blocks) and per-scene representative frames.
+2. A dense timeline pass scrubs at a fixed step (small enough that at least three frames land inside the shortest choreography of interest) and records a frame-difference score between consecutive frames.
+
+Difference-score plateaus near zero indicate static regions; sustained non-zero runs indicate scrubbed choreography; isolated spikes indicate discrete swaps. Keep every frame file; the transcription must cite frames by file name.
+
+### Transcription Record
+
+For each observed scene, write:
+
+- **Scene identity**: name, document y-range, one-sentence job.
+- **Pin observation**: whether a stage visually holds position while the document advances (`start` and `distance` in document pixels), or the scene scrolls through normally (`distance` not applicable).
+- **Scene ranges**: sub-segments as fractions of scene progress, each with the observed state it presents.
+- **Keyframe observations**: for each boundary between sub-segments, the property-level change observed across adjacent frames — content swap, translation, scale, opacity, counter/number roll, media frame advance — stated as direction and rough magnitude, not invented exact values.
+- **Transition profile**: for each sub-segment boundary, how the states mix — `cut` (adjacent frames show only completed states), `blend` (a mid-transition frame shows both states partially visible; record the observed blend width in scroll pixels, bounded below by the capture step), or `slide` (a mid-transition frame shows a state displaced along an axis; record the direction). A consumer without a profile defaults to whatever its own contract prefers, so an omitted profile is a gap worth naming.
+- **Static path**: what a non-animated reading order of the same content would present, so the consumer can build the reduced-motion and no-script alternative required by the [Scroll-Driven Story](interaction-recipes.md#scroll-driven-story) contract.
+- **Asset inventory**: the kind of media carrying the effect (photograph, video, rendered UI, image sequence) and its role. Kinds only; the record never embeds or links a copy of the asset for reuse.
+- **Frame evidence**: the frame files supporting each claim.
+
+Mark anything the captured frames cannot establish as `not observable in captured frames` instead of interpolating a guess. A claim without a citable frame is a gap, not a fact.
+
+### Handoff
+
+A transcription record travels with the capture manifest and difference curve. A consumer maps scene ranges onto the [Scene Composition Contract](interaction-recipes.md#scene-composition-contract): document scroll and sticky geometry stay with Layout responsibilities, progress mapping and teardown with Motion, and all visual values with the consuming product.
+
+## Opinionated Guidance
+
+Transcribe jobs and relationships, not pixel values; a reimplementation that inherits observed exact timings inherits unverified choices. Derive every described state from scene progress so reversal and mid-entry stay well defined in the eventual build. Sampling density bounds what a record may claim: a 500px step cannot support statements about effects shorter than 500px of scroll.
+
+## Platform-Specific Guidance
+
+Record the capture browser, OS, headless mode, and device scale separately from the observed site's behavior; headless rendering, missing fonts, and disabled video autoplay can all change what frames show. For client-rendered pages, note that DOM text accumulates as sections mount, so per-scene text dumps overstate what is visible; treat frames as the primary evidence for visibility.
+
+## Unsupported Absolutes
+
+A transcription proves what frames show at sampled positions, never how the original is implemented — no easing curve, frame rate, library, or performance claim survives from frame differences alone. There is no universal scrub step, difference threshold, or scene count; each capture declares its own. Frame similarity in one direction does not prove reversibility. A transition profile is bounded by sampling: a capture step wider than a transition can prove `blend` only when a mid-transition frame happens to land inside it, and can never prove `cut`.
+
+## Verification Contract
+
+A transcription record is usable when every scene declares a y-range and pin observation, every motion claim cites frame files, every scene has a static path, and every unknown is marked `not observable in captured frames`. Reversibility claims require frames captured in both scroll directions; otherwise mark reversal untested. The record is stale when the source site changes; re-verification means a fresh capture compared against the recorded capture date, never editing old observations in place.
+
+## Source, License, And Attribution
+
+Locally authored workflow, generalized from an internal capture-and-reimplementation study of an external homepage on 2026-09-10. Transcription records describe unaffiliated external sites; they carry the capture identity for provenance and reproduce no external assets, copy, or code.
+
+## IA Navigation
+
+Parent: [Motion](index.md).
+Next: [Scroll-Driven Story](interaction-recipes.md#scroll-driven-story).