hyperframes

Name: hyperframes
Author: calesthio

303installs4.9kforks

How to install hyperframes?

calesthio/openmontage/hyperframes

$npx -y skills add calesthio/OpenMontage --skill hyperframes

Installs into the current project.

Summary

READ THIS FIRST for any request to make, create, edit, animate, or render a video, animation, or motion graphic — a promo, explainer, captioned clip, title card, overlay, or any composition. HyperFrames renders video from HTML; this is the entry skill and the default way an agent

Files · 1

View on GitHub

SKILL.md

1	# HyperFrames — start here
2
3	HyperFrames renders video from HTML — a composition is an HTML file whose DOM declares timing with `data-*` attributes, whose animation runtime is seekable, and whose media playback is owned by the framework. The full authoring contract lives in `/hyperframes-core`; read it before writing composition HTML.
4
5	Below: a capability map (the domain skills, loaded on demand) and the intent router (pick a workflow for any "make me a video" request).
6
7	## Capability map — the domain skills
8
9	Atomic capabilities you load on demand — not full video workflows. For "make me a video", use the intent router below.
10
11	\| You want to… \| Skill \|
12	\| ------------------------------------------------------------------------------------------------------------------------------------------ \| ------------------------ \|
13	\| Author / edit an HTML composition — the `data-*` contract, clips, tracks, sub-compositions, variables \| `/hyperframes-core` \|
14	\| Animate — atomic motion, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU) \| `/hyperframes-animation` \|
15	\| Creative direction — `frame.md` / `design.md`, palettes, typography, narration, beat planning, audio-reactive \| `/hyperframes-creative` \|
16	\| Media — TTS voiceover, background music, transcription, background removal, captions \| `/hyperframes-media` \|
17	\| Media resolve — find + freeze BGM, SFX, images, icons from HeyGen catalog into `.media/` with manifest tracking \| `/media-use` \|
18	\| CLI dev loop — init, lint, validate, inspect, preview, render, publish, doctor \| `/hyperframes-cli` \|
19	\| Install registry blocks / components (`hyperframes add`) \| `/hyperframes-registry` \|
20
21	---
22
23	# Intent routing — pick a workflow
24
25	This section knows only the top-level workflows; it does not load their internal references or the domain skills above.
26
27	## Before routing — confirm the input, not the spec
28
29	Routing needs to know what the video is about — its input and subject. If that's unspecified ("make a video about our thing" with no URL, product, topic, or asset), ask before entering any workflow — committing to a workflow IS the routing decision. At most two questions:
30
31	- Input — a product (URL / brief), a general website, a GitHub PR, a topic to explain, or an existing talking-head video?
32
33	Spec defaults — state, don't ask (they never change the route): aspect 16:9 (use 9:16 only for a named vertical destination — TikTok / Reels / Shorts); narration / caption language = the user's. The chosen workflow re-confirms its own specifics at its first step.
34
35	## Workflow cheat-sheet
36
37	\| Workflow \| Use it for \|
38	\| -------------------------- \| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- \|
39	\| `/product-launch-video` \| Marketing / launching / promoting a product — from its URL, a brief, or a script (even if the site is only named) \|
40	\| `/website-to-video` \| Turning a general website into a video — site tour, portfolio / landing-page showcase, social clip from the site's visuals \|
41	\| `/faceless-explainer` \| Explaining a topic / concept from text — no product, no URL; every visual is LLM-invented

People who liked this also viewed

6 picks

Type

hyperframes

303installs4.9kforks

View on GitHub

How to install hyperframes?

calesthio/openmontage/hyperframes

$npx -y skills add calesthio/OpenMontage --skill hyperframes

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# HyperFrames — start here
2
3	HyperFrames renders video from HTML — a composition is an HTML file whose DOM declares timing with `data-*` attributes, whose animation runtime is seekable, and whose media playback is owned by the framework. The full authoring contract lives in `/hyperframes-core`; read it before writing composition HTML.
4
5	Below: a capability map (the domain skills, loaded on demand) and the intent router (pick a workflow for any "make me a video" request).
6
7	## Capability map — the domain skills
8
9	Atomic capabilities you load on demand — not full video workflows. For "make me a video", use the intent router below.
10
11	\| You want to… \| Skill \|
12	\| ------------------------------------------------------------------------------------------------------------------------------------------ \| ------------------------ \|
13	\| Author / edit an HTML composition — the `data-*` contract, clips, tracks, sub-compositions, variables \| `/hyperframes-core` \|
14	\| Animate — atomic motion, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU) \| `/hyperframes-animation` \|
15	\| Creative direction — `frame.md` / `design.md`, palettes, typography, narration, beat planning, audio-reactive \| `/hyperframes-creative` \|
16	\| Media — TTS voiceover, background music, transcription, background removal, captions \| `/hyperframes-media` \|
17	\| Media resolve — find + freeze BGM, SFX, images, icons from HeyGen catalog into `.media/` with manifest tracking \| `/media-use` \|
18	\| CLI dev loop — init, lint, validate, inspect, preview, render, publish, doctor \| `/hyperframes-cli` \|
19	\| Install registry blocks / components (`hyperframes add`) \| `/hyperframes-registry` \|
20
21	---
22
23	# Intent routing — pick a workflow
24
25	This section knows only the top-level workflows; it does not load their internal references or the domain skills above.
26
27	## Before routing — confirm the input, not the spec
28
29	Routing needs to know what the video is about — its input and subject. If that's unspecified ("make a video about our thing" with no URL, product, topic, or asset), ask before entering any workflow — committing to a workflow IS the routing decision. At most two questions:
30
31	- Input — a product (URL / brief), a general website, a GitHub PR, a topic to explain, or an existing talking-head video?
32
33	Spec defaults — state, don't ask (they never change the route): aspect 16:9 (use 9:16 only for a named vertical destination — TikTok / Reels / Shorts); narration / caption language = the user's. The chosen workflow re-confirms its own specifics at its first step.
34
35	## Workflow cheat-sheet
36
37	\| Workflow \| Use it for \|
38	\| -------------------------- \| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- \|
39	\| `/product-launch-video` \| Marketing / launching / promoting a product — from its URL, a brief, or a script (even if the site is only named) \|
40	\| `/website-to-video` \| Turning a general website into a video — site tour, portfolio / landing-page showcase, social clip from the site's visuals \|
41	\| `/faceless-explainer` \| Explaining a topic / concept from text — no product, no URL; every visual is LLM-invented

People who liked this also viewed

6 picks

Type