hyperframes

v0.1.2

Write HTML, render video. Compositions, GSAP animations, captions, voiceovers, audio-reactive visuals, and website-to-video capture for HyperFrames.

Codex5 skills

by HeyGenApache-2.05kupdated 3 weeks ago

Source

$ git clone https://github.com/openai/plugins

Clone the source, then follow the repository's marketplace instructions for your runtime. The plugin root is plugins/hyperframes/ inside the repository.

Layout

plugins/hyperframes/

├── .codex-plugin/plugin.json
├── skills/gsap/SKILL.md
├── skills/hyperframes/SKILL.md
├── skills/hyperframes-cli/SKILL.md
├── skills/hyperframes-registry/SKILL.md
└── skills/website-to-hyperframes/SKILL.md

Skills5

gsapskills/gsap/SKILL.md

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.

hyperframesskills/hyperframes/SKILL.md

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.

hyperframes-cliskills/hyperframes-cli/SKILL.md

HyperFrames CLI tool — hyperframes init, lint, inspect, preview, render, transcribe, tts, doctor, browser, info, upgrade, compositions, docs, benchmark. Use when scaffolding a project, linting, validating, inspecting visual layout in compositions, previewing in the studio, rendering to video, transcribing audio, generating TTS, or troubleshooting the HyperFrames environment.

hyperframes-registryskills/hyperframes-registry/SKILL.md

Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, and registry discovery.

website-to-hyperframesskills/website-to-hyperframes/SKILL.md

Capture a website and create a HyperFrames video from it. Use when: (1) a user provides a URL and wants a video, (2) someone says "capture this site", "turn this into a video", "make a promo from my site", (3) the user wants a social ad, product tour, or any video based on an existing website, (4) the user shares a link and asks for any kind of video content. Even if the user just pastes a URL — this is the skill to use.

Manifests1

plugins/hyperframes/.codex-plugin/plugin.json

{
  "name": "hyperframes",
  "version": "0.1.2",
  "description": "Write HTML, render video. Compositions, GSAP animations, captions, voiceovers, audio-reactive visuals, and website-to-video capture for HyperFrames.",
  "author": {
    "name": "HeyGen",
    "email": "hyperframes@heygen.com",
    "url": "https://hyperframes.heygen.com"
  },
  "homepage": "https://hyperframes.heygen.com",
  "repository": "https://github.com/heygen-com/hyperframes",
  "license": "Apache-2.0",
  "keywords": [
    "hyperframes",
    "video",
    "html",
    "gsap",
    "animation",
    "composition",
    "rendering",
    "captions",
    "tts",
    "audio-reactive"
  ],
  "skills": "./skills/",
  "interface": {
    "displayName": "HyperFrames by HeyGen",
    "shortDescription": "Write HTML, render video",
    "longDescription": "Build videos from HTML with HyperFrames. Author compositions with HTML + CSS + GSAP, use the CLI for init/preview/render/transcribe/tts, install reusable registry blocks and components, follow the GSAP animation reference, and turn any website into a video with the 7-step capture-to-video pipeline.",
    "developerName": "HeyGen",
    "category": "Creativity",
    "capabilities": [
      "Read",
      "Write"
    ],
    "websiteURL": "https://hyperframes.heygen.com",
    "defaultPrompt": [
      "Turn this website into a 20-second product promo",
      "Create an animated title card with kinetic type",
      "Add synced captions to this voiceover"
    ],
    "brandColor": "#0a0a0a",
    "composerIcon": "./assets/icon.png",
    "logo": "./assets/logo.png"
  }
}