Hyperframes Video

Hyperframes Video

Use this Note when the video can be expressed as a deterministic HTML scene. Hyperframes is the lighter path for product cards, marketing loops, website captures, and simple composited explainers.

Current Workflow

1. Generate index.html and hyperframes.json in .memoire/videos/<id>.
2. Preview with npx hyperframes preview . from the project folder, or pass the folder explicitly from Studio.
3. Lint with npx hyperframes lint . before rendering when the command is available.
4. Render with npx hyperframes render . --output dist/<id>.mp4.

Scaffold Rules

• Keep all external assets local to the project folder or explicit URLs.
• Prefer CSS keyframes and deterministic layout over runtime mutation.
• Store render outputs in dist/ and keep hyperframes.json as the command contract Studio can inspect.
• Use @hyperframes/core or @hyperframes/producer for programmatic validation and rendering once the sidecar grows beyond command preparation.

Quality Bar

• Use fixed dimensions, fps, and duration in config.
• Avoid layout shifts between preview and render.
• Keep colors/tokens aligned with the source product rather than inventing a separate video theme.