hyperframes

Build HTML video compositions with timed clips, captions, and transitions.

1|2|Updated Jun 16, 2026
One-click install
npx skills add https://github.com/MuzeWinter/CooperAPI-Plugin --skill hyperframes-muzewinter
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/MuzeWinter/CooperAPI-Plugin/tree/main/plugins/hyperframes/skills/hyperframes
Command: npx skills add https://github.com/MuzeWinter/CooperAPI-Plugin --skill hyperframes-muzewinter

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @hyperframes/producer, sharp, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill removes the friction of building video content by turning HTML, timing data, and motion rules into fully authored HyperFrames compositions.

Core Features & Use Cases

  • Composition Authoring: Build scene-based video compositions with timed clips, layered overlays, and CSS or GSAP-driven animation.
  • Captions and Voiceover: Add synced subtitles, karaoke-style word timing, and text-to-speech narration for spoken content.
  • Audio-Reactive Motion: Drive glow, scale, and other visual changes from extracted audio data for music-led or rhythm-aware scenes.
  • Scene Transitions: Use structured transitions such as crossfades, wipes, zooms, and shader effects to move between scenes cleanly.
  • Use Case: Produce a branded title card sequence with captions, narration, and a smooth transition between an intro scene and a product reveal.

Quick Start

Use the hyperframes skill to create a short, branded HTML video composition with timed scenes, animated text, and a transition between them.

Frequently Asked Questions about hyperframes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create HTML videos with synced captions and voiceover?

You can create HTML videos with synced captions and voiceover by authoring scene-based compositions using timed clips, text-to-speech narration, and audio-synced subtitles with explicit data-start and data-track-index timing.

Can I use GSAP timelines for motion graphics in HTML video compositions?

Yes, you can use GSAP timelines for motion graphics in HTML video compositions by applying deterministic CSS or GSAP-driven animations to build layered overlays and scene transitions.

What's the best way to make audio-reactive visuals for video overlays?

The best way to make audio-reactive visuals for video overlays is to drive visual changes like glow and scale directly from extracted audio data, creating rhythm-aware scenes for music-led content.

Does hyperframes support scene transitions like crossfades and wipes for title cards?

Hyperframes supports structured scene transitions like crossfades, wipes, zooms, and shader effects for title cards, ensuring clean movement between scenes that follows the HyperFrames runtime contract.

How do I add karaoke-style word timing to subtitles in HTML video?

To add karaoke-style word timing to subtitles in HTML video, you author timed clips with audio-synced captions and apply explicit data-start and data-track-index timing rules within your scene composition.

Do I need sharp to build branded title card sequences with timed scenes?

Yes, you need the sharp dependency alongside the hyperframes producer to build branded title card sequences, as these packages handle the underlying scene authoring and image processing for the composition.