hyperframes-registry

Installer et câbler les blocs et composants du registre dans des compositions HyperFrames. À utiliser lors de l’exécution de hyperframes add, de l’installation d’un bloc ou d’un composant, du câblage d’un élément installé dans index.html, ou du travail avec hyperframes.json. Couvre la commande add, les emplacements d’installation, le câblage de sous-composition de blocs, la fusion d’extraits de composants, la découverte du registre, et la création d’un nouveau bloc ou composant à contribuer en amont (idée → échafaudage → validation → PR).

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

Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin.

HyperFrames registry

Starting from an item is faster and usually better than writing the effect yourself, and an installed item is ordinary source in your project: change it, cut it down, restyle it.

Find and install

There is no hyperframes registry command; searching is catalog, installing is add.

npx hyperframes catalog --query "<what the beat should do, in English>" --json
npx hyperframes add <name> --json        # prints the written files and the mount snippet
  • Query in English even when the video is not: the catalog is indexed in English, and another script returns No searchable words in query, which is not a gap.
  • Search is local and sends nothing. The default words tier only finds items that reuse your words; --on-device ranks by meaning after a one-time ~33 MB download. Offer that download and let the person decide; never enable it silently. The --json envelope names the tier that answered.
  • Narrow with --type block|component and --tag <tag>. add <tag> installs every block with that tag; dependencies install first. add needs the network even for an item installed before; search works offline from the cached manifest.
  • Nothing fits: report it before you hand-build, on either tier. catalog --query prints the line pre-filled (report_gap in --json): npx hyperframes feedback --search-miss "<query>" --wanted "<the move you needed>" --tier <tier>. Describe the effect, not an item name you imagined.

Tiers, dropped and unindexed, stale indexes, offline behaviour: references/search.md.

What's in it

Blocks: a scene with its own timelineExamples
Transitionsbeat-freeze-cut, chromatic-radial-split, cinematic-zoom
Overlays and lower thirdscamcorder-hud, editorial-flash-overlay, lt-clean-bar
Title cards and kinetic typecanopy-part-title, code-slice-hero
Social, chat and UI cardsai-chat-reveal, chatgpt-exchange
Code, charts, data and mapscode-diff, bar-chart-race, data-chart
3D, shader and backgroundsapp-showcase, aurora, blob
Components: a snippet merged into your sceneExamples
Motion primitives and text effectsagent-cursor, blur-in, bottom-up-letters
Caption stylescaption-clip-wipe, caption-editorial-emphasis
Camera movescamera-shake, camera-scan-gate
Product demo and UI propsbefore-after-wipe, browser-device-stage
Textures, particles and effectsascii-render-pass, grain-overlay

Wiring

  • Block: installs to compositions/<name>.html. Mount it with data-composition-src, data-composition-id matching the block's own id, data-start and the data-duration you need; the snippet add prints is the starting point. references/wiring-blocks.md.
  • Component: installs to compositions/components/<name>.html. Copy its markup, <style> and script into your scene, and follow its comment block if it hooks into your timeline. references/wiring-components.md.
  • Take the largest unit that fits, then edit it. Keep an installed item's ids prefixed as they are, so two items can't collide.
  • An item keeps its own variables; set them for one mount with data-variable-values on its host (add --vars '{"title":"…"}' writes that), and point its colour and font variables at your brand's.
  • Beat-synced blocks take hit times from npx hyperframes beats --json: the beat times minus the mount's data-start.
  • Install paths come from hyperframes.json (references/install-locations.md).

Contributing

Authoring a new block or component for an upstream PR: references/contributing.md, starter templates in references/templates.md, quality bar in references/component-quality-bar.md.

Plus de skills de heygen-com

hyperframes-audio
heygen-com
Use when audio already placed in a HyperFrames composition needs to be mixed: a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), or automation envelopes drawn on a track's volume or any effect parameter. Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.
hyperframes-cli
heygen-com
HyperFrames CLI dev loop — `npx hyperframes` for scaffolding (init), validation (lint, inspect), preview, render, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any of these commands or troubleshooting the HyperFrames build/render environment. For asset preprocessing commands (`tts`, `transcribe`, `remove-background`), invoke the `hyperframes-media` skill instead.
developmenttestingapi
hyperframes-animation
heygen-com
Toutes les connaissances en animation pour HyperFrames — règles de mouvement atomique, plans de scène multiphases, transitions de scène, techniques de conception de mouvement plus larges, ET les sept adaptateurs d'exécution (GSAP par défaut, plus Lottie, Three.js, Anime.js, keyframes CSS, Web Animations API, TypeGPU). Utilisez pour toute tâche de mouvement ou d'animation : choisissez 2 à 4 règles et composez, ou chargez un plan, ou recherchez une API spécifique à l'exécution (par exemple, les easing de GSAP / le lecteur Lottie / le mixer Three.js). Natif HyperFrames : timeline unique en pause, sûr pour la recherche,...
creativedevelopmentdesign
hyperframes-core
heygen-com
Contrat de composition HTML HyperFrames. Utilisé pour la structure de composition, les attributs de données, les clips, les pistes, les sous-compositions, les variables, la lecture multimédia, les règles de rendu déterministes et la validation de projets minimalement rendus.
developmentmediacreative
hyperframes-media
heygen-com
Prétraitement des actifs pour les compositions HyperFrames — TTS multi-fournisseur (HeyGen / ElevenLabs / Kokoro local), BGM multi-fournisseur (Google Lyria / MusicGen local), transcription Whisper, suppression d’arrière-plan, et création de sous-titres. Utiliser pour npx hyperframes tts, bgm, transcribe, remove-background, sélection voix/fournisseur, suggestion d’ambiance musicale, sous-titres / légendes / paroles / karaoké / style mot par mot.
mediaaudiovideo
general-video
heygen-com
Utiliser comme solution de repli pour la composition vidéo HTML personnalisée HyperFrames lorsqu'aucun workflow spécialisé ne convient. Couvre les pièces longues ou multi-scènes, les bandes-annonces de marque ou de promotion, les montages, les cartes de titre, les affiches animées de longue durée, les boucles statiques et les compositions libres de toute longueur ou format. Ne convient pas aux promotions de produits commercialisés (product-launch-video), à la capture vidéo générale de site web (website-to-video), aux vidéos explicatives de sujets (faceless-explainer), aux vidéos de PR GitHub (pr-to-video), au sous-titrage de séquences existantes...
videocreativemedia
motion-graphics
heygen-com
Utiliser lorsque l'utilisateur souhaite un court motion design où le mouvement est le message : typographie cinétique, compteur de statistiques ou de nombres, animation de graphique/données, logo sting, habillage de marque, tiers inférieur, callout, superposition sociale, titre/tweet/actualité animé, motion poster, ou mise en évidence rapide d'une page capturée. Généralement moins de 10 secondes et jusqu'à environ 30 secondes, sans arc narratif, voix off ou sujet en prise de vue réelle. Peut être rendu en MP4 ou superposition transparente. Pas pour les pièces plus longues, multi-scènes, narrées ou de type reel de marque...
creativevideodesign
hyperframes-read-first
heygen-com
Commencez ici pour toute demande de réalisation, création, génération, édition, animation ou rendu d’une vidéo, animation, motion design, vidéo explicative, carte de titre, incrustation, vidéo sous-titrée, promotion produit, vidéo pour site web, vidéo RP ou de changelog, montage de données, motion poster ou composition HTML HyperFrames. À utiliser avant les autres compétences vidéo ou d’animation lorsque l’utilisateur souhaite qu’HyperFrames crée ou rende une vidéo MP4/web finale, choisisse un workflow, ou oriente entre product-launch-video, faceless-explainer, website-to-video,...
creativevideomedia