hyperframes-animationdi HeyGen

HyperFrames Animation Skill.

Una skill per Claude Code e Codex dedicata al motion e al video: regole di animazione, blueprint di scene, transizioni e adattatori runtime per HyperFrames.

Motion e video
Video

Scarica OpenDesign Guida all'uso

heygen-com/hyperframes · skills/hyperframes-animation/SKILL.mdSKILL.md

--- name: hyperframes-animation description: All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie … --- ## Default: compose atomic rules ## Load a blueprint when ## Routing ## Picking a runtime ## Critical Constraints ## Scripts

Front matter e intestazioni di sezione letti dal file originale il 14/09/2026 · 7.755 caratteri in totale

01 Cosa fa

Cosa fa la Skill hyperframes-animation in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Fornisce tutta la conoscenza sull'animazione per HyperFrames: regole di movimento atomiche, blueprint di scene multi-fase, transizioni di scena, tecniche di motion design e sette adattatori runtime (GSAP di default, più Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Gli utenti scelgono 2-4 regole atomiche e le compongono con un'unica timeline GSAP in pausa, oppure caricano un blueprint multi-fase per coreografie complesse a 4-5 fasi, oppure consultano le API specifiche del runtime.

Copre inoltre l'audit delle composizioni esistenti tramite animation-map.mjs e 24 effetti di animazione del testo denominati. GSAP è il default per il 95% del lavoro di motion, coprendo l'orchestrazione delle timeline, le trasformazioni, l'easing e lo stagger. Tutto è nativo per HyperFrames: timeline unica in pausa, seek-safe, deterministica.

Che cosa produce

animation-map.json contenente i dati dell'audit della coreografia con zone morte, coerenza dello stagger e avvisi sul ciclo di vita

Vedi l'esempio di prompt ↗

Come funziona

01
Scegliere e Comporre Regole Atomiche
Selezionare 2-4 regole da rules-index.md e collegarle insieme con un'unica timeline GSAP in pausa. Questo è il workflow predefinito, più rapido rispetto a partire da un blueprint.
02
Caricare un Blueprint per Scene Multi-fase
Quando la scena corrisponde a un template pre-progettato esistente come brand-reveal o social-proof, caricare la sua ricetta da blueprints-index.md per riutilizzare la sua pipeline di fasi.
03
Consultare le API specifiche del runtime
Usare la tabella di routing per trovare gli easing e i controlli timeline di GSAP, i metodi del player Lottie, le API del mixer di Three.js o altra documentazione specifica del runtime secondo necessità.
04
Verificare la Coreografia con animation-map
Eseguire animation-map.mjs per leggere ogni timeline GSAP, enumerare i tween, campionare i bbox, calcolare i flag e generare animation-map.json per verificare zone morte e coerenza dello stagger.

02 Trova la tua applicazione

Quando Usare lo Skill hyperframes-animation

Usa lo skill hyperframes-animation in Claude Code o Codex quando il compito riguarda motion e video di questo tipo. Ambito e limiti sono definiti nel file dello skill stesso.

Buona applicazione

Pattern di movimento atomici selezionati per trigger o tag da rules-index.md
Transizioni di scena guidate da CSS tra due clip
Scene 3D, movimento della camera e visuali basate su shader usando Three.js
Canvas renderizzati su GPU con particelle, liquid glass o shader personalizzati usando TypeGPU

Conosci i limiti

Animare width, height, top o left per cambi di layout

Cosa fornire

Directory di composizioneFornire il percorso della directory di composizione quando si esegue animation-map.mjs per verificare la coreografia.
ID BlueprintQuando la scena corrisponde a un template multi-fase, fornire l'ID del blueprint da blueprints-index.md per caricare la sua ricetta completa.

03 Dentro la skill

Regole che la Skill hyperframes-animation Fornisce a Claude Code e Codex

7 istruzioni concrete, valori predefiniti e limiti che SKILL.md definisce per l'agente — la parte del file che cambia il risultato.

Precalcolare le Costanti di Layout
Non derivare mai le posizioni da getBoundingClientRect al momento del tween.
Il Motion Spaziale Usa Solo Gli Alias di Trasformazione GSAP
Usa x, y, scale, rotation per tutto il motion spaziale. Non animare mai width, height, top o left per le modifiche di layout.
GSAP È il Runtime Predefinito
GSAP è il valore predefinito per il 95% del lavoro di motion, e comprende l'orchestrazione delle timeline, le trasformazioni, l'easing e lo stagger. Tutte le regole atomiche di questo skill si basano su GSAP.
Componi Regole Atomiche per Default
Scegli 2-4 regole da rules-index.md e componile. È più rapido e produce meno codice rispetto a partire da un blueprint.
Più Runtime Possono Coesistere
Più runtime possono coesistere in una composizione. Ognuno registra le proprie istanze sul globale specifico del runtime in modo che HyperFrames possa cercarle tutte in un'unica passata.
Non Leggere i Blueprint in Modo Speculativo
Non leggere un file blueprint in modo speculativo; caricalo solo quando hai già deciso che serve un'orchestrazione a livello di scena.
Le Proprietà Non Spaziali Sono Consentite
L'allowlist consente opacity, color, backgroundColor e borderRadius per i tween di proprietà non spaziali, ma mai width, height, top o left per le modifiche di layout.

04 Mettila al lavoro

Installa hyperframes-animation in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi hyperframes-animation a Claude Code, Codex o al Tuo Agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-animation

Forma generica della CLI skills per skills/hyperframes-animation/SKILL.md; il repository potrebbe documentare un proprio percorso.

Dai alla Skill un Primo Compito di Motion e Video

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

Starter prompt

Build a brand-reveal scene for [product name] using the multi-phase blueprint. The hero text should fade in with elastic ease at y:40, followed by a product card sliding up from y:60 with 0.2s stagger between child elements. Add a subtle pulse to the CTA button starting at 2.5s. Use GSAP as the runtime, ensure all spatial motion uses transform aliases (x, y, scale, rotation), and pre-calculate any layout constants at composition setup. Run animation-map.mjs on [composition directory] and output the audit results.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Conferma che tutte le istanze runtime siano registrate sui rispettivi globali specifici del runtime, così che HyperFrames possa cercarle in un solo passaggio

In OpenDesign importa hyperframes-animation dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionalo nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Branch main
File della skill: skills/hyperframes-animation/SKILL.md Checksum del contenuto registrato alla verifica; commit 558c11b
License: Apache-2.0 Da LICENSE.
Stelle del repository: 49.761 Snapshot GitHub presa il 2026-09-14 per l'intero repository heygen-com/hyperframes, che contiene 9 skill in questo catalogo. Non è un rating o conteggio d'uso per hyperframes-animation.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Predefinito: componi regole atomicheScegli 2-4 regole da rules-index.md e componi con timeline GSAP, più rapido dei blueprint
Carica un blueprint quandoUsalo quando la scena corrisponde a un template multi-fase o serve una coreografia eseguibile a 4-5 fasi
RoutingTabella che mappa i task ai file: rules, blueprints, transitions, techniques, adapters, scripts
Scegliere un runtimeQuando usare GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU
Vincoli CriticiCostanti di layout precalcolate, solo alias di trasformazione GSAP, nessun tween di width/height/top/left
ScriptEsegui animation-map.mjs per verificare la coreografia e generare animation-map.json
Vedi AncheLink a hyperframes-core, hyperframes-creative, hyperframes-cli

Descrizione della skill

"Tutta la conoscenza delle animazioni per HyperFrames — regole di movimento atomico, schemi di scena multi-fase, transizioni di scena, tecniche più ampie di motion-design, E i sette adattatori runtime (GSAP predefinito, più Lottie, Three.js, Anime.js, keyframe CSS, Web Animations API, TypeGPU). Usa per qualsiasi attività di movimento o animazione: scegli 2-4 regole e componi, oppure carica uno schema, oppure cerca l'API specifica del runtime (ad es. ease GSAP / player Lottie / mixer Three.js). Copre anche la verifica della coreografia (mappa dell'animazione) di una composizione esistente e 24 effetti di animazione di testo nominati. Nativo HyperFrames: timeline singola in pausa, seek-safe, deterministico."

Descrizione del front-matter da SKILL.md. Il file completo è di circa 7.755 caratteri. Leggi il file completo su GitHub.

HyperFrames Animation

Esegui hyperframes-animation su un Vero Compito di Motion e Video.

Scarica OpenDesign, importa hyperframes-animation dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-animation

Cosa fa la Skill hyperframes-animation in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando Usare lo Skill hyperframes-animation

Buona applicazione

Conosci i limiti

Cosa fornire

Regole che la Skill hyperframes-animation Fornisce a Claude Code e Codex

Precalcolare le Costanti di Layout

Il Motion Spaziale Usa Solo Gli Alias di Trasformazione GSAP

GSAP È il Runtime Predefinito

Componi Regole Atomiche per Default

Più Runtime Possono Coesistere

Non Leggere i Blueprint in Modo Speculativo

Le Proprietà Non Spaziali Sono Consentite