mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-09 20:07:39 +00:00

Files

T

James RussoandClaude Opus 4.6 0a0d5d3654 refactor(skills): consolidate 15 skills into 3 (#211 )

* refactor(skills): consolidate 15 skills into 3 for better trigger reliability

Merge 9 GSAP skills (core, timeline, scrolltrigger, plugins, utils, react,
frameworks, performance, effects) and 6 HyperFrames skills (compose, captions,
tts, audio-reactive, marker-highlight, cli) into 3 consolidated skills:

- `gsap` — core API + timelines + performance in SKILL.md; scrolltrigger,
  plugins, utils, react, frameworks, effects in references/
- `hyperframes` — composition authoring rules in SKILL.md; captions, tts,
  audio-reactive, marker-highlight in references/
- `hyperframes-cli` — CLI commands (init, lint, preview, render, etc.)

Why: With 15 separate skills, agents must correctly trigger the right subset
for any task. "Create an animated video with captions" needed 6+ skills to
fire — each with ~90% trigger accuracy means ~53% chance of getting all of
them. With 3 skills, that same task needs just `hyperframes` + `gsap` (~90%
both fire). Progressive disclosure still works via references/ files loaded
on demand.

Also fixes: CLAUDE.md referenced `window.__GSAP_TIMELINE` (incorrect) —
corrected to `window.__timelines`.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat(cli): add --skip-skills flag to init command

Allow skipping the AI coding skills installation prompt during
`hyperframes init` with `--skip-skills`. Useful when skills are
already installed or when the user wants to scaffold without them.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(skills): address code review feedback on consolidation

Restore content lost during over-compression:

- captions: fix overflow to `visible` (not hidden — clips glow effects),
  add container pattern warning, scale headroom formula, and self-lint
  placement guidance
- audio-reactive: restore sampling frequency pattern (per-frame tl.call
  loop vs single tween) and textShadow-on-container gotcha
- effects/typewriter: restore word rotation, appending words, spacing
  with static text, and multi-line cursor handoff patterns
- effects/audio-visualizer: restore spatial mapping conventions, fetch vs
  inline loading, WebGL/DOM rendering approaches, and canvas layering
- hyperframes-cli: restore --strict-all flag in render flags table

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(cli): update build:copy and template for consolidated skill names

- build:copy: reference skills/hyperframes, skills/hyperframes-cli,
  skills/gsap instead of the old 15 skill directory names
- _shared/CLAUDE.md template: update skill table to consolidated names

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-04-06 11:21:49 -07:00

2.5 KiB

Raw Blame History

gsap.utils

Pure helpers on gsap.utils. No registration needed.

Function form: Most utils accept the value as the last argument. Omit it to get a reusable function: gsap.utils.clamp(0, 100)(150). Exception: random() — pass true as the last argument for a reusable function.

Clamping and Ranges

clamp(min, max, value?)

gsap.utils.clamp(0, 100, 150); // 100
let c = gsap.utils.clamp(0, 100);
c(150); // 100

mapRange(inMin, inMax, outMin, outMax, value?)

gsap.utils.mapRange(0, 1, 0, 360, 0.5); // 180
let m = gsap.utils.mapRange(0, 100, 0, 500);
m(50); // 250

normalize(min, max, value?)

Returns 0-1 for the range.

gsap.utils.normalize(0, 100, 50); // 0.5

interpolate(start, end, progress?)

Numbers, colors, or objects with matching keys.

gsap.utils.interpolate(0, 100, 0.5); // 50
gsap.utils.interpolate("#ff0000", "#0000ff", 0.5); // mid color

Random and Snap

random(min, max[, snap, returnFunction]) / random(array[, returnFunction])

gsap.utils.random(-100, 100);
gsap.utils.random(0, 500, 5); // snapped to 5
let fn = gsap.utils.random(-200, 500, 10, true);
fn(); // reusable
gsap.utils.random(["red", "blue"]); // pick one

String form in tweens: x: "random(-100, 100, 5)".

snap(snapTo, value?)

gsap.utils.snap(10, 23); // 20
gsap.utils.snap([0, 100, 200], 150); // nearest

shuffle(array)

Returns shuffled copy.

distribute(config)

Returns a function assigning values by position. Config: base, amount/each, from, grid, axis, ease.

gsap.to(".class", { scale: gsap.utils.distribute({ base: 0.5, amount: 2.5, from: "center" }) });

Units and Parsing

getUnit(value) — gsap.utils.getUnit("100px") → "px"
unitize(value, unit) — gsap.utils.unitize(100, "px") → "100px"
splitColor(color, returnHSL?) — gsap.utils.splitColor("red") → [255, 0, 0]. Pass true for HSL.

Arrays and Collections

selector(scope) — scoped selector: gsap.utils.selector(ref)(".box")
toArray(value, scope?) — convert selector/NodeList/element to array
pipe(...fns) — compose: pipe(f1, f2)(value) = f2(f1(value))
wrap(min, max, value?) — cyclic wrap: wrap(0, 360, 370) → 10
wrapYoyo(min, max, value?) — bounce wrap: wrapYoyo(0, 100, 150) → 50

Do Not

Assume mapRange/normalize handle units — they work on numbers. Use getUnit/unitize.

2.5 KiB Raw Blame History