This tool is a cheat code for designers
Ridd asked me on Dive Club to show how I use Unicorn Studio, and I wouldn't record it until the new Basedash website was out. It felt way too easy for how hard it looked, and before we launched I wanted us to be one of the first sites that really had a lot of it (0:00).
Most of what I make in Unicorn is for the product, when I want to add a little bit of love to an empty state or a loading spinner (0:23). I can go in for half an hour, fuss around, and come out with something nobody else has, that's tiny and fast, with no assets to export. One of our embeds is about 30k. Our app has a frame rate meter, and the Unicorn embeds are the one thing that never drops frames (2:17). I had to do a little convincing with the team, but the file size and the frame rate did most of it, and handing one off is just copying its JSON into a Linear ticket (17:42).
The loading state
The one I showed first was the loading state for the AI in Basedash (3:25). It can take a while when it's working through a big schema, so I wanted something that started out really pixely and filled in as it went. When we started onboarding people with it, they'd say "okay, cool charts", but it's crazy how much that little detail changed the way people thought about the product, and it didn't take me or the developers much time at all (4:32). A small GIF spinner elsewhere in the app took me five or ten times as long. I've also shown how I made those loaders on X.
The dither helps a lot. I've never liked that strokes in vector illustrations aren't a uniform size, and with the dither every dot stays a single pixel however big or small the screen is, so I don't worry about stroke weights (5:17). Light mode is one inverted layer in the same file. Ridd pointed out that when something moves with your cursor, the interaction carries some of the polish, and I agree. I got into design through illustration, but the time it takes me to make a really good one now is way more than I'm willing to spend, and some of these took five minutes (6:29).
Making one from scratch
Then we made one live (8:20), which is mostly me scrubbing sliders I don't really understand until something looks interesting. A 3D shape with the new radial repeat, a Bayer 8×8 dither with the threshold pulled all the way up (10:33), some god rays and a beam following the mouse, and the duotone and vignette I always add. The layer order changes everything: the same god rays look like a normal gradient above the dither and pick up its texture below it (10:57). You can push most values past 100 or below zero too, which is where a lot of the stranger stuff happens (23:21). I never know what I'm going to make when I open it, and that's a big part of why I like it (14:47).
The one I'm proudest of is the footer on the Basedash site (20:25). The agency we worked with had put a dithered static logo there, and I loved it, until I saw banding in the SVG one day and rebuilt it as a shader. I call those "anti-heroes": if someone scrolls that far, you've got a real chance to pitch them, and I think we get more conversions from that part of the page than from the top (21:09). I walked through how it's made in another video.