Components

These are the off-the-shelf components you can drop into a scene. They are deterministic, frame-driven, and designed to stack cleanly with layouts.

Overview

• Use components for text overlays, motion graphics, and UI elements.
• Keep layouts for structure; components are content.
• Everything is frame-driven (no CSS keyframes).

Components Reel

A short montage showing the core components.

Title + Subtitle (with text effects)

Titles and subtitles support text effects for controlled, readable motion.

layer.title({
  text: "Frame-driven titles",
  textEffect: {
    effect: "fade_up",
    unit: "words",
    durationFrames: 24,
    staggerFrames: 4,
    start: { kind: "cue" }
  }
});

layer.subtitle({
  text: "Readable motion, minimal setup",
  textEffect: {
    effect: "slide_left",
    unit: "chars",
    durationFrames: 20,
    staggerFrames: 2
  }
});

Background

Use a flat color from the current theme to set the scene.

layer.background({
  color: "var(--color-bg)"
});

Progress Bar

Shows playback progress; ideal for tutorials and onboarding.

layer.progressBar({
  position: "bottom",
  height: 8,
  color: "var(--color-accent)",
  backgroundColor: "var(--color-muted)"
});

Lower Third

Introduce speakers or annotate a moment.

layer.lowerThird({
  name: "Jordan Lee",
  title: "Design Lead",
  organization: "Babulus",
  style: "modern",
  primaryColor: "var(--color-accent)"
});

Bullet List

Step-by-step explanations or key points.

layer.bulletList({
  items: ["Frame-driven", "Composable", "Deterministic"],
  revealStyle: "spring",
  staggerDelayFrames: 12
});

Callout

Point to a specific area in a layout or screenshot.

layer.callout({
  text: "This is the key signal",
  pointerTarget: { x: 1240, y: 420 }
});

Chyron

Ticker-style updates or quick bullet headlines.

layer.chyron({
  items: [
    { text: "Frame-driven system" },
    { text: "All engines synchronized" }
  ],
  mode: "page"
});

Code Block

Readable code walkthroughs.

layer.codeBlock({
  language: "xml",
  code: "const frame = i => i * 2;"
});

Quote Card

Pull-quote card for emphasis.

layer.quoteCard({
  quote: "The frame is the clock.",
  author: "Babulus"
});

When to Use What

• Title + Subtitle: scene openers, transitions, chapter markers.
• Lower Third: speaker identification or context tags.
• Bullet List: structured points and arguments.
• Callout: annotate a specific region of the screen.
• Chyron: rapid updates or news-style highlights.
• Code Block: developer-focused walkthroughs.