Documentation
Back to Dashboard

Scene Templates

Templates are reusable building blocks for video scenes. Each template defines HTML structure, GSAP animations, content slots, and a default duration.

Built-in Templates

Hook

opener

Bold headline and subtitle that fade in with scale animation. Ideal for the first scene to grab attention.

Content Slots

  • • headline — primary text (required)
  • • subtitle — supporting text

Defaults

  • • Duration: 4 seconds
  • • Animation: fade-in + scale
  • • Responsive: yes

Chat Demo

demo

Animated conversation UI with user bubbles on the right and assistant responses on the left. Pass a multi-turn script array for a full conversation that auto-scrolls; falls back to a single user/AI pair when no script is provided.

Content Slots

  • • script — array of {role, text} turns (preferred)
  • • userMessage — legacy single-turn fallback
  • • aiResponse — legacy single-turn fallback
  • • inputPlaceholder — chat input bar text

Defaults

  • • Duration: 12 seconds (auto-scales by turn count)
  • • Animation: sequential bubble entrance + auto-scroll
  • • Per-message dwell scales with text length
  • • See Conversation Videos for the full pipeline

Stat

data

Large animated number counter with a descriptive label. Great for showcasing metrics, growth figures, or performance data.

Content Slots

  • • value — the number to display
  • • label — descriptive text below

Defaults

  • • Duration: 4 seconds
  • • Animation: count-up + scale-in
  • • Responsive: yes

CTA

closer

Call-to-action scene with a headline, prominent button, and URL. Staggered entrance animation brings each element in sequentially.

Content Slots

  • • headline — closing message
  • • buttonText — CTA button label
  • • url — destination URL

Defaults

  • • Duration: 5 seconds
  • • Animation: staggered entrance
  • • Responsive: yes

Custom Templates

Create your own templates via the API. A custom template is an HTML file with GSAP timeline registration and slot placeholders.

Template requirements:

  • • Valid HTML with a data-composition-id root element
  • • GSAP timeline registered on window.__timelines
  • • Slot placeholders using {{slotName}} syntax
  • • A slot_schema array describing each slot's type and constraints
i
Custom templates are stored in the database and scoped to your site. They appear alongside built-in templates in the editor's template picker.

Next

🎬
Rendering Pipeline
How videos are rendered
🎙
Voiceover
Add narration to scenes
📦
Batch & Pacing
Variations and platform pacing
Documentation - BlackOps Center | BlackOps Center