mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-12 07:09:59 +00:00
James RussoandClaude Opus 4.6
0a0d5d3654
* 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>
92 lines
2.5 KiB
Markdown
92 lines
2.5 KiB
Markdown
# 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?)
|
|
|
|
```javascript
|
|
gsap.utils.clamp(0, 100, 150); // 100
|
|
let c = gsap.utils.clamp(0, 100);
|
|
c(150); // 100
|
|
```
|
|
|
|
### mapRange(inMin, inMax, outMin, outMax, value?)
|
|
|
|
```javascript
|
|
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.
|
|
|
|
```javascript
|
|
gsap.utils.normalize(0, 100, 50); // 0.5
|
|
```
|
|
|
|
### interpolate(start, end, progress?)
|
|
|
|
Numbers, colors, or objects with matching keys.
|
|
|
|
```javascript
|
|
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])
|
|
|
|
```javascript
|
|
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?)
|
|
|
|
```javascript
|
|
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`.
|
|
|
|
```javascript
|
|
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.
|