video-ui-patterns

name	video-ui-patterns
description	Reusable video UI component patterns for Remotion and programmatic video. macOS terminal mockups, announcement text, logo combos, ASCII art reveals, code typing simulations. Use when building video compositions that simulate software interfaces.

Video UI Patterns

Reusable component patterns for building professional software demo videos with Remotion.

Pattern 1: Terminal Command Demo

A terminal that types a command, shows output, then transitions away. The bread-and-butter of developer marketing videos.

Structure

MacTerminal (container)
  ├── TitleBar (traffic lights + title)
  ├── TerminalContent
  │   ├── Prompt (~ $)
  │   ├── TypewriterText (command being typed)
  │   ├── Cursor (blinking/solid)
  │   └── Output (staggered lines after typing completes)
  └── Transition (flip/slide/fade away)

Timing Template (8 seconds at 30fps = 240 frames)

Phase	Frames	Duration	What Happens
Slide in	0-30	1s	Terminal springs up from below
Type command	30-90	2s	Typewriter at 15 chars/sec
Pause	90-105	0.5s	Cursor blinks, suspense
Show output	105-160	~2s	Staggered lines at 50ms each
Hold	160-180	0.7s	Let viewer read
Flip away	180-210	1s	Terminal flips toward camera
Next scene	210-240	1s	Logo/text reveal

Color Palette (Light Terminal Theme)

Background:     #f8fafc (soft blue-gray)
Terminal bg:    #ffffff
Title bar:      #f6f6f6
Title bar border: #e0e0e0
Title text:     #4d4d4d
Traffic lights: #ff5f57 (red), #febc2e (yellow), #28c840 (green)
Prompt ~:       #2ecc71 (green)
Terminal text:  #333333
Cursor:         #333333
Output text:    #333333

Dark Terminal Variant

Background:     #1a1a2e
Terminal bg:    #0d1117
Title bar:      #161b22
Title bar border: #30363d
Title text:     #c9d1d9
Prompt ~:       #3fb950 (green)
Terminal text:  #c9d1d9
Cursor:         #c9d1d9
Output text:    #8b949e

Pattern 2: Announcement Text

Large, bold text that scales in with easing. Used as a scene separator or headline.

const AnnouncementText: React.FC<{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const scale = interpolate(frame, [0, fps * 0.5], [0, 1], {
    extrapolateRight: "clamp",
    easing: Easing.out(Easing.cubic),
  });

  return (
    <AbsoluteFill className="flex items-center justify-center">
      <span style={{
        fontFamily: "'GT Planar', 'Inter', sans-serif",
        fontSize: 60,
        fontWeight: 700,
        color: "#333",
        transform: `scale(${scale})`,
      }}>
        {text}
      </span>
    </AbsoluteFill>
  );
};

Pattern 3: Logo Combo

Multiple logos with separators. Common for "X + Y" partnership/integration videos.

const LogoCombo: React.FC = () => (
  <AbsoluteFill className="flex items-center justify-center">
    <div className="flex items-center gap-12">
      <Img src={staticFile("logo-a.png")} className="h-32" alt="Product A" />
      <span className="text-6xl font-light text-gray-600">+</span>
      <Img src={staticFile("logo-b.svg")} className="h-24" alt="Product B" />
      <Img src={staticFile("logo-c.svg")} className="h-16" alt="Product C" />
    </div>
  </AbsoluteFill>
);

Size hierarchy: Primary logo (h-32) > Secondary (h-24) > Tertiary (h-16)

Pattern 4: ASCII Art Logo Reveal

ASCII art appears after command output, giving a retro-terminal feel.

const SKILLS_LOGO = `███████╗██╗  ██╗██╗██╗     ██╗     ███████╗
██╔════╝██║ ██╔╝██║██║     ██║     ██╔════╝
███████╗█████╔╝ ██║██║     ██║     ███████╗
╚════██║██╔═██╗ ██║██║     ██║     ╚════██║
███████║██║  ██╗██║███████╗███████╗███████║
╚══════╝╚═╝  ╚═╝╚═╝╚══════╝╚══════╝╚══════╝`;

// Render as <pre> for monospace alignment
{showOutput && <pre className="text-[#333] text-lg">{SKILLS_LOGO}</pre>}

Pattern 5: Terminal Output Lines

Simulated CLI output with unicode box-drawing characters.

const OUTPUT_LINES = [
  "",
  "┌  skills",
  "│",
  "◇  Source: https://github.com/remotion-dev/skills.git",
  "│",
  "◇  Repository cloned",
  "│",
  "◇  Found 1 skill",
  "│",
  "●  Skill: remotion-best-practices",
  "│",
  "│  Best practices for Remotion - Video creation in React",
  "│",
  "◇  Detected 2 agents",
  "│",
  "└  Installation complete",
];

Box-drawing character reference

Char	Usage
┌	Section start
│	Vertical connector
└	Section end
◇	Step completed (diamond)
●	Highlighted item (filled circle)
◆	Alternative highlight
✓	Success checkmark
✗	Failure mark

Composition Best Practices

1. Separate components per file — MacTerminal.tsx, TerminalContent.tsx, Cursor.tsx, etc.
2. Use Sequence for timed overlapping scenes — <Sequence from={120}>
3. Use Series for sequential non-overlapping scenes — <Series><Series.Sequence>
4. Put transforms on Sequence, not on the component — Keeps components reusable
5. Use AbsoluteFill for full-frame positioning — Every top-level wrapper
6. Store logos in public/ — Reference with staticFile("logo.png")
7. Transparent backgrounds on sub-compositions — Only Master has the background color
8. Font size for video: text-4xl (36px) — Much larger than web; video text needs to be readable at smaller playback sizes

Cross-References

• /remotion-animation — Spring physics, interpolation, 3D transforms
• /frontend-design — Web UI aesthetics (non-video)
• /distilled-aesthetics — Typography and color anti-patterns
• /clone-website — For pixel-perfect web reproduction (not video)