hyperframes-keyframesdi HeyGen

HyperFrames Keyframes Skill.

Una skill per Claude Code e Codex dedicata al motion e al video: punch-in, zoom, reframe, movimenti Ken Burns e keyframe 2D/3D per HyperFrames.

Motion e video
Video

Scarica OpenDesign Guida all'uso

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

--- name: hyperframes-keyframes description: Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video … --- ## Creator editing boundary ## Procedure ## Contract ## Runtime Rules ## GSAP Skeleton ## Keyframe Forms

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

01 Cosa fa

Cosa fa lo Skill hyperframes-keyframes 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

Gestisce punch-in, punch-out, zoom, reframe, movimenti Ken Burns, movimenti di camera, passaggi visual match/whip e keyframe seek-safe 2D/3D per le composizioni HyperFrames. Supporta GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, percorsi, maschere, morph/draw SVG, scie di testo e profondità 3D. I keyframe sono un contratto di posa: stati visibili, identità continua del soggetto, runtime seek-safe, pixel verificati.

Si concentra sul movimento visivo all'interno delle clip, non sull'assemblaggio delle clip o sulla strategia di scena. Richiede costruzione sincrona del runtime, istanze di timeline registrate e timing deterministico. Gli autori verificano con hyperframes lint, check, comando keyframes, diagnostica --shot mirata e snapshot ai tempi di prova.

Che cosa produce

Istanza di timeline GSAP registrata in window.__timelines[compositionId] con paused: true

Vedi l'esempio di prompt ↗

Come funziona

01
Identificare Soggetto e Stati
Identificare il soggetto animato, gli stati visibili, lo stato finale e il runtime prima di creare i keyframe.
02
Scegliere il Meccanismo Più Piccolo
Scegliere il meccanismo più piccolo che dimostri il prompt, consultando references/keyframe-patterns.md solo se il meccanismo non è chiaro.
03
Creare e Registrare
Creare keyframe seek-safe nel runtime dichiarato, costruendo in modo sincrono e registrando l'istanza del runtime.
04
Verificare con la Diagnostica
Verificare usando hyperframes lint, check, comando keyframes, un --shot mirato e snapshot ai tempi di prova.
05
Correggere e Ritestare
Se la prova fallisce, correggere i keyframe di origine e rieseguire la diagnostica di fallimento più piccola prima del rendering.

02 Trova la tua applicazione

Quando usare lo Skill hyperframes-keyframes

Usa lo skill hyperframes-keyframes in Claude Code o Codex quando il lavoro riguarda motion e video di questo tipo. Ambito e limiti sotto sono presi dal file dello skill stesso.

Buona applicazione

Punch-in o punch-out con scala e traslazione a keyframe su un wrapper visivo/crop non temporizzato all'interno della clip
Zoom o reframe fluido multi-stato che mantiene attivo un unico wrapper del soggetto con più stati come scala di posa
Movimento di camera panoramico, reframe o Ken Burns con traslazione animata del wrapper più scala
Movimenti di camera concatenati con beat di trasformazione etichettati su un'unica timeline seek-safe registrata
Match cut o whip pan che preserva geometria, direzione e velocità create

Conosci i limiti

Strategia di scena ampia, design del marchio, reperimento media, sottotitoli o pianificazione video generale
Tagli netti sull'intervallo della fonte, trim, taglio e riordino, che appartengono a hyperframes-core
Rampe di velocità della fonte con un envelope della velocità di riproduzione variabile nel tempo, che non sono supportate
Fotogrammi fermi arbitrari a metà della fonte, che richiedono una pre-elaborazione di un segmento fermo/derivato

Cosa fornire

Pose visibili e stato finaleLe pose necessarie per dimostrare il movimento previsto, incluso lo stato finale che completa l'animazione.

03 Dentro la skill

Regole che lo Skill hyperframes-keyframes impone a Claude Code e Codex

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

Timeline GSAP in pausa
Le timeline GSAP devono usare gsap.timeline({ paused: true }), non devono mai chiamare tl.play() per il movimento critico per il rendering, e devono essere registrate come window.__timelines[compositionId] con una chiave corrispondente a data-composition-id.
Anime.js con autoplay false
Le istanze Anime.js devono avere autoplay: false ed essere inserite in window.__hfAnime con durata e loop finiti.
Keyframe CSS con fill mode
I keyframe CSS richiedono durata e numero di iterazioni finiti, un delay deterministico e animation-fill-mode: both.
Mai usare timer o valori casuali
Non usare mai Date.now(), performance.now(), Math.random() senza seed, trigger di hover/scroll, timer, timeline create in modo asincrono, requestAnimationFrame non registrato o loop infiniti per il movimento critico per il rendering.
Solo canali visibili nei keyframe
Inserire nei keyframe i canali visibili come x/y/z, scale, opacity, clip-path, maschere, non lo stato helper nascosto.
Preservare l'identità dell'oggetto
Preservare l'identità dell'oggetto quando la continuità è importante. Usare il crossfade solo quando il movimento previsto è una sostituzione o una dissolvenza.
Il fotogramma finale fa parte dell'animazione
Il fotogramma finale fa parte dell'animazione, non è una pulizia. Non ripristinare lo stato di riposo se non richiesto. Non terminare su nero se non richiesto.
Nominare soggetti e pose
Nominare il soggetto in movimento e le pose necessarie per dimostrare il movimento previsto, incluso lo stato finale.

04 Mettila al lavoro

Installa hyperframes-keyframes 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-keyframes 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-keyframes

Forma generica del CLI skills per skills/hyperframes-keyframes/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

Add a Ken Burns punch-in to [clip-id] starting at 2.5s: scale from 1.0 to 1.4 over 3 seconds with ease-out, translating the wrapper 15% right and 10% up to reframe on the subject's face. Hold the final framing for 1 second. Register the timeline and verify with a strip shot showing the route.

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:

Eseguire il lint di hyperframes per verificare la presenza di problemi strutturali
Eseguire il check di hyperframes per validare la composizione
Esegui hyperframes keyframes con --shot e --samples per verificare target, stop, percorsi e spaziatura temporale
Usa --layout strip per verificare il movimento in loco, le sovrapposizioni, il contatto e le sottili variazioni di scala/opacità
Usa --ghost con --angle per verificare canvas, WebGL, il movimento degli shader e la proiezione di profondità 3D
Esegui uno snapshot al primo frame, delle pose di verifica, del final-minus-hold e del frame finale esatto per verificare maschere, leggibilità del testo, stato completo e assenza di code nere/di reset

In OpenDesign importa hyperframes-keyframes dal suo link SKILL.md: Plugins → Add → Skill → Import from link, quindi 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-keyframes/SKILL.md Checksum del contenuto registrato alla verifica; commit 558c11b
License: Apache-2.0 Da LICENSE.
Stelle del repository: 49.761 Snapshot GitHub scattata il 14/09/2026 per l'intero repository heygen-com/hyperframes, che contiene 9 skill in questo catalogo. Non è una valutazione né un conteggio di utilizzo per hyperframes-keyframes.
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

Confine di editing del creatorI keyframe gestiscono il movimento visivo; il core gestisce l'assemblaggio dei clip, il trim, la giunzione, gli offset della fonte e i tagli netti
ProceduraWorkflow in cinque passaggi, dall'identificazione del soggetto e degli stati fino alla creazione, alla verifica e alle correzioni guidate dalla diagnostica
ContrattoNomina soggetti e pose, imposta i keyframe sui canali visibili, preserva l'identità, mantieni gli stati per un tempo sufficiente, tratta il frame finale come animazione
Regole di runtimeTimeline in pausa GSAP, fill-mode both CSS, autoplay false Anime, requisiti di registrazione, pattern proibiti di timer/random/async
Forme di keyframeKeyframe ad array, keyframe percentuali, array di proprietà, parent ease-none con easing per stop, easeEach per una sensazione condivisa
CanaliPreferisci canali del compositor/visivi come x/y/scale/opacity; evita canali di layout/lifecycle come top/left, width/height, display
Scelta del meccanismoTabella che associa le esigenze ai meccanismi più minimi: FLIP, spostamento su percorso, disegno del tratto, interpolazione di forme, stagger, suddivisione del testo, 3D
TimingAnticipazione, accelerazione, verifica del picco, follow-through, overshoot, scelta dell'ease, offset di stagger, hold finali, velocità continua
TestoPreserva le line box, la spaziatura delle parole, la leggibilità, l'adattamento finale; muovi i glifi o le bande mascherate; esegui snapshot dei frame leggibili
SVGDrawSVGPlugin per la crescita del tratto, MorphSVGPlugin per l'interpolazione di forme, converti le primitive in path, suddividi le silhouette complesse
3DUsa perspective, preserve-3d, spostamento in z, rotazione, movimento di camera/mondo, occlusione, ordine dei layer; verifica la profondità con angoli diagnostici
Canvas / WebGLImposta i keyframe di camera, transform dell'oggetto, materiale, uniform dello shader; effettua il rendering dal tempo di HyperFrames; usa --ghost per la verifica

Descrizione della skill

"Usare quando una composizione HyperFrames necessita di un punch-in, punch-out, zoom, reframe, trattamento Ken Burns, movimento di camera, raccordo visivo/whip, o altri keyframe 2D/3D seek-safe; anche per GSAP, keyframe CSS, Anime.js, WAAPI, FLIP, path, maschere, morph/draw SVG, scie di testo, profondità 3D, o diagnostica `hyperframes keyframes`. Non usare per strategia di scena generale, design di brand, reperimento media, sottotitoli o pianificazione video generale."

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

06 Prima di installare

Domande sulla Skill hyperframes-keyframes

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Qual è la differenza tra questa skill e hyperframes-animation?

Questa skill gestisce l'implementazione dei keyframe e le meccaniche del movimento visivo. Usa hyperframes-animation per le ricette di scena generali e la coreografia del passaggio visivo. Usa hyperframes-cli per la documentazione completa dei comandi. Questa skill si concentra sulla creazione, la registrazione e la verifica dei keyframe effettivi.

HyperFrames Keyframes

Eseguire hyperframes-keyframes su un vero task di animazione e video.

Scaricare OpenDesign, importare hyperframes-keyframes dal suo link SKILL.md, incollare il prompt qui sopra e leggere il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

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

Cosa fa lo Skill hyperframes-keyframes in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando usare lo Skill hyperframes-keyframes

Buona applicazione

Conosci i limiti

Cosa fornire

Regole che lo Skill hyperframes-keyframes impone a Claude Code e Codex

Timeline GSAP in pausa

Anime.js con autoplay false

Keyframe CSS con fill mode

Mai usare timer o valori casuali

Solo canali visibili nei keyframe

Preservare l'identità dell'oggetto

Il fotogramma finale fa parte dell'animazione

Nominare soggetti e pose