/sn-motion-html

name: sn-motion-html
description: Build continuous-shot motion-driven HTML stories from a subject or narrative, including research, story structure, consistent AI stills, Seedance scene and connector clips, interface styling, media normalization, and browser QA. Use for immersive journeys, timelines, product stories, fictional worlds, or other scene-based visual narratives whose camera should flow from beginning to end; not for ordinary autoplay video pages or general web apps.

SN Motion HTML

Create a reusable project, not a one-off HTML file. Keep subject matter, chapter count, visual style, interface treatment, copy placement, language, image model, video model, clip duration, and hosting path configurable.

The defining experience is one continuous camera journey controlled by page progress. Preserve a single fixed media stage and one ordered timeline from the first scene through every connector to the final scene. Differentiate projects through transparent copy composition, header treatment, type, navigation, and scene-specific copy placement—not by replacing the continuous stage with separate article media blocks.

Route the work

1. Resolve the story goal, audience, factual fidelity, chapter scale, visual language, copy language, target devices, sound policy, and available API credentials. Make reasonable defaults only for low-risk implementation details. 2. For factual or source-based stories, research before outlining and record sources separately from display copy. 3. Plan chapters, recurring identities and connector paths before generating their boundary images; use [references/prompting.md](references/prompting.md) for shot planning and acceptance criteria. 4. Detect the image-generation capability available in the current environment before generating any stills. The capability may be a callable image tool, a skill that exposes or instructs an image workflow, or both. Use the available capability when present; if no suitable capability is available, report that blocker to the user before continuing past the still-generation stage. 5. Prepare a review package containing the proposed visual style and the content/shot arrangement. When an image capability is available, generate only the small reference/gate set needed for review. 6. Obtain the user's explicit approval at both approval gates below. After approval, generate the complete still set and inspect it before any paid video batch. 7. Dry-run the video manifest and representative clip. Obtain explicit authorization immediately before the first paid video API request, then generate scene clips and connector clips in dependency-aware parallel phases. 8. Choose or design an interface treatment around the continuous stage, assemble from structured content, then verify media and browser behavior.

Required user approval gates

Record explicit approvals; an unanswered message is not approval. Apply existing authorization to revisions within its scope; present the affected gate again when a change exceeds that scope.

When chapters change, reuse accepted assets with stable IDs and preserve superseded variants as alternatives. Identify newly paid work and request clarification only if its scope or budget is unclear or exceeds existing authorization; reordering chapters does not require renaming masters.

1. **Visual style approval:** present the style preamble and identity blocks, including medium, palette, materials, lighting, camera grammar, composition, negative constraints, and recurring character/product treatment. When image generation is available, include a small reference/gate set (normally opening, middle, and ending stills). Do not generate the complete still set until the user explicitly approves the visual direction. 2. **Content and shot-plan approval:** present the chapter order, each chapter's dominant visual event and display copy, scene framing/camera intent, connector start and destination, and per-scene copy position. Do not generate the complete still set or write the final video manifest until the user explicitly approves this arrangement.

These are separate decisions: style approval determines how the world looks; content and shot-plan approval determines what is shown and how the camera moves through it. The later paid-video approval is an authorization gate, not a substitute for either creative approval.

Read [references/workflow.md](references/workflow.md) for the full production sequence. Read only the additional references needed for the current stage:

• [references/schemas.md](references/schemas.md) when creating manifests or content JSON.
• [references/prompting.md](references/prompting.md) when generating character references, scenes, or motion prompts.
• [references/style-presets.md](references/style-presets.md) when choosing or adapting anime, cinematic, or CGI production styles.
• [references/seedance.md](references/seedance.md) before configuring or calling the video API.
• [references/frontend.md](references/frontend.md) before selecting or adapting the interface treatment.

Start from the template

Run:

python scripts/init_project.py /absolute/output/path --title "Story title" --style cinematic --ui folio

The initializer copies `assets/template/` and creates the media directories. Replace the example story and manifests; do not leave placeholder subject matter in the final project.

Choose `--style anime`, `--style cinematic`, or `--style cgi`. Separately choose `--ui folio`, `--ui caption`, or `--ui graphic`. Style controls the generated world; UI controls header, transparent copy treatment, navigation, and type composition. Per-chapter `copyPosition` may be `left`, `right`, `bottom`, or `center` when the focal subject requires it.

All UI presets use the same continuous-shot runtime. Adapt the visual chrome materially for the subject, but do not interrupt the camera chain or turn chapters into separate media cards.

It also copies the reusable scripts int