Animated Templates

18 layered animated starter designs — fully editable from frame zero, no lock-in

The Design Studio ships with 18 animated starter templates spanning the social, video, and email surfaces you’ll actually publish to. Pick one in the New Design dialog and the editor opens with the design already laid out and animated — but every layer is fully editable from frame zero.

Templates are starter material. They are not lock-in.

Browsing templates

1. Go to /dashboard/marketing/design/.
2. Click New Design.
3. Pick Animated / Video.
4. The dialog shows a gallery of 18 sample cards with looping MP4 previews.
5. Each card displays the dimensions and a live preview — only cards in viewport autoplay (lazy loaded via IntersectionObserver), so the dialog stays smooth even on slower machines.
6. Click a card. The editor opens with the template loaded.

What ships

The 18 templates cover the surfaces you’ll actually publish to:

Category	Templates
Square (1080×1080) — Instagram feed, Facebook, LinkedIn	Kinetic typography, animated banner ad, animated CTA, sale announcement, before/after, brand statement
Portrait 9:16 (1080×1920) — Stories, Reels, TikTok	Story slide show, Reel cover, kinetic Reel, product spotlight, quote card
Landscape 16:9 (1920×1080) — YouTube, LinkedIn video	Lower third, logo reveal, podcast cover, YouTube preroll, brand sting
Email banner (600×200) — header strips for newsletters and transactional emails	Email banner, holiday banner

Each template’s preview MP4 sizes correctly thanks to per-template aspectRatio — square cards stay square, vertical cards stay tall, banner cards stay short.

Editable from frame zero

Templates are stored as JSON describing every layer with its animation property — exactly the same schema used by user-authored and AI-authored designs. That means:

• Drag the headline — motion follows
• Retype any word — animation plays on the new copy
• Swap the brand color — palette refreshes; timing untouched
• Change the logo image — replace via media picker; everything else stays
• Re-strategize the motion — click Cascade Fade-Up / Kinetic / Hero Scale / Slideshow in the Animation panel; layer content stays put

The AI agent can also restyle and re-animate templates. Open the chat sidebar and ask:

“Make this match my brand colors and slow down the entrance.”

The agent reads the canvas snapshot, calls set_style on each layer to apply your brand palette, then re-calls animate_canvas with longer enter durations. Headline content, layer positions, and stacking order all stay intact.

How templates differ from Canva-style “animated templates”

The wedge isn’t the gallery. Most platforms ship template galleries. The wedge is what you can do once you’ve picked one:

• Canva — pick a template, change the headline, you’re done. Edit a layer that wasn’t in the original and motion breaks.
• Promo / InVideo — render a preview video locked to platform vocabulary; export forces you back into their player.
• Hiveku — every layer is a real Fabric object with the same animation schema as any other layer. No layer is “special.” Add new layers, delete existing ones, rename them, restyle them — motion still works.

Template anatomy (for reference)

Each template’s build() function returns canvas JSON with:

• An artboard (width × height in pixels, background fill)
• An ordered list of layers — text, shapes, images
• For each layer: position, scale, fill, fontFamily, plus an optional animation object

The animation object follows the shared vocabulary:

{
  "enter": "fade-up",
  "enter_delay_ms": 200,
  "enter_duration_ms": 600,
  "loop": "pulse"
}

You don’t write this directly — the right Style panel exposes every field as a labeled control. But it’s the same JSON the AI emits when you ask it to animate, the same JSON the export compositor reads when rendering MP4, and the same JSON saved to your project. Templates aren’t a parallel system; they’re starter values for the canonical schema.

When to start from a template vs. start blank

Start from a template when:

• You want a designer-grade starting point in two clicks
• You’re learning the studio and want to see what’s possible
• You need to ship something quickly and aren’t precious about uniqueness

Start blank when:

• You have a specific design in mind that doesn’t match any template
• You want the AI to design from scratch using your brand
• You’re building something custom (long-form motion, multi-scene Reel)

In both cases, the AI agent works the same way — it reads your brand, reads what’s on the canvas, and helps you refine.

If you start blank and end up with something you’d reuse, ask us in the help center to add it to the template library. The bar for inclusion is “useful for at least three customer use cases.”