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>
57 lines
1.4 KiB
Markdown
57 lines
1.4 KiB
Markdown
# GSAP with Vue, Svelte, and Other Frameworks
|
|
|
|
For **React**, see [react.md](react.md).
|
|
|
|
## Principles (All Frameworks)
|
|
|
|
- **Create** tweens/ScrollTriggers **after** DOM is available (onMounted/onMount).
|
|
- **Kill or revert** in unmount cleanup.
|
|
- **Scope selectors** to component root via `gsap.context(callback, scope)`.
|
|
|
|
## Vue 3 (Composition API / script setup)
|
|
|
|
```javascript
|
|
import { onMounted, onUnmounted, ref } from "vue";
|
|
import { gsap } from "gsap";
|
|
|
|
const container = ref(null);
|
|
let ctx;
|
|
|
|
onMounted(() => {
|
|
ctx = gsap.context(() => {
|
|
gsap.to(".box", { x: 100 });
|
|
gsap.from(".item", { autoAlpha: 0, stagger: 0.1 });
|
|
}, container.value);
|
|
});
|
|
|
|
onUnmounted(() => ctx?.revert());
|
|
```
|
|
|
|
## Svelte
|
|
|
|
```javascript
|
|
import { onMount } from "svelte";
|
|
import { gsap } from "gsap";
|
|
|
|
let container;
|
|
onMount(() => {
|
|
const ctx = gsap.context(() => {
|
|
gsap.to(".box", { x: 100 });
|
|
}, container);
|
|
return () => ctx.revert();
|
|
});
|
|
```
|
|
|
|
Use `bind:this={container}` for the root element ref.
|
|
|
|
## ScrollTrigger Cleanup
|
|
|
|
ScrollTriggers inside `gsap.context()` are reverted by `ctx.revert()`. Call `ScrollTrigger.refresh()` after layout changes (nextTick in Vue, tick in Svelte).
|
|
|
|
## Do Not
|
|
|
|
- Create tweens before the component is mounted.
|
|
- Use selector strings without a scope.
|
|
- Skip cleanup — always revert context on unmount.
|
|
- Register plugins inside re-rendering component bodies.
|