hyperframes-core

Name: hyperframes-core
Author: calesthio

41kstars4.9kforks

How to install hyperframes-core?

calesthio/openmontage/hyperframes-core

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

Installs into the current project.

Summary

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data-* timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing

Files · 1

View on GitHub

SKILL.md

1	# HyperFrames Core
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.
4
5	This skill is the technical contract — how to build one hyperframes project. The body below is the build guide; per-topic detail lives in `references/` (index next), read on demand. Other concerns live in the sibling domain skills — `hyperframes-animation`, `hyperframes-creative`, `hyperframes-media`, `hyperframes-cli`, `hyperframes-registry`. The capability map in `/hyperframes` says what each one covers.
6
7	## References
8
9	\| File \| Read it to… \|
10	\| ------------------------------------ \| ------------------------------------------------------------------------------------------------- \|
11	\| `references/minimal-composition.md` \| start from the smallest renderable composition skeleton \|
12	\| `references/composition-patterns.md` \| choose monolithic vs modular; structure a modular `index.html`; pick a sub-comp archetype \|
13	\| `references/data-attributes.md` \| look up any `data-*` (root / clip / sub-comp host / legacy aliases); use `class="clip"` \|
14	\| `references/tracks-and-clips.md` \| pick `data-track-index`, handle same-track overlap / z-index, time a clip relative to another \|
15	\| `references/sub-compositions.md` \| wire a sub-composition (host attrs, `<template>`, per-instance vars) and animate inside it \|
16	\| `references/variables-and-media.md` \| declare variables; place `<video>`/`<audio>`, set volume, trim \|
17	\| `references/determinism-rules.md` \| build a seekable timeline; determinism bans; the animatable-property allowlist; layout / text fit \|
18	\| `references/full-screen-motion.md` \| author full-frame motion with shared backgrounds \|
19	\| `references/storyboard-format.md` \| author a `STORYBOARD.md` plan (+ the parsed manifest) \|
20	\| `references/script-format.md` \| author the optional `SCRIPT.md` locked narration \|
21	\| `references/subagent-dispatch.md` \| map subagent dispatch verbs (parallel fan-out / background / wait) to your harness \|
22	\| `references/tailwind.md` \| work in a Tailwind v4 project (`init --tailwind`; runtime contract differs from Studio's v3) \|
23
24	For animation runtime specifics (GSAP API, Lottie, Three.js, etc.) go to `hyperframes-animation` → `adapters/<runtime>.md`.
25
26	## Building a composition
27
28	### Two root forms (not interchangeable)
29
30	- Standalone (top-level `index.html`) — root `<div data-composition-id="…">` sits directly in `<body>`, no `<template>` wrapper (wrapping it hides all content and breaks rendering).
31	- Sub-composition (loaded via `data-composition-src`) — root must be wrapped in `<template>`.
32
33	> ⚠ Transport rule: the runtime only clones `<template>` contents; everything outside (incl. `<head>` styles/scripts) is discarded — put `<style>`/`<script>` inside the template.
34	> ⚠ Host-id rule: the host slot's `data-composition-id` must exactly equal the inner template's `data-composition-id` and the `window.__timelines["<id>"]` key — no `-mount`/`-slot`/`-host` suffix.
35
36	File shape, host wiring, and the pre-render checklist → `references/sub-compositions.md`.
37
38	### Root must be sized (silent layout bug)
39
40	The standalone root needs an explicit sized box (`width`/`height` in px), and every ancestor down to a `height:100%` element must have a resolved height — otherwise a flex/`100%` child collapses to ~0 and content piles into the top-left corner. `lint`/`validate`/`inspect` do not catch this. Skeleton → `references/minimal-composition.md`.
41
42	### One paused timeline
43
44	Each composition registers exactly one `gsap.timeline({ paused: true })` at `window.__timelines["<id>"]` (key = root `data-composition-id`), built synchronously at page load. Render duration = root `data-duration`, not timeline length. Don't manually nest sub-timelines into the host. Full contract (incl. non-GSAP runtimes) → `references/determinism-rules.md` + `hyperframes-animation/adapters/`.
45
46	### Non-negotiable rules (silent bugs `lint`/`validate`/`inspect` won't catch)
47
48	Surfaced here; full rationale in the linked reference. Do not violate:
49
50	- No render-time clocks / unseeded `Math.random` / network / input-state;

People who liked this also viewed

6 picks

Type

hyperframes-core

41kstars4.9kforks

View on GitHub

How to install hyperframes-core?

calesthio/openmontage/hyperframes-core

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# HyperFrames Core
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.
4
5	This skill is the technical contract — how to build one hyperframes project. The body below is the build guide; per-topic detail lives in `references/` (index next), read on demand. Other concerns live in the sibling domain skills — `hyperframes-animation`, `hyperframes-creative`, `hyperframes-media`, `hyperframes-cli`, `hyperframes-registry`. The capability map in `/hyperframes` says what each one covers.
6
7	## References
8
9	\| File \| Read it to… \|
10	\| ------------------------------------ \| ------------------------------------------------------------------------------------------------- \|
11	\| `references/minimal-composition.md` \| start from the smallest renderable composition skeleton \|
12	\| `references/composition-patterns.md` \| choose monolithic vs modular; structure a modular `index.html`; pick a sub-comp archetype \|
13	\| `references/data-attributes.md` \| look up any `data-*` (root / clip / sub-comp host / legacy aliases); use `class="clip"` \|
14	\| `references/tracks-and-clips.md` \| pick `data-track-index`, handle same-track overlap / z-index, time a clip relative to another \|
15	\| `references/sub-compositions.md` \| wire a sub-composition (host attrs, `<template>`, per-instance vars) and animate inside it \|
16	\| `references/variables-and-media.md` \| declare variables; place `<video>`/`<audio>`, set volume, trim \|
17	\| `references/determinism-rules.md` \| build a seekable timeline; determinism bans; the animatable-property allowlist; layout / text fit \|
18	\| `references/full-screen-motion.md` \| author full-frame motion with shared backgrounds \|
19	\| `references/storyboard-format.md` \| author a `STORYBOARD.md` plan (+ the parsed manifest) \|
20	\| `references/script-format.md` \| author the optional `SCRIPT.md` locked narration \|
21	\| `references/subagent-dispatch.md` \| map subagent dispatch verbs (parallel fan-out / background / wait) to your harness \|
22	\| `references/tailwind.md` \| work in a Tailwind v4 project (`init --tailwind`; runtime contract differs from Studio's v3) \|
23
24	For animation runtime specifics (GSAP API, Lottie, Three.js, etc.) go to `hyperframes-animation` → `adapters/<runtime>.md`.
25
26	## Building a composition
27
28	### Two root forms (not interchangeable)
29
30	- Standalone (top-level `index.html`) — root `<div data-composition-id="…">` sits directly in `<body>`, no `<template>` wrapper (wrapping it hides all content and breaks rendering).
31	- Sub-composition (loaded via `data-composition-src`) — root must be wrapped in `<template>`.
32
33	> ⚠ Transport rule: the runtime only clones `<template>` contents; everything outside (incl. `<head>` styles/scripts) is discarded — put `<style>`/`<script>` inside the template.
34	> ⚠ Host-id rule: the host slot's `data-composition-id` must exactly equal the inner template's `data-composition-id` and the `window.__timelines["<id>"]` key — no `-mount`/`-slot`/`-host` suffix.
35
36	File shape, host wiring, and the pre-render checklist → `references/sub-compositions.md`.
37
38	### Root must be sized (silent layout bug)
39
40	The standalone root needs an explicit sized box (`width`/`height` in px), and every ancestor down to a `height:100%` element must have a resolved height — otherwise a flex/`100%` child collapses to ~0 and content piles into the top-left corner. `lint`/`validate`/`inspect` do not catch this. Skeleton → `references/minimal-composition.md`.
41
42	### One paused timeline
43
44	Each composition registers exactly one `gsap.timeline({ paused: true })` at `window.__timelines["<id>"]` (key = root `data-composition-id`), built synchronously at page load. Render duration = root `data-duration`, not timeline length. Don't manually nest sub-timelines into the host. Full contract (incl. non-GSAP runtimes) → `references/determinism-rules.md` + `hyperframes-animation/adapters/`.
45
46	### Non-negotiable rules (silent bugs `lint`/`validate`/`inspect` won't catch)
47
48	Surfaced here; full rationale in the linked reference. Do not violate:
49
50	- No render-time clocks / unseeded `Math.random` / network / input-state;

People who liked this also viewed

6 picks

Type