feat(skill): hyperframes core — remove prescriptive tables, bundle text-effects

Rewrites the standalone `hyperframes` skill (the main authoring
skill used by every hyperframes user, not just the
website-to-hyperframes pipeline) to remove prescriptive lookup
tables that drove monoculture output, restore tone, and bundle
24 named text animation effects directly into the skill so
agents don't need a separate install.

This is a +9951/-567 change touching 61 files in `skills/hyperframes/`.
It deserves its own review separate from the capture pipeline and
the website-to-hyperframes pipeline because it affects every
hyperframes user — not just the website-to-video flow.

**Prescriptive tables removed / restructured**

External rater feedback across two rounds identified six lookup
tables agents were pasting wholesale as recipes:
- `visual-styles.md` YAML blocks — completely replaced. Old version
  had 8 styles with full YAML token blocks (colors / typography /
  motion / transition names). Agents copy-pasted. New version
  renames to actual design traditions (Swiss / Late-Modernist
  Editorial / Punk / Maximalist / Computational / Humanist /
  Vernacular / Cinematic) and replaces YAML with prose: "what it
  teaches / where it resonates / pitfalls when borrowing." No
  lookup table.
- `motion-principles.md` — complete rewrite. Old version opened
  every section with "You know these rules but violate them. Stop."
  / "You will try to use 14px. Don't." New version: "Common defaults
  that produce monoculture" framing. All load-bearing GSAP rules
  preserved verbatim (those are correct and critical).
- `beat-direction.md` rhythm table — removed. Replaced with
  questions that derive rhythm from brand + storyboard. Verb table
  regrouped by physical character (Impact / Directional / Reveals /
  Organic / Mechanical) without energy labels.
- `transitions.md` Energy → Transition table + Mood → Type table —
  removed named transitions, replaced with motion-quality
  descriptions (Soft/organic, Directional/purposeful,
  Percussive/instant). Mixing documented: CSS crossfade + shader
  in the same HyperShader composition (verified working).
- `dynamic-techniques.md` energy table — restructured with
  explanatory principles (highlight amplitude, exit style, cycle
  variation) before showing the table as calibration reference.
- `techniques.md` "When to Use What" table — deleted. Replaced
  with "choose techniques based on beat concept, not video genre."
- `typography.md` — "Guardrails / You know these rules but violate
  them" → "Defaults to watch for." Banned fonts gain a caveat:
  if the brand actually uses one of these fonts, use it.
- `video-composition.md` — fixed density contradiction
  ("8–10 visual elements" removed; sparse beats are intentional).

**Text-effects bundle (new)**

24 named text-animation effects shipped as paired specs:
- `assets/text-effects/effects/<id>.json` — GSAP-specific recipe
  agents can paste verbatim
- `assets/text-effects/specs/<id>.json` — portable motion contract
  (engine-agnostic, so the same effect can be re-implemented in any
  animation library)

Catalog at `references/text-effects.md`. Storyboards reference effects
by name (typewriter, kinetic-center-build, shimmer-sweep, …) instead
of saying "fades in," which produced inconsistent typography across
beats.

Effects organized by target:
- Per-character (7): soft-blur-in, per-character-rise, typewriter,
  bottom-up-letters, top-down-letters, stagger-from-{center,edges}
- Per-word (8): per-word-crossfade, spring-scale-in, shared-axis-y,
  blur-out-up, kinetic-center-build, short-slide-{right,down},
  depth-parallax-words
- Per-line (2): mask-reveal-up, line-by-line-slide
- Whole element (7): micro-scale-fade, shimmer-sweep, fade-through,
  shared-axis-{x,z}, scale-down-fade, focus-blur-resolve

Sources adapted from `pixel-point/animate-text`; copied into the
repo so users don't need a separate install.

**Misc cleanups**

- `house-style.md` — light/dark prescription removed; defer to brand.
- `prompt-expansion.md` — `design.md` → `DESIGN.md` casing fixed.
- `html-in-canvas-patterns.md` — Three.js 0.147.0 (legacy
  `examples/js/`) → 0.181.2 (`examples/jsm/` ESM imports);
  `Math.random()` in the shatter example → mulberry32 seeded PRNG
  so output is deterministic.

**.gitignore + CLAUDE.md**

- `.gitignore` catches per-brand video project directories agents
  leave at the repo root (`huly-*/`, `raycast-*/`, `*-demo-*/`,
  `test-runs/`, `test-outputs/`) plus the `videos/` folder
  conventions.
- `CLAUDE.md` documents the local CLI for `capture` + `snapshot`
  (since the published `npx hyperframes` doesn't yet include the
  capture pipeline improvements from this stack) and the local
  shader-transitions build copy convention.

Author: ukimsanov

.gitignore

@@ -20,6 +20,8 @@ Thumbs.db
 # non-generated assets (logos, svgs) that should stay in the repo.
 docs/images/
 
+videos/
+
 # IDE
 .vscode/
 .idea/
@@ -74,6 +76,7 @@ examples/*
 !examples/k8s-jobs
 !examples/k8s-jobs/**
 packages/studio/data/
+
 .desloppify/
 .worktrees/
 
@@ -103,10 +106,22 @@ captures/
 cursor-tests/
 basecamp-video/
 launch-video*/
+!skills/launch-video/
 ab-test/
 compositions/
 video-6-2-patched/
 claude-design-hyperframes-video/
+# Per-site video work at the repo root (huly-*, raycast-*, etc.)
+# Anything under videos/ is already covered above, but agents sometimes write
+# project dirs to the repo root when iterating. Catch the common per-brand
+# patterns and any *-demo-N variants the *-demo/ rule above misses.
+huly-*/
+raycast-*/
+*-demo-*/
+test-runs/
+test-outputs/
+
+# Claude Code worktrees + superpowers docs
 .claude/worktrees/
 .claude/
 docs/superpowers/

CLAUDE.md

@@ -12,6 +12,29 @@ packages/
   studio/    → Browser-based composition editor UI
 ```
 
+## Local CLI
+
+The published `npx hyperframes` is a released version and does **not** include local changes. Use the local CLI for commands where changes are in flight:
+
+```bash
+# Local CLI (use instead of `npx hyperframes` for capture and snapshot):
+npx tsx packages/cli/src/cli.ts <command>
+
+# Examples:
+npx tsx packages/cli/src/cli.ts capture <URL> -o videos/<name>/capture
+npx tsx packages/cli/src/cli.ts snapshot videos/<name> --frames <N>
+```
+
+Commands with local changes: **capture** (paginated contact sheets, fit:contain, SVG root scan), **snapshot** (3-col contact sheet). All other commands (lint, validate, preview, render) can use `npx hyperframes` as-is.
+
+For **shader transitions**, copy the local build into the video project instead of using the CDN — the local build includes CSS crossfade mixing support and other fixes not yet published:
+
+```bash
+cp packages/shader-transitions/dist/index.global.js <project-dir>/hyper-shader-local.js
+```
+
+Then reference `hyper-shader-local.js` instead of the `@hyperframes/shader-transitions` CDN URL in `index.html`.
+
 ## Development
 
 ```bash

skills/hyperframes/SKILL.md

@@ -473,7 +473,8 @@ Skip on small edits (fixing a color, adjusting one duration). Run on new composi
 - **[references/beat-direction.md](references/beat-direction.md)** — Beat planning: concept, mood, choreography verbs, rhythm templates, transition decisions, depth layers. **Always read for multi-scene compositions.**
 - **[references/typography.md](references/typography.md)** — Typography: font pairing, OpenType features, dark-background adjustments, font discovery script. **Always read** — every composition has text.
 - **[references/motion-principles.md](references/motion-principles.md)** — Motion design principles, image motion treatment, load-bearing GSAP rules. **Always read** — every composition has motion.
-- **[references/techniques.md](references/techniques.md)** — 11 visual techniques with code patterns: SVG drawing, Canvas 2D, CSS 3D, kinetic type, Lottie, video compositing, typing effect, variable fonts, MotionPath, velocity transitions, audio-reactive. Read when planning techniques per beat.
+- **[references/techniques.md](references/techniques.md)** — 20 visual techniques with code patterns: SVG drawing, Canvas 2D, CSS 3D, kinetic type, Lottie, video compositing, typing, variable fonts, MotionPath, velocity transitions, audio-reactive, frosted glass, clip-path reveals, WebGL shaders, impact lines, device mockups, aurora gradients, floating particles, terminal UI, moodboard layouts. Adapt the patterns — don't copy-paste.
+- **[references/html-in-canvas-patterns.md](references/html-in-canvas-patterns.md)** — HTML-in-Canvas patterns: live DOM as GPU texture via `drawElementImage` + `layoutsubtree`. Shared boilerplate + ~6 effect recipes (iPhone/MacBook mockups, liquid glass, magnetic, portal, shatter, text cursor). Use for 1–3 hero beats per video.
 - **[references/narration.md](references/narration.md)** — Pacing, tone, script structure, number pronunciation, opening line patterns. Read when the composition includes voiceover or TTS.
 - **[references/design-picker.md](references/design-picker.md)** — Create a design.md via visual picker. Read when no design.md exists and the user wants to create one.
 - **[visual-styles.md](visual-styles.md)** — 8 named visual styles with hex palettes, GSAP easing signatures, and shader pairings. Read when user names a style or when generating design.md.

skills/hyperframes/assets/text-effects/effects/blur-out-up.json

@@ -0,0 +1,53 @@
+{
+  "id": "depth-parallax-words",
+  "visibility": "hidden",
+  "portable_spec": {
+    "id": "depth-parallax-words",
+    "display_name": "Depth Parallax Words",
+    "description": "Per-word depth motion with scale and vertical drift for layered readability.",
+    "inspiration": "Product landing pages combining depth cues with clean typography.",
+    "target": "per-word",
+    "signature_easing": "cubic-bezier(0.22, 1, 0.36, 1)",
+    "enter": {
+      "duration_ms": 700,
+      "stagger_ms": 70,
+      "easing": "cubic-bezier(0.22, 1, 0.36, 1)",
+      "from": {
+        "opacity": 0,
+        "y_px": 18,
+        "scale": 0.92,
+        "blur_px": 3
+      },
+      "to": {
+        "opacity": 1,
+        "y_px": 0,
+        "scale": 1,
+        "blur_px": 0
+      }
+    },
+    "exit": {
+      "duration_ms": 500,
+      "stagger_ms": 45,
+      "easing": "cubic-bezier(0.64, 0, 0.78, 0)",
+      "from": {
+        "opacity": 1,
+        "y_px": 0,
+        "scale": 1,
+        "blur_px": 0
+      },
+      "to": {
+        "opacity": 0,
+        "y_px": -10,
+        "scale": 1.05,
+        "blur_px": 2
+      }
+    },
+    "swap": {
+      "mode": "crossfade",
+      "overlap_ms": 180,
+      "micro_delay_ms": 30
+    },
+    "usage_notes": "Use short copy blocks and moderate stagger to avoid visual overload."
+  },
+  "showcase": null
+}