> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hiveku.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Design Studio Overview

> AI-driven graphic design and motion graphics on a layered editing canvas — from Instagram banner to Reel to email header

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/`.

<CardGroup cols={2}>
  <Card title="Layered canvas" icon="layer-group">
    Every text, shape, image, and CTA is its own editable layer — drag, retype, restyle anytime
  </Card>

  <Card title="AI design agent" icon="wand-magic-sparkles">
    Tell the AI what you want; it generates images via your brand kit and lays out the design
  </Card>

  <Card title="Motion graphics" icon="film">
    Animation is a property of layers, not a baked video — edit the headline mid-playback and motion follows
  </Card>

  <Card title="One-click export" icon="download">
    Static designs export to PNG. Animated designs export to MP4 via the Remotion render worker
  </Card>
</CardGroup>

## How this differs from other tools

| Tool                     | What it lets you edit         | When the AI helps                      | Output                             |
| ------------------------ | ----------------------------- | -------------------------------------- | ---------------------------------- |
| **Canva**                | Drag-drop, vendored templates | Limited (presets, copy)                | PNG / MP4, locked to Canva         |
| **After Effects**        | Per-layer keyframes           | None (desktop, no AI)                  | MP4                                |
| **Runway / Pika / Sora** | Nothing — the clip is baked   | Generates the whole clip               | Flat MP4 (re-prompt to change)     |
| **HeyGen**               | Talking-avatar scripts        | Yes, for the script                    | Flat MP4                           |
| **Hiveku Design Studio** | Every layer + every animation | Designs from brand, animates per-layer | PNG, MP4, all layers stay editable |

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:

<CardGroup cols={2}>
  <Card title="Static / Image" icon="image">
    A still creative — Instagram post, banner ad, email header, blog hero. Export to PNG.
  </Card>

  <Card title="Animated / Video" icon="play">
    A motion creative — Reel, Story, TikTok, animated banner, lower third. Export to MP4.
  </Card>
</CardGroup>

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

<CardGroup cols={2}>
  <Card title="Make an animated design" icon="film" href="/design/motion-graphics">
    The headline feature — layered animation, AI-driven, per-layer editable
  </Card>

  <Card title="Edit animation per-layer" icon="sliders" href="/design/animation-editor">
    The Style panel and Animation panel — fine-tune timing without touching code
  </Card>

  <Card title="Browse templates" icon="grid" href="/design/templates">
    18 layered starter designs, each fully editable from frame zero
  </Card>

  <Card title="Export to MP4 / PNG" icon="download" href="/design/exporting">
    Render the canvas to a flat file when you're done iterating
  </Card>
</CardGroup>