HyperFrames

Setup

hermes skills install official/creative/hyperframes

npx hyperframes

npx hyperframes doctor

Workflow

1. Convert the user's request into a short production brief: duration, aspect ratio, target platform, language, style, music or voiceover needs, and final output path.
2. For incomplete briefs, make reasonable defaults. Use 1080x1920 for vertical short video, 1920x1080 for horizontal video, 30 fps, and MP4 output.
3. Create or reuse a HyperFrames project:

npx hyperframes init my-video --non-interactive

1. Write the composition in HTML/CSS/JS. Make the static hero frame layout correct before adding animation.
2. Validate before rendering:

npx hyperframes lint
npx hyperframes inspect --samples 15

1. Preview when useful:

npx hyperframes preview

1. Render the final video:

npx hyperframes render --output final.mp4 --quality standard

--quality draft

--quality high

Composition Rules

• Use a root element with

  data-composition-id

  ,

  data-width

  , and

  data-height

  .
• Use

  data-start

  ,

  data-duration

  , and

  data-track-index

  for timed clips.
• Register GSAP timelines synchronously on

  window.__timelines

  .
• Use CSS as the final layout state, then animate from or to that state.
• Keep media playback under the HyperFrames runtime. Do not manually call

  play()

  ,

  pause()

  , or seek media.
• Avoid nondeterministic animation logic such as

  Math.random()

  or

  Date.now()

  unless using a seeded generator.
• Do not use infinite repeats. Calculate finite repeat counts from the composition duration.
• Check that text, captions, UI panels, and HUD elements stay inside the frame on every inspected timestamp.

Delivery

• the rendered MP4 path;
• the preview URL if a preview server is running;
• any assumptions made about duration, aspect ratio, style, narration, or music;
• any validation issues that remain unresolved.

lint

inspect