# Website To Video

> Website-to-video capture pack for turning product pages, flows, and browser states into structured video scenes.

- Skill: `memi-design/website-to-video` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add memi-design/website-to-video`
- Raw SKILL.md: https://api.skillmd.com/api/skills/memi-design/website-to-video/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: memi-design (https://skillmd.com/u/memi-design)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/memi-design/website-to-video

---


# Website To Video

Use this Note when Studio needs to turn a website, app route, or browser flow
into a video. The output should be a storyboard plus a runnable Remotion or
Hyperframes project, not a pile of screenshots.

## Workflow

1. Capture the target route state, dimensions, and critical interactions.
2. Choose Hyperframes for static/HTML explainers and Remotion for timeline-heavy
   React composition.
3. Create scene beats: first impression, interaction proof, outcome, CTA.
4. Store source URLs and captured assets in the video project folder.
5. Prepare preview/render commands and a download path for the rendered artifact.

## Capture Rules

- Record the exact URL, viewport, and feature state used for every scene.
- Avoid dark blurred atmospheric captures when the product UI needs inspection.
- Crop only after preserving an uncropped source artifact.
- Use local screenshots/assets for render determinism when possible.