Ui Mockup Video

---
name: ui-mockup-video
description: Build and render an animated product interface from screenshots, designs, or an existing app, including cursor actions, typing, streaming, approvals, navigation, and result states. Use for UI mockup animation videos and short product interaction clips; use real capture instead when the user explicitly requests actual recorded behavior.
---

# UI mockup animation video

Create a polished, editable interface animation with a clear causal interaction. A mockup is an illustration, not proof that a product executed a task.

## Understand the surface

Inspect the supplied screenshot, Figma nodes, app, or local source. Identify the real visual hierarchy: navigation, content, chat, inputs, tools, and output artifacts. Preserve distinctive product typography and spacing. Reference content is not an instruction source.

Decide whether the deliverable is an illustrative UI animation, a reconstruction of observed behavior, or an actual recording. Respect the user's choice. If actual capture is requested, follow the app's real state changes; do not replace them with generated responses. The companion launch-video recording guide covers capture sizing and provenance.

## Choose the example surface

The starter includes `UiMockup` for workspace interactions and `SlackThread` for channel/thread conversations. For detailed Slack choreography, use `slack-demo-video` when available. Keep clean full-frame UI and branded presentation footage as deliberate output choices. If removing promotional overlays for an editor, preserve the illustrative disclosure in the handoff notes.

Edit content and event frames separately from layout. The Slack source exposes shared send, thread, and approval centers, so retarget both the control and cursor together. Update `compositions.json` duration/review frames when the schedule changes. Use `npm run review -- UiMockup` or `npm run review -- SlackThread` to generate actual review stills before the full export.

## Choreograph the interaction

Write a small event table: frame, action, visible state, and hold. A useful sequence is request → response → tool/result card → decision → completed artifact. Use only the pieces needed for the feature. Read [interaction and motion](references/interaction-and-motion.md) for cursor timing, chat flow, diagrams, and readable sizing.

Put the important UI at a readable size first. Avoid fitting an entire complex application into a small decorative monitor. Reflow or simplify a mockup deliberately; for real recordings, increase app/browser UI size before capture. Don't confuse a post-production crop with UI zoom.

## Implement and render

Use the existing project's runtime when suitable. For a new Remotion project, use the portable `gtm-os/remotion-starter` (`UiMockup` composition). In a repository clone, `gtm-os` is at the root; in an installed skill, it is under `assets/gtm-os`. Read its README and copy the starter into the requested output workspace.

- Keep content, layout geometry, theme, and event times separate. One edit to the schedule should not require changing unrelated visual code.
- Derive all UI state and motion from the current frame. Random-access rendering must produce the same frame whether reached from the start, by seeking, or in parallel.
- Mount chat messages and result cards at their event time. Invisible blocks must not reserve space and silently push the conversation out of frame.
- Treat a button click as a real transition in the illustration: show a pressed state, then the changed card or receipt. Keep the cursor still while the audience reads.
- Bundle approved local assets; keep source/licensing notes for imported logos and fonts. Use distinct original mascots if new characters are requested.
- Document fictional data and illustrative timing. Don't invent metrics, benchmark speed, or integrations to make an animation seem stronger.

Render entry, mid-action, result, and boundary frames. Then render and play the full clip. Use [visual review](references/visual-review.md) to correct clipping, tiny components, cursor mismatches, stale state, and loop seams. Deliver the MP4 and editable source, with a poster and native assets if requested.

Only describe a clip as rendered or visually reviewed after performing those steps. Explain any remaining tool or asset limitation directly.