gsap
heygen-com / hyperframes
About gsap
GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.
Install gsap
npx skills add https://github.com/heygen-com/hyperframes --skill gsap基本情報
What it does
Create paused timelines synchronously and register them on window.__timelines keyed by data-composition-id for HyperFrames to seek and control
Core methods: gsap.to() , gsap.from() , gsap.fromTo() , gsap.set() with support for stagger, easing, callbacks, and relative values
Use transform aliases ( x , y , scale , rotation ) and autoAlpha for optimal performance; avoid layout property animations
Timeline sequencing via position parameter ( "<" , "+=0.5" , labels) and nesting for complex multi-element choreography
Includes gsap.quickTo() for high-frequency updates, gsap.matchMedia() for responsive and accessibility-aware animations, and finite repeat counts only
More skills in Creative & media
vercel-react-native-skills
vercel-labs / agent-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
remotion-to-hyperframes
heygen-com / hyperframes
Port an existing Remotion (React) composition's source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.
website-to-video
heygen-com / hyperframes
Capture a general website/URL and turn it into a video OF the site — tour, showcase, or social clip built from captured screenshots and the site's own brand assets. Use for portfolio / blog / docs / landing-page showcases. Not a product launch or promo, even from a URL (/product-launch-video). Unclear → /hyperframes.
pr-to-video
heygen-com / hyperframes
Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes.
music-to-video
heygen-com / hyperframes
Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.
animejs
heygen-com / hyperframes
Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.