hyperframes-composition

What it does and when to use it

Author deterministic HyperFrames HTML/CSS/JS video compositions with scenes, dimensions, timelines, animations, subtitles, titles, transitions, charts, and brand-controlled layouts. Use for local or CI HTML-to-video rendering, not for prompt-to-video model calls.

How it works

1. Boundary
2. Composition Plan
3. Authoring Rules
4. Output

---
name: hyperframes-composition
description: Author deterministic HyperFrames HTML/CSS/JS video compositions with scenes, dimensions, timelines, animations, subtitles, titles, transitions, charts, and brand-controlled layouts. Use for local or CI HTML-to-video rendering, not for prompt-to-video model calls.
---

# HyperFrames Composition

Use this skill when creating or editing the source composition for a deterministic rendered video.

## Boundary

- Write HTML/CSS/JS composition source for HyperFrames.
- Do not call AI image/video generation APIs.
- Use `ai-media-to-hyperframes` when generated assets are inputs.
- Keep exact visible text in source files so rerenders are reproducible.

## Composition Plan

Before coding, decide:

- output format: width, height, aspect ratio, fps, duration
- channel: short vertical, square social, landscape explainer, internal report, product demo
- scenes: id, duration, visual goal, text, media, data, animation
- transitions: cut, fade, slide, zoom, wipe, scroll, chart morph
- typography and safe margins
- required subtitles or lower thirds
- assets and data files

## Authoring Rules

- Use semantic scene ids and stable asset paths.
- Keep animation timing explicit; avoid hidden timing based on real wall-clock behavior.
- Prefer CSS/GSAP/WAAPI timing that can be reasoned about frame by frame.
- Keep text legible on the target viewport; do not rely on viewport-scaled font tricks.
- Do not embed remote media when local assets can be stored under `docs/videos/assets/`.
- Keep scene data in structured JSON or JS objects when the video is data-driven.

## Output

Return:

- project path
- composition files changed
- scene timeline
- preview command
- render command
- assets required
- QC risks

Versions

The database has no other skills named hyperframes-composition.

Database snapshot: 13.11.2026 · package version d5301eb2019e (SHA-256 digest of the entire package)

Downloads in the last 30 days: 0 · ranking

Report a problem with this skill: harmful content, incorrect descriptions or an author’s removal request.

Similar skills

• 100html-video
  Use when the user wants a video authored as HTML and CSS and rendered with Hyperframes: "html video", "hyperframes", "render html to mp4", "animate html css to video", "title sequence from html", "html caption video", "side by side comparison video in html", "diagram explainer…
• 100local-hyperframes-b9125909
  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…
• 100hyperframes
  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…
• 100hyperframes
  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…
• 95hyperframes
  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…
• 100hyperframes
  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…