Unicorn Studio has rapidly grow to be 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 have a look at the artistic 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, know-how, and a little bit of mad science created a vortex that sucked me in for hours. I realized 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.
Over time I moved by the standard design instruments — Illustrator, Sketch, Figma — and regardless of every one being higher than the final, I used to be nonetheless making code prototypes. These instruments had been wonderful for exploration, iteration, and spatial pondering, however there was an excessive amount of distance between them and the browser. Inventive coding was enjoyable, but additionally gradual 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 E book 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 speedy and iterative as shifting layers on a canvas.
That concept finally turned Unicorn Studio.
A Layer-Primarily based Strategy to Graphics
Most shader-driven instruments are node-based, which is smart should you’re pondering 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 a substitute of nodes, Unicorn Studio makes use of layers — much like Figma, Framer, or Photoshop. This offers us that spatial canvas excellent for artistic exploration. You construct a scene by stacking and arranging layers:
- Shapes
- Pictures
- 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 every thing beneath it or a person layer. You’ll be able to masks with shapes, pictures, and textual content. Most every thing has mix modes.
Unicorn Studio sits someplace between uncooked shaders and inflexible presets. You don’t should construct the blocks from scratch, however you’re not constrained to a slender set of prescriptive templates both. I’ve most likely seen only one% of what’s potential. 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 essential shift was treating movement and interplay as native performance.
On the internet, animation usually seems like an afterthought — one thing layered on high as soon as structure is full. However once you’re working with WebGL, movement isn’t an add-on. It’s elementary. All layers have a point of native animation and interactivity, however In Unicorn Studio, virtually 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 delicate depth shift tied to the mouse, a scroll-driven masks reveal, or a delicate 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 cross. That flexibility comes with price — 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 might gradual issues down if used excessively.
Slightly than obscuring it, Unicorn Studio makes it seen. A built-in efficiency estimator scores your scene as you construct. The check web page exhibits real-time body time, draw calls, dropped frames, and reminiscence utilization. You’ll be able to downsample particular person layers, regulate DPI and FPS, or flatten suitable layers right into a single optimized shader to cut 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 computerized 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 e mail. It’s hero instance as a result of it has a little bit of every thing.
The hand is a picture generated with Krea. I used the “Generate Depth Map” function (proper click on on any picture) which provides a Depth Parallax impact routinely. That’s what creates the delicate 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 grow to be one shader.
To complete — I’ve added a Blob Monitoring shader, which attracts packing 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 main points 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 potential. 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 every kind of the way, 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 couple of 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 carried out by an agent.
Unicorn Studio is a option to create the indescribable. I hear so usually how a lot enjoyable individuals have leaping in and simply enjoying. This play turns into exploration, and finally the invention of distinctive visible experiences. With LLM’s coding increasingly more web sites right this moment, “distinctive” is more durable to come back by.
If executing concepts is affordable, Unicorn Studio will probably 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.
