Skip to content

Blueprints & Templates

The video system has two layers: template modules (216 parameterized scene views) and blueprints (whole-video starters that assemble modules into a complete storyboard). Both live under web/remotion/.

The live system is web/remotion/

This is the shipping system. The retired v1 @dexian/templates / packages/templates/src/video/ 8-template system is not used — don't edit it.

Template modules

web/remotion/templates/modules/ — 216 modules, each a self-contained, data-driven scene view. Every module is a pair:

File Contains
X.tsx The React/Remotion component (uses Remotion primitives: Sequence, Img, animation utils, …)
X.module.ts A Zod schema for its props + metadata (contentSlots, requirements, aspect support)

Modules cover nearly every marketing scene: hero splits, bullet/feature lists, stat holds, charts (bar, donut, stacked-area, gauge, progress-ring), device lockups, screenshot call-outs, comparisons, pyramids, org/mind-maps, Gantt/roadmaps, logo stings, outros, and full-bleed image/clip scenes.

Registry

  • web/remotion/templates/modules/index.ts — the auto-generated barrel: imports + ALL_MODULES[]
  • web/remotion/document/registry.ts — builds byId and requireModule(templateId) (which exposes .schema for validation)

Props are never auto-coerced — resolveBlueprint and the Director match props to schemas by hand, so min/max counts and shapes matter. The editor shows a live Zod validity badge per scene.

Media in modules

Components that show media use MediaPlaceholder from templates_backup/_shared/ (src + kind: "image" | "video"; a falsy src renders a dashed placeholder). Modules with real media slots include VideoSpotlight, DeviceLockup, AnnotatedScreenshot, ClickThroughFlow, BrowserMockup, and the full-bleed FullScreenImage / FullScreenClip (with caption + eyebrow overlay).

Blueprints (whole-video starters)

web/remotion/document/blueprints/ — a VideoBlueprint is a parameterized ResolvedIR: a seed storyboard whose scenes carry concrete props plus a few {{slot}} references (commonly brandColor) and may use "auto" durations.

type VideoBlueprint = {
  meta: { id, title, description, category, aspect, goal };
  schemaVersion: 1;
  theme: { bg, surface, text, accent: "{{brandColor}}", … };
  slots: Slot[];            // id, label, type: text|color|image|number|list, default
  scenes: { id, templateId, props, durationInFrames, transitionOut }[];
};

resolveBlueprint(blueprint, overrides, audioDurations) (web/remotion/document/blueprint.ts):

  • Replaces {{slot}} references (whole-value for "{{key}}", string-substitution for embedded {{key}})
  • Resolves "auto" scene durations from voiceover length (@remotion/media-utils; fallback 150 frames)
  • Sets dimensions from aspect — 16:9 (1920×1080), 9:16 (1080×1920), 1:1 (1080×1080)
  • Emits a concrete ResolvedIR

Slot.type is one of text | color | image | number | list. There is no video slot type — media is just a path string; a module declares mediaKind to interpret it.

What ships

The registry web/remotion/document/blueprints/index.ts (BLUEPRINTS[]) wires up:

Group Count Examples
Named blueprints 17 WhatsApp/conversational promo, SaaS launch, App promo, Dev API explainer, Marketing Studio, Webinar, Year-in-review, Hiring, Feature announce, Flash sale, Case study, Tech explainer, Brand manifesto, Onboarding tour, Competitor comparison, Social recap, Salesforce Assist
"More" collections 51 more.ts–more5.ts — investor pitch, roadmap, landing promo, league highlights, project plan, and many more, deliberately exercising less-used modules
Single-scene starters per module singleScenes.ts — one-scene starters generated from the module library, marked single: true

That's ~68 whole-video blueprints plus single-scene starters. Root.tsx auto-maps every BLUEPRINTS[] entry to a Remotion <Composition>, so registering a blueprint requires no Root.tsx edit.

Authoring a new blueprint

  1. Create web/remotion/document/blueprints/myThing.ts, modeled on marketingStudio.ts or saasLaunch.ts
  2. Export a VideoBlueprint and a resolved ir (call resolveBlueprint)
  3. Register it in blueprints/index.ts BLUEPRINTS[] ({ docId, title, description, blueprint, ir })
  4. Match each scene's props to its module's Zod schema by hand (counts matter)

The Director's Analyst role also consumes the catalog (web/src/director/catalog.ts → shortlistBlueprints) to pick an anchor blueprint when planning a storyboard, so a well-described blueprint improves AI storyboarding too.

Authoring a new module

  1. Create X.tsx (the view) and X.module.ts (Zod schema + metadata) under templates/modules/
  2. Hand-edit the barrel templates/modules/index.ts (one import + one ALL_MODULES entry — there is no generator script)
  3. Add a presets/<Id>.json with demo props (loadPresets validates them against the schema)
  4. Verify with cd web && npm run typecheck (tsc --noEmit)

Aspect ratios

Every blueprint targets an aspect (16:9 / 9:16 / 1:1); modules declare which aspects they support. The editor and the Director can switch aspect (e.g. "Try 9:16"), and export can produce one-click variants in each supported aspect.