feat(skill): hyperframes core — remove prescriptive tables, reference text-effects (not vendor)#1006
Merged
Merged
Conversation
…xt-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.
Three concrete bugs found while auditing PR #991: 1. html-in-canvas-patterns.md (#1 in catalog, 3D Rotation with Bloom): The code example used `new THREE.EffectComposer(renderer)` UMD-style namespace access while the ESM imports right below pull them in as bare named imports. Three.js r150+ removed the UMD `examples/js/` globals, so as written the example throws `TypeError: THREE.EffectComposer is not a constructor`. Switched to the bare names matching the imports. THREE.Vector2 stays as-is — Vector2 is on the THREE namespace. 2. techniques.md (#5, Lottie Animation): The CDN path `@lottiefiles/dotlottie-web/dist/dotlottie-player.js` returns 404. `@lottiefiles/dotlottie-web` is the JavaScript SDK, not a web component — its `main` is `dist/index.cjs`. The web-component package is `@lottiefiles/dotlottie-wc` and the custom element is `<dotlottie-wc>`, not `<dotlottie-player>`. Updated both. 3. techniques.md (5 occurrences across Lottie / lottie-web / Video / @font-face examples): asset paths used the `../capture/` pattern that PR #989's `invalid_capture_path` lint rule emits an error for. Replaced all with root-relative `capture/...`. PRs #989 and #991 are no longer self-contradictory.
Per review feedback, these 5 files should not change in this stack: - visual-styles.md — keep main's existing version - house-style.md — keep main's light/dark prescription - references/typography.md — keep main's tone + Banned/Guardrails framing - references/video-composition.md — keep main's density guidance - CLAUDE.md — drop the local-CLI Capture/Snapshot section added in this branch; the local-CLI dev-instruction block for adding CLI commands stays (was already on main, unrelated to skill prose). Net: removes ~545 lines of churn from PR #991's diff.
Removed 7 entries that are not techniques. They're either UI style treatments, hand-rolled CSS templates, or named effects — different kinds of artifacts that don't belong under the same "primitive animation techniques" frame: - 12. Frosted Glass Panels → style treatment - 15. Impact Line on Text Drop → named effect - 16. Device Mockups (Laptop + Phone) → hand-rolled CSS template - 17. Aurora Gradient Backgrounds → style treatment - 18. Floating Particles → style treatment - 19. Terminal UI with Typing → hand-rolled CSS template - 20. Moodboard / Editorial Layout → hand-rolled layout The 13 entries that remain (SVG drawing, Canvas 2D, CSS 3D, Per-Word Kinetic Type, Lottie, Video Compositing, Char Typing, Variable Font, MotionPath, Velocity-Matched Transitions, Audio-Reactive, Clip-Path Reveal, WebGL Shader Art) are real primitives — animation building blocks an agent composes into beats, not finished recipes to lift verbatim. Updated the header to say 13 and point at `registry/blocks/` for pre-built UI templates instead of pretending they're techniques. ToC table and section numbering both updated. Net: -361 / +6 lines.
…hniques count Two follow-ups caught by a post-restructure audit pass: - skills/hyperframes/references/transitions.md:46 had a parenthetical "(derived from visual-vocabulary.md)" pointing at a file deleted earlier in this stack. Drop the parenthetical; the surrounding sentence reads cleanly without it. - skills/hyperframes/SKILL.md:476 still said "20 visual techniques" and listed 7 entries that the techniques.md trim removed (frosted glass, impact lines, device mockups, aurora gradients, floating particles, terminal UI, moodboard layouts). Updated to the actual 13 primitive techniques + a pointer to registry/blocks/ for the pre-built UI templates that used to be conflated with techniques.
Per James and Miguel's review feedback:
James: "you can only reference the skill or recreate things"
Miguel: "I'd just reference the skill without trying to copy
everything"
James: "we can't vendor their artifacts in our own repo"
The 48 vendored text-effects JSON files were direct copies from
pixel-point/animate-text (verified: typewriter.json matches the
upstream byte-for-byte at duration_ms: 240, stagger_ms: 46,
easing: steps(1, end)). That repo has no LICENSE file, so the
files default to "all rights reserved" — Apache 2.0 redistribution
in our repo is a compliance violation.
The earlier "rewrite from scratch" attempt produced JSON that
didn't render correctly (7 of 24 effects broke when I built a demo
HTML to validate them). Rather than keep iterating on a rewrite
that doesn't match the upstream's calibration, this commit drops
the vendored files entirely and updates skill prose to REFERENCE
the upstream skill instead.
### Changes
- Delete `skills/hyperframes/assets/text-effects/` (48 JSON files
+ the dual-directory structure, 8451 lines).
- Rewrite `skills/hyperframes/references/text-effects.md` as a
reference page that:
- Names pixel-point/animate-text as the source of truth
- Explains why we don't ship the catalog (licensing gap)
- Tells sub-agents to load `/animate-text` via Claude Code skill
invocation or `npx skills add pixel-point/animate-text`
- Lists the 24 effect IDs by category as vocabulary (so agents
can name effects in STORYBOARD.md before loading the upstream)
- Documents the fallback path: implement from name + GSAP
knowledge if the upstream skill isn't available
- Update 5 cross-references to reframe the catalog as upstream-
referenced instead of repo-bundled:
- skills/hyperframes/references/techniques.md (TOC pointer)
- skills/hyperframes/references/beat-direction.md (text-anim
guidance bullet)
- skills/website-to-hyperframes/references/capabilities.md
(registry-overview entry)
- skills/website-to-hyperframes/references/step-3-storyboard.md
(storyboard template + Text Animations section format)
- skills/website-to-hyperframes/references/beat-builder-guide.md
(references table row)
### What sub-agents see
Before: read `text-effects.md` → see 24 named effects → read each
spec from in-repo `assets/text-effects/effects/<id>.json`.
After: read `text-effects.md` → see 24 named IDs and a load
instruction → invoke `/animate-text` (or `npx skills add
pixel-point/animate-text`) → read each spec from
`.agents/skills/animate-text/assets/effects/<id>.json` (the
upstream's own files, not vendored copies).
End-user UX cost: one extra `npx skills add` for projects that
want the deterministic catalog. Or accept the fallback where
sub-agents implement from effect name + GSAP knowledge — works
fine for simple effects, less ideal for the 3 layout-aware ones
(kinetic-center-build, short-slide-right, short-slide-down).
Net diff on #991: -8488 lines.
miguel-heygen
previously approved these changes
May 21, 2026
jrusso1020
previously approved these changes
May 21, 2026
Collaborator
jrusso1020
left a comment
jrusso1020
left a comment
There was a problem hiding this comment.
Approving the v2 re-cut with the new text-effects approach.
Content delta verified
First 5 commits of #1006 are byte-equivalent to the first 5 commits of #991 (patch-id match):
#991 / #1006 commits 1-5 (all match):
8a11a80d..., ba5a053a..., ba5128a2..., fbe7a0c2..., 60ae13c7...
Final commit intentionally differs:
- #991 last commit (
8acc71bfpatch-id9c6a7eb9...) — "rewrite text-effects bundle from scratch" - #1006 last commit (
0253c2ccpatch-id28ea8332...) — "reference pixel-point/animate-text — stop vendoring"
The new final commit cleanly implements the directed approach:
- 48
text-effects/*.jsonfiles deleted (verified viagit show --name-status: 48 JSON deletions + 1 additional file from the assets/text-effects/ directory;ls-treeconfirms zero remaining text-effects/*.json in the tree). references/text-effects.mdrewritten as a reference doc — namespixel-point/animate-textas upstream, explains the licensing rationale, gives thenpx skills addinstall path, documents the fallback for when the upstream skill isn't available, lists the 24 effect IDs as vocabulary for storyboards.- 5 cross-references updated as claimed:
skills/hyperframes/references/techniques.mdskills/hyperframes/references/beat-direction.mdskills/website-to-hyperframes/references/capabilities.mdskills/website-to-hyperframes/references/step-3-storyboard.mdskills/website-to-hyperframes/references/beat-builder-guide.md
Important context buried in the commit message
"The earlier 'rewrite from scratch' attempt produced JSON that didn't render correctly (7 of 24 effects broke when I built a demo HTML to validate them)."
Worth flagging because the previous approved SHA (8acc71bf from #991) passed the "genuinely original" check (Magi and I both verified that dimension), but did NOT pass a runtime-correctness check that Ular subsequently ran. The reference-not-rewrite approach in #1006 sidesteps the runtime issue entirely while also satisfying the licensing policy. Better outcome on both dimensions.
Net impact
Net diff on #991: -8488 lines from dropping the vendored bundle. PR size now ~+1009/-154 across 13 files vs the original +9989/-567 across 63 files. Skill rewrites preserved; vendored artifact gone; upstream referenced.
Merge via GitHub UI individually per Ular's commitment.
— Rames Jusso
ukimsanov
dismissed stale reviews from jrusso1020 and miguel-heygen
The base branch was changed.
Collaborator
Author
|
@miguel-heygen last one please ^^ |
miguel-heygen
approved these changes
May 21, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Re-stacked version of #991 (silently lost in yesterday's Graphite stack-merge).
Content of the original #991 PLUS the text-effects license fix Rames flagged. Stacked on #1005 (w2h skill).
What's in this PR
Rewrites the standalone
hyperframesskill (the main authoring skill used by every hyperframes user). Highlights:The original #991 vendored Pixel Point's
animate-textcatalog (48 JSON files) directly into the repo. Rames flagged this as a licensing blocker: upstreampixel-point/animate-texthas no LICENSE file (verified via GitHub API:license: null).Per @james / @miguel guidance ("I'd just reference the skill without trying to copy everything" / "we can't vendor their artifacts in our own repo"), this PR replaces the vendored bundle with a reference-only approach:
text-effects.mdrewritten as a reference doc pointing atnpx skills add pixel-point/animate-textbeat-direction.md,techniques.md, plus the w2h skill'scapabilities.mdandbeat-builder-guide.md(in PR feat(skill): website-to-hyperframes — concept-first authoring + per-beat read protocol #1005)Net diff vs main is ~+1500 insertions / ~+1100 deletions across 66 files (down from the original PR's +9951/-567 once the vendored bundle is removed).
Original review history
graphite-base/988)Layer 4 of 4 (final layer).