@fr0/templates

Ready-to-use sample templates for fr0.

Status

✅ Phase α-2 — done (3 samples)

Purpose

A curated library of Template objects (Timeline IR + InputDefinition[]) that:

• Demonstrate common video patterns and the preset catalog end-to-end
• Provide a one-line path from key → ready-to-render Timeline via buildSample()
• Serve as LLM few-shot examples for AI-generated content
• Double as regression coverage for the core resolver (every sample is validated and resolved in CI)

Quick start

import { Player } from '@fr0/player';
import { buildSample } from '@fr0/templates';

const timeline = buildSample('titleCard', {
  title: 'Phase α-2 complete',
  subtitle: 'fr0 preview stack works',
});

export function Demo() {
  return <Player timeline={timeline} autoPlay loop />;
}

Samples

| Key | Canvas | Length | Covers | |---|---|---|---| | titleCard | 1920×1080 | 4s @ 30fps | Text layer, fadeInUp / fadeOut, animation delay, easeOutCubic, parameterized strings and colors | | kineticTypography | 1080×1920 (9:16) | 6s @ 30fps | Multiple text layers with from/duration visibility windows, typewriter, scaleIn with easeOutBack, slideInLeft, pulse, fadeOut | | shapeShowcase | 1280×720 | 4s @ 30fps | Every shape type (rectangle / circle / polygon), anchor points, bounceIn / scaleIn / rotateIn entrances, infinite pulse / bounce / spin emphasis loops |

Public API

| Export | Purpose | |---|---| | SAMPLES | Record<SampleKey, Template> — enumeration / UI listings. | | SampleKey | keyof typeof SAMPLES, derived via satisfies. | | buildSample(key, inputs?) | Runs processTemplate with the supplied (or default) inputs and assertValids the result. Returns a fully-typed Timeline. Throws on missing required inputs or undeclared placeholders. | | titleCard / kineticTypography / shapeShowcase | Individual Template objects, importable by name for inspection or editing. |

Design notes

• Every sample is a Template, not a raw Timeline. Consumers always go through buildSample() (or processTemplate() directly) so input defaults and placeholder substitution run identically across samples.
• buildSample is the only runtime helper. Everything else is pure data. Adding a new sample is: create a file, add the entry to SAMPLES, done.
• Samples are CI-protected. The test suite builds every sample with defaults, runs validate(), and resolve()s at frame 0, the midpoint, and the last frame. A sample with a broken animation window cannot ship.

Testing

pnpm --filter @fr0/templates test

16 tests covering the registry contract and every sample.

Used by

• Documentation (demo snippets)
• LLM few-shot prompts (sample Templates as authoritative examples of the Timeline IR)
• vidmagic SaaS as starter templates once the Phase γ encoder lands