Unicorn Studio has rapidly change into a favourite amongst designers experimenting with WebGL and interactive graphics. On this article, we’re delighted to have George Hastings, the creator of Unicorn Studio, share the story behind the instrument and the concepts that formed it, together with a take a look at the inventive prospects it opens up for designers and builders alike.
There’s immense graphical energy sitting proper within the browser; lighting, volumetrics, depth, distortion — however accessing it requires grappling with esoteric and intimidating GLSL syntax.
The ability is there, however for the overwhelming majority of designers (and even builders), it’s out of attain.
For me, graphics programming began as a pastime. The primary time I noticed pixels reacting to math equations, I used to be hooked. The mix of artwork, expertise, and a little bit of mad science created a vortex that sucked me in for hours. I discovered to code early in my profession as a UX designer. I made wireframes and prototypes within the day, and JavaScript canvas animations within the night.
Through the years I moved by means of the standard design instruments — Illustrator, Sketch, Figma — and regardless of each being higher than the final, I used to be nonetheless making code prototypes. These instruments have been glorious for exploration, iteration, and spatial considering, however there was an excessive amount of distance between them and the browser. Artistic coding was enjoyable, but in addition sluggish and tedious. I used to be feeling a tooling hole.
I had already began constructing a toy app for drawing blurry gradients. However in October 2020 I got here throughout The Ebook of Shaders and one thing clicked. It was nonetheless intimidating, however WebGL shaders had all of it. I wished an area the place experimenting with it felt as quick and iterative as shifting layers on a canvas.
That concept finally turned Unicorn Studio.
A Layer-Based mostly Method to Graphics
Most shader-driven instruments are node-based, which is smart in the event you’re considering like an engineer — construct a graph, join outputs to inputs, assemble a pipeline. I confess, I haven’t even tried them — I wished to make use of my naivety as an asset to encourage a recent strategy.
As an alternative of nodes, Unicorn Studio makes use of layers — much like Figma, Framer, or Photoshop. This provides us that spatial canvas good for inventive exploration. You construct a scene by stacking and arranging layers:
- Shapes
- Photographs
- Textual content
- 3D fashions
- Results
Results are the spine of the expertise, not simply stylistic add-ons. They are often the core of a design. Some are utilities, like Vignette or Anti-alias whereas others are centerpieces like Aurora or Blob Monitoring. An impact can manipulate all the things beneath it or a person layer. You possibly can masks with shapes, pictures, and textual content. Most all the things has mix modes.
Unicorn Studio sits someplace between uncooked shaders and inflexible presets. You don’t must construct the blocks from scratch, however you’re not constrained to a slim set of prescriptive templates both. I’ve most likely seen only one% of what’s attainable. I particularly love when somebody shares a undertaking that makes me pause and ask, “Wait — how did they do this?”
Movement built-in
One other vital shift was treating movement and interplay as native performance.
On the internet, animation usually appears like an afterthought — one thing layered on high as soon as format is full. However if you’re working with WebGL, movement isn’t an add-on. It’s elementary. All layers have some extent of native animation and interactivity, however In Unicorn Studio, nearly any property of any layer can reply to occasions:
- Seem
- Hover
- Scroll
- Mouse transfer
There’s additionally a timeline for composing time-based sequences, however in lots of circumstances interplay alone is sufficient. A refined depth shift tied to the mouse, a scroll-driven masks reveal, or a mild reactive bloom can add dimensionality with out overwhelming the design
Efficiency as a Design Constraint
WebGL inevitably raises one query: what about efficiency?
Unicorn Studio builds scenes by assembling layers sequentially, with every layer rendering by default as its personal shader go. That flexibility comes with value — extra layers imply extra draw calls, texture reads, and GPU work. Some results, like these with raymarching or multi-pass blurs, are mathematically heavy and may sluggish issues down if used excessively.
Quite than obscuring it, Unicorn Studio makes it seen. A built-in efficiency estimator scores your scene as you construct. The take a look at web page reveals real-time body time, draw calls, dropped frames, and reminiscence utilization. You possibly can downsample particular person layers, regulate DPI and FPS, or flatten appropriate layers right into a single optimized shader to scale back overhead considerably.
Flattening specifically can merge a number of layers into one compiled shader, slicing draw calls and eliminating pointless work with culling and occlusion. Mixed with a light-weight runtime (about 29kb gzipped) and automated optimizations like pausing when out of view, efficiency turns into a part of the design course of.
Expressive graphics are solely fascinating in the event that they run easily!
Demo time
I used this undertaking to create a GIF that I put within the header of the final Unicorn Studio replace electronic mail. It’s a very good hero instance as a result of it has a little bit of all the things.
The hand is a picture generated with Krea. I used the “Generate Depth Map” characteristic (proper click on on any picture) which provides a Depth Parallax impact routinely. That’s what creates the refined 3D movement.
I added the textual content layers on high of that after which a Nebula (the flowy gradient) with Overlay mix mode. With the flatten optimizer, all of those layers change into one shader.
To complete — I’ve added a Blob Monitoring shader, which pulls containers and connecting traces round areas of movement.
Recreations
An effective way to be taught the instrument is to attempt to recreate one thing you’ve discovered elsewhere.
I discovered this animation as a video within the hero part of Future. The setup was simple, nevertheless it took a little bit of time to tune the small print good. It makes use of a form with a blue radial gradient, with a Noise distortion on high, adopted by a sphere 3D form (SDF) clipped with a Form layer. I used the floor texture parameters so as to add the distortion to the sphere.
Any person requested within the Unicorn Studio Discord if this animation from Blackalgo was attainable. This recreation makes use of a pulsing Beam with some Wisps, masked by a 2D SDF customized form, and an overlaid ASCII dither impact with some Bloom on high.
Within the Wild
Listed here are some creations out within the wild which have both been shared or simply stumbled upon. Whereas they’re principally hero sections, I’ve seen Unicorn utilized in all types of how, tiny button interactions, footers, fly-out menu backgrounds, and a few fairly wild stuff by Fred Moon.
Trying forward
It sounds humorous to speak a few software program product in 2026 with out mentioning AI. LLMs excel at creating with excessive specification. If it may be described intimately, it may be finished by an agent.
Unicorn Studio is a technique to create the indescribable. I hear so usually how a lot enjoyable individuals have leaping in and simply taking part in. This play turns into exploration, and finally the invention of distinctive visible experiences. With LLM’s coding an increasing number of web sites at this time, “distinctive” is more durable to come back by.
If executing concepts is reasonable, Unicorn Studio can be a spot to find them.
Get began
Curious to strive it out? This information will take you thru the options and make it simple to get began.
