skilld
All skills
heygen-com avatar

/hyperframes-registry

@ff6e210
by HeyGenheygen-com/hyperframes55k stars
4,998

Search, install, and wire registry blocks and components into HyperFrames compositions. Use BEFORE hand-building any named visual — whenever a brief, a user, or a storyboard names a look, effect, treatment, or transition such as CRT scanlines, glitch, chromatic aberration, film grain, a shimmer sweep, a chart, a code or terminal window, a map, or a confetti burst — because roughly 400 hosted items already cover many of them and the search ranks all of them with nothing installed, no project, and no account. Also use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

Requires /hyperframes-cli

Ask your Agent

Use this Skill: https://skilld.dev/gh/heygen-com/hyperframes/hyperframes-registry

This session only. Nothing lands on disk.

referenceswiring-components.md

≈431 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Wiring Components

Components are effect snippets — HTML, CSS, and optionally JS that you merge directly into an existing composition. Unlike blocks, components have no standalone timeline; they participate in the host composition's timeline.

General process

  1. Run hyperframes add <component-name>
  2. Open the installed file (e.g., compositions/components/grain-overlay.html)
  3. Read the comment header for usage instructions
  4. Copy the parts into your host composition:
    • HTML elements — inside your <div data-composition-id="...">
    • CSS styles — into your composition's <style> block
    • JS setup — into your composition's <script>, before your timeline code
    • Timeline calls — into your GSAP timeline (if the component exposes them)

Example: grain-overlay (CSS-only, no timeline integration)

<!-- Paste the overlay div into your composition -->
<div
  id="grain-overlay"
  style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100;"
>
  <div class="grain-texture"></div>
</div>

Then paste the CSS keyframes and .grain-texture rule into your styles. No GSAP timeline calls needed — the grain animates via CSS @keyframes.

Example: shimmer-sweep (needs timeline integration)

See examples/add-component.md for the full shimmer-sweep walkthrough (HTML wrapping, CSS, JS setup, and timeline call).

Key principles

  • Components inherit the host composition's dimensions and duration
  • Place component HTML at the appropriate z-index relative to your content
  • Read the comment header in each snippet for customizable values
  • Run hyperframes lint after wiring to catch structural issues

Source: SKILL.md on GitHub

Third-party checks

No alerts3d4 checks · Risk SAFE
  • Gen Agent Trust Hub3d

    The skill provides tools to search, install, and integrate animation blocks and components from the HyperFrames registry into web-based video compositions. It uses a dedicated CLI to fetch resources from the author's GitHub repository and incorporates standard animation libraries.

  • Socket3d

    No alerts

  • Snyk3d

    Risk: LOW · No issues

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at ff6e210. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 10 hours ago.

Activeupdated 4 days ago

README badge

README badge for heygen-com/hyperframes/hyperframes-registry