Communitygithub.com

heygen-com/hyperframes

OS multimédia pour agents : résoudre, générer, opérer et mémoriser chaque besoin média dans un projet HyperFrames en une seule compétence.

Qu'est-ce que hyperframes ?

Cette compétence transforme n'importe quel agent (Claude Code, Cursor, Codex) en un système d'exploitation média complet pour les projets HyperFrames. Avec une seule commande `resolve`, l'agent peut rechercher et obtenir localement des BGM, SFX, images, icônes, logos, voix, corrections colorimétriques ou LUTs, que ce soit depuis le catalogue HeyGen (10 000+ pistes, 75 000+ vecteurs) ou en générant via TTS, musique ou modèles d'image quand le catalogue échoue. La compétence gère aussi la production de voiceover, transcription, sous-titres et suppression d'arrière-plan via un moteur audio partagé, ainsi que des opérations de montage (couper, recadrer, transformer) et la réutilisation d'actifs entre projets. Un aspect clé est le traitement proactif des retours vagues : quand un utilisateur signale qu'une image est sombre, plate, ennuyeuse, ou doit sembler rétro/caméscope/ASCII, l'agent lit un guide de traitements médias pour choisir l'intention primaire et appliquer un filtre ou un réglage sans bruit de fond. La compétence suit des règles strictes pour ne pas harceler : elle ne suggère une amélioration que sur un signal concret (texte sans voiceover, icône emoji, coupure sans SFX, etc.), une fois par projet, et ne mute jamais silencieusement les médias.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/media-use

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Installation du plugin : Avant les commandes de configuration ou de rafraîchissement, suivez les règles d'exécution du plugin lorsque cette compétence se trouve dans un plugin HyperFrames. Les installations autonomes conservent les instructions de mise à jour ci-dessous.

media-use

Le système d'exploitation média pour HyperFrames : résoudre · générer · opérer · mémoriser — chaque type de média, une seule compétence, zéro bruit de contexte.

Première exécution : installez et connectez-vous à l'interface CLI heygen (le chemin d'utilisation gratuite), puis vérifiez avec npx hyperframes media-use resolve --doctor. Configuration et fournisseurs : references/setup-providers.md.

Resolve — le verbe unique

npx hyperframes media-use resolve --type <type> --intent "<description>" --project <dir>

Renvoie une ligne : resolved <id> → <path> (<type>, <metadata>). Toute recherche reste enregistrée sur le disque.

TypeIntention en une ligne
bgmmusique de fond (catalogue HeyGen, 10 000+ pistes)
sfxeffets sonores (bibliothèque de 19 fichiers + catalogue)
imagephotos, arrière-plans (recherche d'actifs HeyGen, 75 000+ vecteurs)
iconicônes, symboles (transparents)
logomarques officielles (theSVG → avatar GitHub → favicon ; jamais redessiné)
voicevoix off TTS (chemin gratuit HeyGen ; Kokoro local optionnel)
gradecandidat de correction mesuré ; le polissage/stylisation large suit les traitements médias
lutfichier .cube validé fourni par l'utilisateur ou explicitement choisi et réutilisable

Avant de résoudre un nouveau fichier, listez les candidats réutilisables avec --candidates et jugez vous-même de leur pertinence — les règles de réutilisation, tous les drapeaux, l'ingestion (--from) et l'adoption sont dans references/resolve.md.

Traiter les retours visuels vagues comme une intention média

Lorsqu'un utilisateur demande explicitement de corriger, polir, styliser, obscurcir, mettre en valeur ou révéler un média photographique, lisez references/media-treatments.md même s'il ne mentionne pas d'étalonnage ou d'effet. Inspectez la vraie balise <img>/<video>, choisissez une intention primaire, puis utilisez la persistance déterministe et la vérification. Utilisez une recette correspondante comme graine testée optionnelle, ou inspectez hyperframes media-treatment --capabilities --json, puis demandez une famille/effet pertinent avec --capability <id> et assemblez un traitement personnalisé à partir des contrôles canoniques. Ne chargez jamais --all pour une création ordinaire. Un traitement peut composer une correction, un préréglage, une finition, des effets shader compatibles, des images clés supportées et des superpositions optionnelles du Registre. Ajoutez uniquement des réglages limités justifiés par la source et des parties compatibles, jamais d'effets simplement pour rendre le résultat plus sophistiqué. Persistez la charge utile finale combinée avec hyperframes media-treatment.

Utilisez un flux de travail progressif unique. Pour la vidéo, inspectez une planche contact étiquetée début/milieu/fin plutôt que de lire les images séparément. Appliquez un candidat et inspectez une planche après pour une correction ou un polissage ordinaire. Passez aux images individuelles ou aux preuves de brouillon animées uniquement lorsque le résultat est ambigu, temporel, stylisé, basé sur LUT, sensible HDR/LOG, privé ou critique pour la marque.

Pour une correction ou un polissage ordinaire, persistez le JSON du préréglage/réglage du traitement final. Ne générez pas de LUT .cube simplement pour encoder l'exposition, les ombres, le contraste ou la chaleur. Utilisez un LUT uniquement lorsque l'utilisateur en fournit un ou que le traitement sélectionné en possède explicitement un. resolve --type grade --for ... --analyze est une preuve de mesure, pas une autorisation à remplacer le traitement choisi par un LUT généré. Ne recréez pas les effets de vignette, grain, flou, pixelation, couleur ou traitement supportés avec des superpositions CSS/SVG ; cela contourne les contrôles Studio et le chemin canonique de prévisualisation/rendu shader.

Soyez proactif — effectuez un passage d'opportunité média

L'humain ne peut généralement pas dire quel média améliorerait la pièce. Vous le pouvez. Lorsque vous construisez ou révisez une composition, faites un scan fondé, puis demandez une fois — n'ajoutez pas en silence et ne harcalez pas par actif.

Ne proposez une opportunité que lorsqu'un signal concret est présent :

Signal détectéOffre
Texte à l'écran / un script sans voix offVoix off TTS (moteur audio)
Émoji ou une <div> stylisée en icôneRésoudre des icon réels
Image qui est un espace réservé, minuscule ou semble agrandieUne meilleure image (et/ou agrandissement — voir references/operations.md)
Coupures de scène / transitions sans sonsfx de transition
Un morceau de plus de ~10s sans fond musicalbgm
Séquences semblant sous/surexposées ou avec dominante de couleurUn étalonnage correctif (inspectez avec hyperframes media-treatment --selector '#hero' --analyze --json)
Un média photographique qui semble visuellement plat ou hors sujetUn préréglage ou traitement personnalisé spécifique adapté à la source, avec la cible nommée
Une entrée/révélation médiatique significative qui semble statiqueUne animation de traitement compatible avec la recherche ; conservez la couleur sauf si la demande justifie aussi un préréglage

Règles qui font que ceci reste une aide, pas un harcèlement : fondé, pas générique (pas de signal → pas de suggestion) ; tranché + concret (proposez la correction spécifique avec des valeurs par défaut choisies — l'humain approuve tout / une partie / rien) ; une fois par projet (une demande consolidée ; respectez "laissez-le") ; proposez, ne mutez jamais en silence (surtout pour les étalonnages : proposez et prévisualisez — une "correction" grise ruinerait un coucher de soleil ou un look néon intentionnel).

Où chercher — lisez uniquement le fichier dont votre tâche a besoin

TâcheLire
Résoudre / réutiliser / adopter / ingérer, drapeaux, cascade, inventairereferences/resolve.md
Étalonnage, LUTs, étalonnage intelligent (--for), comparaison d'étalonnagereferences/grading.md
Voix off / TTS, musique, SFX, sous-titres, transcription (moteur audio)references/audio.md
Couper / recadrer / transformer des médias existants, diffusion d'erreur exacte, HEVCreferences/operations.md
Traitements créatifs conscients de la source, effets temps réel, superpositions, révélationsreferences/media-treatments.md
Installation + authentification, tableau des fournisseurs, échelles RAM, --local-only, --providerreferences/setup-providers.md
Préférences mémorisées + recettes gelées (mémoire utilisateur)references/memory.md
Matrice de propriété, statistiques d'utilisation, télémétrie, confidentialité (pour les mainteneurs)references/meta.md

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

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.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/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.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

Skills associés