Getting Started with Unicorn Studio
Unicorn Studio is a powerful no-code WebGL platform that allows you to create unique animated and interactive scenes. This guide will walk you through the basic concepts and features.
Core Concepts
Layers
Most shader-driven tools are node-based — build a graph, connect outputs to inputs, construct a pipeline. Unicorn Studio takes a different approach. Instead of nodes, you work with layers — similar to Figma, Framer, or Photoshop. This gives you a spatial canvas built for creative exploration. You build scenes by stacking and arranging layers:
- Shapes: Draw rectangles, circles, and polygons
- Images: Paste, drag, or upload and use images from your library
- Effects: Choose from 70+ configurable WebGL effects
- Text: Use free fonts, Google fonts, or custom uploads
- 3D Models: Add your own 3D models or extrude text and SVGs
- Videos: Videos are not actually their own layer type — you can find it in effects.
- Background: Create fills or gradients (can be hidden but not deleted)
You can mask with shapes, images, and text. Most everything has blend modes.
Effects
Effects are the backbone of the experience — not just stylistic add-ons. They can be the core of a design. Some are utilities, like Vignette or Anti-alias, while others are centerpieces like Aurora or Blob Tracking. An effect can manipulate everything beneath it or an individual layer. Access effects through the burst icon in the top toolbar on the right.
- Filters: Color manipulation
- Distortion: Scene displacement
- Blur: Various blur effects
- Lighting: Simulated lighting effects
- Stylize: Common style effects
- Misc: Unique effects
- Custom: Create your own shaders
You can add effects to specific elements that will only affect that layer.
Most effects have a default time-based animation for which you can control speed. Unicorn Studio sits somewhere between raw shaders and rigid presets — you don't have to build the blocks from scratch, but you're not constrained to a narrow set of prescriptive templates either.
Interactivity
On the web, animation often feels like an afterthought — something layered on top once layout is complete. In Unicorn Studio, motion and interaction are intrinsic. All layers have some degree of 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 respond to events — appear, hover, scroll, and mouse move. A subtle depth shift tied to the mouse, a scroll-driven mask reveal, or a gentle reactive bloom can add dimensionality without overwhelming the design.
Exporting
Unicorn studio has four main ways to export your scenes:
- Image: Export a single image
- Video: Export a video
- Embed: Embed your scene in another website
- Code: JSON scene data for self hosting