# Hyperframes Video

> Current Hyperframes pack for HTML-first motion videos, lintable frames, previews, and render command prep.

- Skill: `memi-design/hyperframes-video` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add memi-design/hyperframes-video`
- Raw SKILL.md: https://api.skillmd.com/api/skills/memi-design/hyperframes-video/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: memi-design (https://skillmd.com/u/memi-design)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/memi-design/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.