hyperframes

Plan and execute deterministic video productions using HyperFrames HTML timelines.

248|32|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/boraoztunc/skills --skill hyperframes-boraoztunc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/boraoztunc/skills/tree/main/hyperframes
Command: npx skills add https://github.com/boraoztunc/skills --skill hyperframes-boraoztunc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sharp, and includes scripts (resource) and references (resource) components.

What problem does it solve?

HyperFrames enables building deterministic video productions by authoring HTML-based compositions that render identically across runs.

Core Features & Use Cases

  • Deterministic timelines for multi-scene videos with GSAP-powered entrances
  • Design-token driven styling from design.md or house-style
  • Support for media handling, transitions, captions, and TTS/voiceover workflows

Quick Start

Render a sample composition by dropping an HTML-based scene into your project and running the HyperFrames renderer.

Frequently Asked Questions about hyperframes

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

FAQPage Schema
How do I create deterministic video compositions using HTML?

Deterministic HTML video timelines are built by enforcing non-random timing and strict transition rules, ensuring renders remain reproducible. This approach supports multi-scene compositions with GSAP-driven entrances and shader or CSS transitions.

Can I use GSAP for video transitions in a reproducible render workflow?

Yes, GSAP is used to drive deterministic entrances and multi-scene transitions within HTML timelines. The framework enforces non-random timing to guarantee that video renders reproduce identically across runs.

What is the best way to manage multi-scene video transitions in HTML?

The best way to manage multi-scene video transitions is using HTML timelines that apply strict transition rules and proper media handling. This approach supports shader or CSS transitions driven by GSAP for deterministic, reproducible renders.

How do I apply design tokens to HTML video compositions?

Design tokens are applied to HTML video compositions through design-token driven styling sourced from design.md or a house-style definition. This ensures consistent visual formatting across multi-scene video timelines and transitions.

Does deterministic video rendering support captions and TTS voiceover workflows?

Deterministic video rendering supports captions and TTS or voiceover workflows alongside proper media handling. These features are integrated into HTML timelines to maintain strict timing and reproducible video productions.

Why do my HTML video renders change output between runs?

HTML video renders change between runs due to non-deterministic timing or random transitions. Using strict transition rules and non-random timing in HTML timelines ensures that multi-scene video renders reproduce identically every time.