mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
ukimsanov
0ba1df54ed
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.
129 lines
2.6 KiB
Plaintext
129 lines
2.6 KiB
Plaintext
# Dependencies
|
|
node_modules/
|
|
|
|
# Build output
|
|
dist/
|
|
*.tsbuildinfo
|
|
|
|
# Environment
|
|
.env
|
|
.env.local
|
|
.env.*.local
|
|
|
|
# OS
|
|
.DS_Store
|
|
Thumbs.db
|
|
|
|
# Docs media — served from CDN, not committed.
|
|
# Regenerate with scripts/generate-{catalog,template}-previews.ts then upload
|
|
# with `bun run upload:docs-images`. Add explicit negations below for any
|
|
# non-generated assets (logos, svgs) that should stay in the repo.
|
|
docs/images/
|
|
|
|
videos/
|
|
|
|
# IDE
|
|
.vscode/
|
|
.idea/
|
|
*.swp
|
|
*.swo
|
|
|
|
# Test
|
|
coverage/
|
|
.debug/
|
|
|
|
# Producer regression test failures (generated debugging artifacts)
|
|
packages/producer/tests/*/failures/
|
|
packages/producer/tests/distributed/*/failures/
|
|
packages/producer/tests/parity/fixtures/hyperframe.runtime.iife.js
|
|
|
|
# Player perf test results (generated each run, attached as CI artifact)
|
|
packages/player/tests/perf/results/
|
|
|
|
# Rendered output (not test fixtures — those use git LFS)
|
|
output/
|
|
renders/
|
|
!packages/producer/tests/*/output/
|
|
!packages/producer/tests/distributed/*/output/
|
|
|
|
# Composition source media (large binaries)
|
|
compositions/**/*.mp4
|
|
compositions/**/*.mov
|
|
compositions/**/*.MOV
|
|
|
|
# npm pack artifacts
|
|
*.tgz
|
|
|
|
# Logs
|
|
*.log
|
|
npm-debug.log*
|
|
|
|
# Temporary
|
|
tmp/
|
|
.tmp/
|
|
|
|
# Generated files
|
|
packages/core/src/generated/
|
|
packages/producer/src/services/fontData.generated.ts
|
|
|
|
# Local proof / test artifacts
|
|
qa-artifacts/
|
|
my-video/
|
|
examples/*
|
|
# Tracked OSS examples — negations override the blanket `examples/*` ignore.
|
|
!examples/aws-lambda
|
|
!examples/aws-lambda/**
|
|
!examples/k8s-jobs
|
|
!examples/k8s-jobs/**
|
|
packages/studio/data/
|
|
|
|
.desloppify/
|
|
.worktrees/
|
|
|
|
# Playwright MCP browser cache
|
|
.playwright-mcp/
|
|
|
|
# Installed skills (user-specific)
|
|
.agents/
|
|
.claude/skills/
|
|
skills-lock.json
|
|
|
|
# Skills from other PRs (not managed here)
|
|
skills/hyperframes-animation-map/
|
|
skills/hyperframes-contrast/
|
|
|
|
# Capture outputs
|
|
captures/
|
|
# Legacy test captures at repo root (use captures/ instead)
|
|
*-capture/
|
|
*-demo/
|
|
*-ad/
|
|
*-tour/
|
|
*-brand/
|
|
|
|
# Local regression-test and video project scratch directories.
|
|
# These hold per-site captures, compositions, narration audio, rendered MP4s.
|
|
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/
|
|
.worktrees
|