Skip to content

Getting Started with Unicorn Studio

Unicorn Studio is a design studio for graphics that move, respond, and ship. There are two ways to make your first scene: build it by hand, or start with an agent. Both end in the same place, a scene where every layer, control, and animation stays editable.

Build your first scene

  1. Open a project. Start from a blank canvas, or remix one of the 130+ templates and change any part of it.
  2. Compose. Add text, a shape, or an image. The + button in the top bar opens your media, effects, 3D models, and templates.
  3. Add an effect. Click +, choose Effects, and pick one. Then tune its controls in the properties panel.
  4. Animate it. Add an Appear event to a layer. The Timeline opens, where you sequence and retime the entrance.
  5. Make it respond. Turn up Mouse tracking on a layer so it follows the cursor, or add a hover or scroll event.
  6. Ship it. Click Export to save an image or video, or publish the scene and copy the embed for your site.

Start with an agent

  1. Open the agent. Click Unicorn Agent in the top bar to use the agent built into the editor, or Connect your agent to bring in Claude, Cursor, or Codex over MCP.
  2. Describe what you want. For example: Add a headline that fades in and slides up on load, with a subtle grain over the whole scene.
  3. Edit the result yourself. What the agent makes is ordinary layers. Select one to change its controls in the properties panel, move it, or retime its animation on the Timeline. Each agent change is one undo step.
  4. Explore directions. Ask for variations side by side, then keep going on the one you like, by hand or by telling the agent what to change next.

Core Concepts

Layers

You work with layers, as you do in Figma, Framer, or Photoshop, on an infinite canvas where scenes sit side by side. That makes it easy to branch an idea into new directions and compare them. Build a scene by stacking and arranging:

  • Shapes: Draw rectangles, circles, and polygons
  • Images: Paste, drag, or upload and use images from your library
  • Text: Use free fonts, Google fonts, or custom uploads
  • 3D Models: Add your own 3D models or extrude text and SVGs
  • Video: Add footage from your media library, and it joins the scene as a layer you size, mask, and blend like an image
  • Effects: Choose from 90+ configurable WebGL effects
  • Background: Create fills or gradients (can be hidden but not deleted)

You can mask with shapes, images, and text, and almost everything has blend modes.

Effects

Effects can transform an entire scene or a single layer. Stack them, adjust their controls, or create your own. Some are utilities, like Vignette or Anti-alias. Others are centerpieces, like Aurora or Blob Tracking. Find them under + in the top bar:

  • Generative: Effects that draw their own imagery
  • Distort: Scene displacement
  • Post process: Color, style, and finishing passes
  • Blur: Various blur effects
  • Misc: Unique effects
  • Custom: Write your own shaders

Add an effect as a child of a layer and it will only affect that layer.

Most effects have a built-in time-based animation with a speed you control. And if the effect you're imagining doesn't exist yet, an agent can build it.

Agents

Agents can build effects, arrange layers, animate scenes, and explore directions in the same project you edit by hand. Ask for new directions, then edit the result yourself or tell the agent what to change next. Each change is a normal edit you can undo.

  • Unicorn Agent: Built into the editor. It writes custom shaders, adds and tunes effects from the library, lays out text and images, sets up animations and events, and can publish the scene when it's ready. It is included with Legend, and Free plan users can try it with 50 free credits. See the Unicorn Agent guide.
  • Your own agent: Connect Claude, Cursor, or Codex over MCP and it builds in your open editor, then drops the embed into the codebase it's already working in. Free accounts include 250 agent changes a month. See the MCP guide.

Interactivity

Motion and interaction are part of every layer. Each one has some native animation and interactivity:

  • Mouse tracking: Follow cursor movement (0-100% intensity)
  • Momentum: Add weight to tracking movement
  • 3D axis tilt: Rotate elements toward cursor (elements only)

Almost any property of any layer can also respond to events: appear, hover, scroll, and mouse move. A subtle depth shift tied to the mouse or a scroll-driven mask reveal can add dimensionality without overwhelming the design.

Variables

When you land on something you like, variables turn it from a one-off scene into a visual language you can keep using. Almost any property can become a named control that publishes with your scene. Your site can then feed it from code, live data, or sound, and your team or clients can make on-brand variations without touching the design. Group values into presets to ship curated looks like Brand Dark and Brand Light.

Exporting

What you see is what you ship: a published scene runs on the same WebGL engine as the canvas. Everything lives in the Export panel, with four ways to get your scene out:

  • Image: Export a single frame as PNG, JPG, or WEBP
  • Video: Export a video up to 4K
  • Embed: Publish and copy a ready-made component for Framer, Webflow, Figma Sites, React, or plain HTML. See the Embed Guide
  • Code: Export the scene as JSON to host it yourself (Legend). It still runs on the unicornstudio.js runtime

Next: Events