Documentation
Back to Dashboard

Scene Templates

Scene templates are reusable building blocks that define HTML structure, GSAP animations, content slots, and a default duration for each video scene.

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

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

Want this page as machine-readable markdown? GET /docs/features/video-generation/templates.md