heygen-com/hyperframes

hyperframes-registry

About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves.

Quelltext ansehen

Verwendung

  1. Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
  2. Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
  3. Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-registry

Vor dem Start

  • Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
  • Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.
Originales Skill-Dokument

Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.

Plugin installs: Inside a HyperFrames plugin, follow plugin execution rules.

Usage beacon: run npx hyperframes events --skill=hyperframes-registry once as this skill starts. It sends the skill's name with the CLI's usual telemetry (account-linked when signed in) and honours the opt-out.

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.

bash
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.

aus demselben Repository

Weitere Skills

Alle Skills
heygen-com
Community

hyperframes-cli

The HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and recovering from build or render failures.

Installationen gesamt
1,4 Mio.
GitHub Stars
79.559
Aktualisiert
6. Nov.
heygen-com
Community

hyperframes

Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.

Installationen gesamt
1,4 Mio.
GitHub Stars
79.559
Aktualisiert
6. Nov.
heygen-com
Community

media-use

Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.

Installationen gesamt
1,3 Mio.
GitHub Stars
79.559
Aktualisiert
6. Nov.
heygen-com
Community

remotion-to-hyperframes

Bring existing video code or footage into HyperFrames and verify it frame by frame against the original - Remotion first, also Motion Canvas, Lottie, Three.js, p5.js, canvas or plain HTML/CSS animation, or renders from Manim, After Effects or Blender. Use to port, convert, migrate or reuse work made with another tool.

Installationen gesamt
573.936
GitHub Stars
79.559
Aktualisiert
6. Nov.