---
name: HTML Motion (HTML)
description: Cinematic motion piece in a single HTML file — hero animation, launch film, product reveal. Frame-accurate timing, audio-aware, exportable to MP4/GIF via headless capture.
triggers:
  - html motion
  - hero animation
  - launch film
  - product reveal
  - cinematic web piece
cd:
  mode: motion
  platform: html-canvas
  scenario: cinematic
  preview: html_file
  fidelity: high
  animations: true
  featured: true
  design_system:
    requires: true
    sections: [palette, type, motion]
  craft:
    requires:
      - typography
      - color
      - anti-ai-slop
      - animation-discipline
      - animation-best-practices
      - animation-pitfalls
      - cinematic-patterns
      - scene-templates
      - audio-design-rules
  inputs:
    - brief (the story being told)
    - duration target (e.g. 30s, 60s)
    - has audio (boolean)
  parameters:
    - fps (default 60)
    - export (none | mp4 | gif)
  outputs:
    primary: html_file
    capabilities_required:
      - write_file
      - read_file
  default_for:
    - html-motion
  example_prompt: "30s hero animation introducing a new browser feature, no audio, exportable to MP4"
---

## What this is

A motion piece is a *short film*, not a UI prototype. It has a beginning, a middle, and an end. The viewer watches; they don't interact (beyond maybe replay).

Read `cinematic-patterns.md` and `scene-templates.md` before composing — they are the shot vocabulary.

## Composition

- Establish, develop, payoff. Three movements, even in 15 seconds.
- One memorable image. The viewer should be able to describe one specific frame after watching once.
- Type does the heavy lifting. Cinematic web pieces succeed on type + color + restraint, not on 3D or particle effects.

## Timing

- 24fps for film feel; 60fps for product / interface motion.
- Beats land on rests, not on chaos. If audio is on, mark sync points to the beat grid before the easing curve.
- Default eases: `cubic-bezier(0.65, 0, 0.35, 1)` for in-out narrative; spring physics for product gestures (see `animation-best-practices.md`).

## Audio

When `has audio: true`, follow `audio-design-rules.md` and `voiceover-pipeline.md` if voice is involved. **Always** ship a muted-by-default version too — autoplay-with-sound is hostile.

## Export

For `export: mp4` or `export: gif`, emit a sibling capture script (Playwright or Puppeteer) that records the canvas at the target fps. See `video-export.md` reference.

## Quality bar

- One signature beat, not five.
- `prefers-reduced-motion` reduces to a 2–3 keyframe static storyboard, not a flash of nothing.
- Self-check against `craft_lint` and the cinematic critique rubric (`critique-guide.md`).
