Skip to main content
The Design Studio is where you create marketing creative — Instagram posts, Reels, TikTok videos, YouTube thumbnails, banner ads, email headers, lower thirds, kinetic typography. It’s a layered canvas backed by an AI design agent that knows your brand, plus a motion graphics runtime that animates real, editable layers (not flat MP4s). You’ll find it at /dashboard/marketing/design/.

Layered canvas

Every text, shape, image, and CTA is its own editable layer — drag, retype, restyle anytime

AI design agent

Tell the AI what you want; it generates images via your brand kit and lays out the design

Motion graphics

Animation is a property of layers, not a baked video — edit the headline mid-playback and motion follows

One-click export

Static designs export to PNG. Animated designs export to MP4 via the Remotion render worker

​
How this differs from other tools

The wedge: animation is a property of editable layers, not a flat video. Change the headline mid-animation and motion follows. Have the AI re-strategize timings on three layers and the rest stay untouched. Export to MP4 only when you’re done iterating.

​
Two project types

When you click New Design in /dashboard/marketing/design/, you pick:

Static / Image

A still creative — Instagram post, banner ad, email header, blog hero. Export to PNG.

Animated / Video

A motion creative — Reel, Story, TikTok, animated banner, lower third. Export to MP4.
The choice tells the AI agent what you came for. Animated projects bias the agent toward calling animate_canvas after laying out the static frame; static projects skip motion entirely. You can change your mind later. A static design becomes animated the moment you (or the AI) attach an animation to any layer.

​
Where each piece lives

  • Canvas — center of the screen, Fabric.js v7 with custom video and animation runtime
  • Layer list — left side, every text/shape/image/CTA stacked z-order
  • Style panel — right side, properties of the selected layer (fill, fontFamily, opacity, animation)
  • Animation panel — right side, applies coherent motion strategy across all layers in one click
  • AI chat — collapsible right sidebar; talk to the design agent
  • Sample templates — appear in the New Design dialog; 18 layered animated starters
See the rest of this section for each surface in detail.

​
Where to start

Make an animated design

The headline feature — layered animation, AI-driven, per-layer editable

Edit animation per-layer

The Style panel and Animation panel — fine-tune timing without touching code

Browse templates

18 layered starter designs, each fully editable from frame zero

Export to MP4 / PNG

Render the canvas to a flat file when you’re done iterating