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
- Capture the target route state, dimensions, and critical interactions.
- Choose Hyperframes for static/HTML explainers and Remotion for timeline-heavy React composition.
- Create scene beats: first impression, interaction proof, outcome, CTA.
- Store source URLs and captured assets in the video project folder.
- 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.