stylegallery 0.1.7 → 0.1.9

package/expression/techniques/gradient-atmosphere.md

@@ -0,0 +1,107 @@
+---
+type: Domain Recipe
+title: Gradient Atmosphere
+description: Copy-ready blurred gradient fields, card glows, and gradient text for expressive product pages.
+domain: expression
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Gradient Atmosphere
+
+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
+
+### Aurora Field
+
+Three large radial gradients, blurred together and slowly drifting behind a section.
+
+```html
+<section class="hero">
+  <div class="aurora" aria-hidden="true"><span></span><span></span><span></span></div>
+  <!-- content -->
+</section>
+```
+
+```css
+.hero { isolation: isolate; overflow: clip; position: relative; }
+.aurora { filter: blur(70px) saturate(140%); inset: 0; opacity: 0.55; position: absolute; z-index: -2; }
+.aurora span { animation: drift 18s ease-in-out infinite alternate; border-radius: 50%; position: absolute; }
+.aurora span:nth-child(1) { background: radial-gradient(circle, #ff5a36, transparent 65%); block-size: 60vmax; inline-size: 60vmax; inset-block-start: -20vmax; inset-inline-end: -15vmax; }
+.aurora span:nth-child(2) { animation-duration: 24s; background: radial-gradient(circle, #7b5cff, transparent 65%); block-size: 55vmax; inline-size: 55vmax; inset-block-end: -25vmax; inset-inline-start: -10vmax; }
+.aurora span:nth-child(3) { animation-duration: 30s; background: radial-gradient(circle, #1f6fff, transparent 60%); block-size: 35vmax; inline-size: 35vmax; inset-block-start: 30%; inset-inline-start: 40%; }
+@keyframes drift { to { transform: translate3d(-6vmax, 4vmax, 0) scale(1.15); } }
+@media (prefers-reduced-motion: reduce) { .aurora span { animation: none; } }
+```
+
+`overflow: clip` on the section keeps the oversized blobs from widening the document; without it the page scrolls sideways at 320px.
+
+### Legibility Scrim
+
+When copy sits over the field, add a gradient between the atmosphere and the copy instead of dimming the atmosphere everywhere.
+
+```css
+.hero::after {
+  background: linear-gradient(to top, rgb(7 7 10 / 0.7), transparent 55%), linear-gradient(to right, rgb(7 7 10 / 0.55), transparent 60%);
+  content: ""; inset: 0; pointer-events: none; position: absolute; z-index: -1;
+}
+```
+
+### Card Glow
+
+Two corner radial gradients per card, colored by custom properties set on the card, so each card gets its own light without new classes.
+
+```css
+.card {
+  background:
+    radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--hue-a) 55%, transparent), transparent 60%),
+    radial-gradient(90% 80% at 0% 100%, color-mix(in oklab, var(--hue-b) 45%, transparent), transparent 60%),
+    #111118;
+}
+```
+
+```html
+<li class="card" style="--hue-a:#ff5a36; --hue-b:#7b5cff">...</li>
+```
+
+### Gradient Text
+
+```css
+.accent {
+  background: linear-gradient(100deg, #ff5a36, #ffb454 40%, #7b5cff);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  padding-inline-end: 0.06em; /* keeps italic overhang from being clipped */
+}
+```
+
+## Opinionated Guidance
+
+One atmosphere per viewport. An aurora behind the hero plus glowing cards plus gradient text in the same view reads as noise; stagger them down the page.
+
+## Platform-Specific Guidance
+
+`filter: blur()` on large layers costs GPU memory. Blur the container once, not each blob, and keep blob sizes in `vmax` so the effect scales without re-rasterizing at many sizes. `color-mix()` needs a current engine; provide a plain `rgb()` fallback if you target older browsers.
+
+## Unsupported Absolutes
+
+Blur radius, opacity, and drift duration here were tuned for one dark page. Light grounds need lower opacity and usually no `saturate()`.
+
+## Verification Contract
+
+In the showcase check, the page has no horizontal overflow at 320px, and under reduced motion no infinite drift animation is running. Review the screenshots for text contrast over the brightest part of the field.
+
+## Source, License, And Attribution
+
+Locally authored recipe. No upstream source.
+
+## IA Navigation
+
+Parent: [Expression](../index.md).
+Next: [Grain And Texture](grain-and-texture.md).

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: [Fintech Clarity Direction](../directions/fintech-clarity.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,50 @@
 # StyleGallery Log
 
+## 2026-10-15
+
+Understood as: release `stylegallery@0.1.9` with the machine-verifiable claim records and the scroll-body-shell render oracle from PR #53.
+
+- Bumped the package version from `0.1.8` to `0.1.9`. The release carries PR #53: `scripts/validate-claim-records.mjs` checks the machine-readable fields of every `## Claim Record` section under `quality/claim-records/`, `scripts/check-pattern-oracle.mjs` renders `tests/fixtures/pattern-oracle/scroll-body-shell/index.html` at 320, 768, and 1440 CSS pixels, and the Claim record checks workflow runs both with their fixture tests.
+- The package `files` list is unchanged. The updated `quality/claims.md` and the new `quality/claim-records/samples.md` were already packaged. The two new checks stay repository-only like the other validators (`validate-domains`, `check-showcase`): the claim-record validator imports the unpackaged `scripts/markdown-structure.mjs`, and the oracle needs the development dependencies Playwright and `@axe-core/playwright` plus a fixture under `tests/`, which the package does not ship. Run them from a repository checkout.
+
+Consumer reference: not_applicable
+Consumer reference reason: This change releases a package version and selects no consumer-reference profile or record.
+
+## 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.
 
@@ -33,6 +35,75 @@ These workflows and worked cases are usable experimental guidance. Expected-resu
 - [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.
 
+## Visual Reference: Motion Prompt
+
+[Motion Prompt by @ssaengcho](https://motion-prompt-ssaengcho.soldaeng-guri.chatgpt.site/#top) is an external Korean motion dictionary for comparing effects visually and describing the intended movement. Its interface lists 36 effects and five combinations across entrance/exit, emphasis, sequencing, space, scene transitions, shape/focus, timing, and text.
+
+Use it to select an observable effect, then record the actual product behavior in the [Motion Brief](motion-brief.md): trigger, moving property, start/end state, interruption, reduced-motion alternative, and completion feedback. For example, distinguish moving an element from moving imagery inside a stationary frame, and distinguish changing opacity from revealing through a moving mask.
+
+The dictionary's example durations and prompts are reference choices, not StyleGallery defaults or measured performance guarantees. Its naming is not a replacement for the [Motion Vocabulary](vocabulary.md).
+
+[Run all 41 local examples](https://style.gallery/examples/category/guide/?q=Motion%20Prompt). Every effect and combination has its own execution page, timeline scrubber, restart, pause, reverse, final-state control, and reduced-motion alternative. Local examples use StyleGallery's theme rather than copying the reference site's presentation.
+
+### Complete Effect Inventory
+
+| No. | Source effect | Local execution |
+| --- | --- | --- |
+| 1 | Fade in | [페이드 인](https://style.gallery/examples/guide/motion-prompt-fade/) |
+| 2 | Slide in | [슬라이드 인](https://style.gallery/examples/guide/motion-prompt-slide/) |
+| 3 | Scale in | [스케일 인](https://style.gallery/examples/guide/motion-prompt-scale/) |
+| 4 | Mask reveal | [마스크 리빌](https://style.gallery/examples/guide/motion-prompt-mask/) |
+| 5 | Overshoot | [오버슈트](https://style.gallery/examples/guide/motion-prompt-over/) |
+| 6 | Bounce | [바운스](https://style.gallery/examples/guide/motion-prompt-bounce/) |
+| 7 | Pulse | [펄스](https://style.gallery/examples/guide/motion-prompt-pulse/) |
+| 8 | Shake | [셰이크](https://style.gallery/examples/guide/motion-prompt-shake/) |
+| 9 | Stagger | [스태거](https://style.gallery/examples/guide/motion-prompt-stagger/) |
+| 10 | Typewriter | [타이프라이터](https://style.gallery/examples/guide/motion-prompt-type/) |
+| 11 | Tracking animation | [트래킹 애니메이션](https://style.gallery/examples/guide/motion-prompt-tracking/) |
+| 12 | Trim paths | [트림 패스](https://style.gallery/examples/guide/motion-prompt-line/) |
+| 13 | Zoom in | [줌 인](https://style.gallery/examples/guide/motion-prompt-zoom/) |
+| 14 | Panning | [패닝](https://style.gallery/examples/guide/motion-prompt-pan/) |
+| 15 | Position inside mask | [프레임 내부 이동](https://style.gallery/examples/guide/motion-prompt-crop/) |
+| 16 | Parallax | [패럴랙스](https://style.gallery/examples/guide/motion-prompt-parallax/) |
+| 17 | Cross dissolve | [크로스 디졸브](https://style.gallery/examples/guide/motion-prompt-dissolve/) |
+| 18 | Wipe | [와이프](https://style.gallery/examples/guide/motion-prompt-wipe/) |
+| 19 | Push | [푸시](https://style.gallery/examples/guide/motion-prompt-push/) |
+| 20 | Iris reveal | [아이리스 리빌](https://style.gallery/examples/guide/motion-prompt-iris/) |
+| 21 | Rotation | [로테이션](https://style.gallery/examples/guide/motion-prompt-rotate/) |
+| 22 | Floating | [플로팅](https://style.gallery/examples/guide/motion-prompt-float/) |
+| 23 | Morphing | [모핑](https://style.gallery/examples/guide/motion-prompt-morph/) |
+| 24 | Blur reveal | [블러 리빌](https://style.gallery/examples/guide/motion-prompt-blur/) |
+| 25 | Linear | [리니어](https://style.gallery/examples/guide/motion-prompt-linear/) |
+| 26 | Ease in | [이즈 인](https://style.gallery/examples/guide/motion-prompt-easein/) |
+| 27 | Ease out | [이즈 아웃](https://style.gallery/examples/guide/motion-prompt-easeout/) |
+| 28 | Ease in out | [이즈 인 아웃](https://style.gallery/examples/guide/motion-prompt-easeboth/) |
+| 29 | Text scramble | [텍스트 스크램블](https://style.gallery/examples/guide/motion-prompt-scramble/) |
+| 30 | Karaoke highlight | [가라오케 하이라이트](https://style.gallery/examples/guide/motion-prompt-karaoke/) |
+| 31 | Word by word | [워드 바이 워드](https://style.gallery/examples/guide/motion-prompt-wordreveal/) |
+| 32 | Line by line reveal | [라인 바이 라인 리빌](https://style.gallery/examples/guide/motion-prompt-linereveal/) |
+| 33 | Text wave | [텍스트 웨이브](https://style.gallery/examples/guide/motion-prompt-charwave/) |
+| 34 | Character flip | [캐릭터 플립](https://style.gallery/examples/guide/motion-prompt-charflip/) |
+| 35 | Count up | [카운트업](https://style.gallery/examples/guide/motion-prompt-countup/) |
+| 36 | Text stroke reveal | [텍스트 스트로크 리빌](https://style.gallery/examples/guide/motion-prompt-textstroke/) |
+
+### Complete Combination Inventory
+
+| No. | Source combination | Local execution |
+| --- | --- | --- |
+| 1 | Zoom and fade | [제품을 부드럽게 보여주기](https://style.gallery/examples/guide/motion-prompt-soft-zoom/) |
+| 2 | Upward slide and fade | [제목이 올라오며 나타나기](https://style.gallery/examples/guide/motion-prompt-title-slide/) |
+| 3 | Overshoot and rotation | [로고가 돌면서 톡 나타나기](https://style.gallery/examples/guide/motion-prompt-logo-pop/) |
+| 4 | Tracking contraction and fade | [넓게 퍼진 글자가 모이기](https://style.gallery/examples/guide/motion-prompt-tracking-title/) |
+| 5 | Staggered image and title | [사진 다음에 제목 등장](https://style.gallery/examples/guide/motion-prompt-image-title/) |
+
+### Source And Verification Boundary
+
+Source review: 2026-09-29. The public page, all 36 rendered effects, all five rendered combinations, and their Web Animations tracks were inspected. The first definition file contains 28 effects; a second script adds eight text effects. The local inventory checks both sets and the five combination presets rather than trusting the headline count alone.
+
+The local implementations preserve the observed durations, delays, repetitions, keyframe sequence, and moving properties. Two corrections are explicit: the reference's whole-timeline step easing hides intermediate count-up and scramble values; the local versions step each segment so those values appear. Theme colors and image-example materials differ intentionally. Image combinations reuse an existing project photograph instead of the reference's schematic placeholder.
+
+These are independent implementations with attribution to Motion Prompt / @ssaengcho, not a distribution of its source bundle, prompt collection, or a claim of an upstream license. The website repository records source-file hashes and captured tracks alongside its coverage tests. Chromium observations are not a cross-browser or native-platform conformance claim.
+
 ## Domain Contract
 
 See [StyleGallery Domains](../DOMAINS.md) for lifecycle, provenance, page membership, and staleness rules.

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).