stylegallery 0.1.7 → 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,40 @@
 # 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.

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.
 

package/motion/techniques/kinetic-type.md

@@ -0,0 +1,145 @@
+---
+type: Domain Recipe
+title: Kinetic Type Technique
+description: Copy-ready split-word headline rises, scroll-lit paragraphs, count-ups, and marquees that keep accessible text intact.
+domain: motion
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Kinetic Type Technique
+
+Primary role: executable motion technique.
+
+## Repository Boundary
+
+Product-layer script and CSS for `showcase/` works and consumer pages. Setup and the `.motion` enhancement gate come from [Scroll Choreography Technique](scroll-choreography.md).
+
+## Reusable Method
+
+### Split-Word Rise
+
+Each word rises out of its own clipped line box. The heading keeps its full sentence as the accessible name, and the visual word spans are hidden from assistive technology.
+
+```js
+function splitHeadings() {
+  for (const heading of document.querySelectorAll("[data-split]")) {
+    heading.setAttribute("aria-label", heading.textContent.replace(/\s+/g, " ").trim());
+    const fragment = document.createDocumentFragment();
+    for (const node of [...heading.childNodes]) {
+      const tag = node.nodeName === "EM" ? "em" : "span";
+      for (const word of node.textContent.split(/(\s+)/)) {
+        if (!word) continue;
+        if (/^\s+$/.test(word)) { fragment.append(" "); continue; }
+        const outer = document.createElement("span");
+        outer.className = "split_word";
+        outer.setAttribute("aria-hidden", "true");
+        const inner = document.createElement(tag);
+        inner.className = "split_inner";
+        inner.textContent = word;
+        outer.append(inner);
+        fragment.append(outer);
+      }
+    }
+    heading.replaceChildren(fragment);
+  }
+}
+splitHeadings();
+gsap.to(".split_inner", { y: 0, duration: 1.3, ease: "expo.out", stagger: 0.06, delay: 0.15 });
+```
+
+```css
+.motion .split_word { display: inline-block; overflow: clip; padding-block-end: 0.08em; vertical-align: top; }
+.motion .split_inner { display: inline-block; transform: translateY(105%); }
+```
+
+The `padding-block-end` keeps descenders from being clipped. Run the split before measuring anything, and only once.
+
+### Scroll-Lit Paragraph
+
+Words start dim and light up with scroll progress.
+
+```js
+for (const paragraph of document.querySelectorAll("[data-words]")) {
+  const words = paragraph.textContent.trim().split(/\s+/);
+  paragraph.replaceChildren(...words.flatMap((word, index) => {
+    const span = Object.assign(document.createElement("span"), { className: "word_dim", textContent: word });
+    return index === 0 ? [span] : [" ", span];
+  }));
+}
+gsap.to(".word_dim", {
+  opacity: 1, ease: "none", stagger: 0.4,
+  scrollTrigger: { trigger: "[data-words]", start: "top 78%", end: "bottom 45%", scrub: true },
+});
+```
+
+```css
+.motion .word_dim { opacity: 0.16; }
+```
+
+### Count-Up
+
+The final number is in the HTML; motion only animates toward it.
+
+```html
+<dd data-count="41920">41,920</dd>
+```
+
+```js
+for (const element of document.querySelectorAll("[data-count]")) {
+  const state = { value: 0 };
+  gsap.to(state, {
+    value: Number(element.dataset.count), duration: 2, ease: "power3.out",
+    onUpdate: () => { element.textContent = Math.round(state.value).toLocaleString("en-US"); },
+    scrollTrigger: { trigger: element, start: "top 88%", once: true },
+  });
+}
+```
+
+Use `font-variant-numeric: tabular-nums` so the width does not jitter while counting.
+
+### Marquee
+
+Pure CSS. Duplicate the content once and translate by half.
+
+```html
+<div class="marquee" aria-hidden="true">
+  <div class="marquee_track"><span>One</span><span>Two</span><span>One</span><span>Two</span></div>
+</div>
+```
+
+```css
+.marquee { overflow: clip; }
+.marquee_track { animation: marquee 32s linear infinite; display: flex; gap: 2.5rem; inline-size: max-content; white-space: nowrap; }
+@keyframes marquee { to { transform: translateX(-50%); } }
+@media (prefers-reduced-motion: reduce) {
+  .marquee_track { animation: none; flex-wrap: wrap; inline-size: auto; white-space: normal; }
+}
+```
+
+The marquee is decorative and `aria-hidden`. Never put the only copy of important text in it.
+
+## Opinionated Guidance
+
+Animate words, not letters. Letter-by-letter reveals look impressive once and read slowly every time after that.
+
+## Platform-Specific Guidance
+
+Splitting text breaks browser hyphenation and some `text-wrap: balance` results across word spans; check the split headline at 320px. Screen readers read the `aria-label`, so keep it identical to the visible sentence.
+
+## Unsupported Absolutes
+
+Stagger and duration values suit short display headlines. Long paragraphs should not rise word by word.
+
+## Verification Contract
+
+Under reduced motion or with no GSAP, every split heading and lit paragraph is fully visible and the marquee is static. `node scripts/check-showcase.mjs` enforces both.
+
+## Source, License, And Attribution
+
+Locally authored technique. GSAP is loaded at runtime under its own license; no library source is reproduced.
+
+## IA Navigation
+
+Parent: [Motion](../index.md).
+Next: [Showcase](../../showcase/README.md).

package/motion/techniques/scroll-choreography.md

@@ -0,0 +1,154 @@
+---
+type: Domain Recipe
+title: Scroll Choreography Technique
+description: Copy-ready GSAP ScrollTrigger and Lenis setup, pinned horizontal travel, scrubbed scenes, and a native CSS scroll-timeline equivalent.
+domain: motion
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Scroll Choreography Technique
+
+Primary role: executable motion technique.
+
+## Repository Boundary
+
+Product-layer script and CSS for `showcase/` works and consumer pages. The document keeps vertical scroll ownership; this technique never adds animation to reusable Layout pattern CSS. For scene contracts and briefs, use [Scroll-driven Story](../interaction-recipes.md#scroll-driven-story) and the [Motion Brief](../motion-brief.md).
+
+## Reusable Method
+
+### 1. Load As Enhancement
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/lenis@1.1.13/dist/lenis.min.js" defer></script>
+<script type="module" src="app.js"></script>
+```
+
+```js
+const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
+const { gsap, ScrollTrigger, Lenis } = window;
+if (gsap && ScrollTrigger && !reduceMotion) {
+  gsap.registerPlugin(ScrollTrigger);
+  document.documentElement.classList.add("motion"); // CSS hides pre-animation states only under .motion
+  startMotion();
+}
+```
+
+```css
+.motion [data-reveal] { opacity: 0; transform: translateY(24px); }
+```
+
+Initial hidden states live behind the `.motion` class. With no script, a failed CDN, or reduced motion, the page stays fully visible.
+
+### 2. One Ticker For Smooth Scroll And Triggers
+
+```js
+const lenis = new Lenis({ lerp: 0.11, wheelMultiplier: 0.9 });
+lenis.on("scroll", ScrollTrigger.update);
+gsap.ticker.add((time) => lenis.raf(time * 1000));
+gsap.ticker.lagSmoothing(0);
+```
+
+Driving Lenis from GSAP's ticker keeps pinned scenes in step with the smoothed scroll. Two separate `requestAnimationFrame` loops make pins jitter.
+
+In-page links should go through Lenis and still move focus:
+
+```js
+for (const link of document.querySelectorAll('a[href^="#"]')) {
+  link.addEventListener("click", (event) => {
+    const target = document.querySelector(link.getAttribute("href"));
+    if (!target) return;
+    event.preventDefault();
+    lenis.scrollTo(target, { duration: 1.4 });
+    target.setAttribute("tabindex", "-1");
+    target.focus({ preventScroll: true });
+  });
+}
+```
+
+### 3. Reveal On Enter
+
+```js
+gsap.to("[data-reveal]", {
+  opacity: 1, y: 0, duration: 1.1, ease: "expo.out", stagger: 0.12,
+  scrollTrigger: { trigger: ".section", start: "top 80%" },
+});
+```
+
+### 4. Scrubbed Scene
+
+Tie a property directly to scroll progress; `scrub: true` follows exactly, a number adds catch-up smoothing in seconds.
+
+```js
+gsap.to(".hero_inner", {
+  yPercent: -18, opacity: 0.25, ease: "none",
+  scrollTrigger: { trigger: ".hero", start: "top top", end: "bottom top", scrub: true },
+});
+```
+
+### 5. Pinned Horizontal Travel
+
+Vertical scroll moves a horizontal track while the section is pinned. Enable it only where it fits and keep a vertical list otherwise.
+
+```js
+const media = gsap.matchMedia();
+media.add("(min-width: 64rem)", () => {
+  const track = document.querySelector(".schedule_track");
+  const distance = () => track.scrollWidth - document.documentElement.clientWidth;
+  gsap.to(track, {
+    x: () => -distance(), ease: "none",
+    scrollTrigger: { trigger: ".schedule", start: "top top", end: () => `+=${distance()}`, pin: true, scrub: 0.6, invalidateOnRefresh: true },
+  });
+});
+```
+
+```css
+.schedule_viewport { overflow: clip; }             /* the track never widens the document */
+@media (min-width: 64rem) { .schedule_track { display: flex; inline-size: max-content; } }
+```
+
+Keep focusable controls out of the moving track, or they can receive focus while translated off-screen.
+
+### 6. Native Alternative: CSS Scroll-Driven Animation
+
+For a single scrubbed property with no library:
+
+```css
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .reveal {
+      animation: reveal linear both;
+      animation-range: entry 10% cover 35%;
+      animation-timeline: view();
+    }
+  }
+}
+@keyframes reveal { from { opacity: 0; transform: translateY(40px); } }
+```
+
+## Opinionated Guidance
+
+Choose three or four scroll scenes per page and make each one say something. A page where everything fades up on scroll has no choreography, only delay.
+
+## Platform-Specific Guidance
+
+Lenis smooths wheel input but leaves native touch scrolling alone by default, which is the right choice on phones. `ScrollTrigger.refresh()` runs on resize; functions for `x` and `end` plus `invalidateOnRefresh` let pinned distances recompute. CSS `animation-timeline` is not available in every engine; wrap it in `@supports`.
+
+## Unsupported Absolutes
+
+Durations, easings, and trigger offsets here were tuned for one page. Pinning is not appropriate for content that must be read at the reader's own pace.
+
+## Verification Contract
+
+A page using this technique passes `node scripts/check-showcase.mjs`: no horizontal overflow while pinned, focus order intact with Lenis active, and all text visible under reduced motion. Review the middle-scroll screenshot to confirm the pinned section clears any fixed header.
+
+## Source, License, And Attribution
+
+Locally authored technique. GSAP and Lenis are loaded at runtime under their own licenses; no library source is reproduced.
+
+## IA Navigation
+
+Parent: [Motion](../index.md).
+Next: [Kinetic Type Technique](kinetic-type.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylegallery",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A governed gallery of portable interface knowledge with knowledge CLIs, website compilation, and MCP servers.",
   "type": "module",
   "license": "MIT",
@@ -23,6 +23,7 @@
   "engines": {
     "node": ">=22"
   },
+  "packageManager": "bun@1.3.14",
   "files": [
     "AGENTS.md",
     "CATALOG.md",
@@ -94,18 +95,14 @@
     "design-terminology/source-vocabularies.md",
     "design-terminology/token-semantics.md",
     "design-terminology/typography-semantics.md",
-    "game-ui/classification.md",
-    "game-ui/decision-tree.md",
-    "game-ui/index.md",
-    "game-ui/reference-record.md",
-    "game-ui/screen-hierarchy.md",
-    "game-ui/screen-recipes.md",
-    "game-ui/unity/architecture.md",
-    "game-ui/unity/cli-loop.md",
-    "game-ui/unity/org-wiki.md",
-    "game-ui/unity/repository-map.md",
-    "game-ui/unity/ui-systems.md",
-    "game-ui/verification-workflow.md",
+    "expression/brand-studies.md",
+    "expression/direction-brief.md",
+    "expression/directions/nocturne-editorial.md",
+    "expression/directions/warm-print.md",
+    "expression/index.md",
+    "expression/techniques/gradient-atmosphere.md",
+    "expression/techniques/grain-and-texture.md",
+    "expression/techniques/webgl-hero.md",
     "guides/decision-tree.md",
     "guides/documentation-mode-taxonomy.md",
     "guides/layout-brief.md",
@@ -124,6 +121,8 @@
     "motion/practice-reference.md",
     "motion/rendering-and-performance.md",
     "motion/review-workflow.md",
+    "motion/techniques/kinetic-type.md",
+    "motion/techniques/scroll-choreography.md",
     "motion/vocabulary.md",
     "patterns/centering/center.md",
     "patterns/centering/index.md",
@@ -263,7 +262,8 @@
     "scripts/sg-mcp.mjs",
     "scripts/sg-server.mjs",
     "scripts/sg.mjs",
-    "scripts/strict-json.mjs"
+    "scripts/strict-json.mjs",
+    "showcase/README.md"
   ],
   "bin": {
     "sg": "scripts/sg-entry.mjs",
@@ -304,6 +304,9 @@
     "validate": "node scripts/validate-reference-artifacts.mjs --manifest consumer-reference/generated/manifest.json --json",
     "validate:component-state": "node scripts/validate-component-state.mjs --json && node scripts/generate-consumer-reference-evidence.mjs --check --json",
     "test:state-management": "node --test scripts/test-state-management-examples.mjs",
+    "test:showcase": "node scripts/check-showcase.mjs",
+    "test:showcase:self": "node scripts/test-check-showcase.mjs",
+    "showcase:serve": "node scripts/serve-showcase.mjs",
     "test:compiler": "node --test scripts/test-sg-compiler.mjs",
     "sg:v1": "node scripts/sg.mjs",
     "sg:mcp:v1": "node scripts/sg-mcp.mjs"