Remotion UI Mockup Library

Produces code-built, vertical (1080×1920) animated UI mockup cutaway visuals — doing the "crisply legible, brand-consistent interface on screen" job that AI-video never manages. All visuals come in the CLEO palette (lime × deep petrol/navy), with glassmorphism cards.

What it produces: Five ready-made components — a long prompt being typed character-by-character in the Claude chatbox (ClaudeChatbox), frontmatter streaming line by line in the SKILL.md editor (SkillEditor), file cards sliding in from the right in the project "Files" panel (ProjectFilesUI), a chaos → single-skill before/after transformation (BeforeAfter), and a "skill = 4 parts" diagram (SkillDiagram). They are all sequenced in the MockupPreview chain, or a single component is rendered in isolation.

When to use: For an explanatory/instructional moment ("you type this, this happens"), an "aha"/solution moment (before/after relief), an authority/technical-confidence display, or a list/structure walkthrough. Any text/UI that must be readable on screen is done with this mockup.

When NOT to use: When you need a real human face, B-roll atmosphere, or a physical location (that is the footage / AI-video job).

Output: A production package (markdown) containing a second-by-second script + shot list + audio/music map, and a silent vertical .mp4 produced with the render command. An ElevenLabs TR voiceover is mixed in on top as a separate layer. The single-accent rule, macOS window chrome, and char-by-char live typing are the signature moves.