# This tool is a cheat code for designers

Dive Club · June 18, 2025

[Original publication](https://youtube.com/watch?v=00a3nuX30f4)

Ridd asked me on Dive Club to show how I use Unicorn Studio, and I wouldn't record it until the new [Basedash](https://www.tomjohn.design/content/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)](https://www.youtube.com/watch?v=00a3nuX30f4&t=0s).

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)](https://www.youtube.com/watch?v=00a3nuX30f4&t=23s). 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)](https://www.youtube.com/watch?v=00a3nuX30f4&t=137s). 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)](https://www.youtube.com/watch?v=00a3nuX30f4&t=1062s).

## The loading state

The one I showed first was the loading state for the AI in Basedash [(3:25)](https://www.youtube.com/watch?v=00a3nuX30f4&t=205s). 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)](https://www.youtube.com/watch?v=00a3nuX30f4&t=272s). 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](https://x.com/tomjohndesign/status/1918423209310925257) on X.

![The Basedash AI loading state, filling in from pixels, captioned as I say: “So this one is like this was so easy to make. Uh once I figured out the look, it looks pretty layered and all that kind of stuff, but it's really not there. Like like this is”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/unicorn-studio-cheat-code/loading-state-CQJlntBOHmOOzZtg3REty4M39jZjFh.mp4 "Clip")

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)](https://www.youtube.com/watch?v=00a3nuX30f4&t=317s). 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)](https://www.youtube.com/watch?v=00a3nuX30f4&t=389s).

![An empty state in Basedash, a dithered 3D grid that follows the cursor, captioned as I say: “that's nice about this with the the the dither effect that we use is those dots no matter how big or small your screen is always stay the same. So”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/unicorn-studio-cheat-code/empty-state-GHOPcgz6vHVZ9W5KJIzHspP78dIqmJ.mp4 "Clip")

## Making one from scratch

Then we made one live [(8:20)](https://www.youtube.com/watch?v=00a3nuX30f4&t=500s), 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)](https://www.youtube.com/watch?v=00a3nuX30f4&t=633s), 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)](https://www.youtube.com/watch?v=00a3nuX30f4&t=657s). You can push most values past 100 or below zero too, which is where a lot of the stranger stuff happens [(23:21)](https://www.youtube.com/watch?v=00a3nuX30f4&t=1401s). 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)](https://www.youtube.com/watch?v=00a3nuX30f4&t=887s).

![A 3D shape made from scratch on the call, dithered in Unicorn Studio, captioned as I say: “like the Bayer 8×8. Pull the the threshold all the way up. And then it looks dithered. And then if I want that god rays, it's there. And then”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/unicorn-studio-cheat-code/from-scratch-pPYAIgLHWupxfMtRilqA6xPqxoYR1l.mp4 "Clip")

The one I'm proudest of is the footer on the Basedash site [(20:25)](https://www.youtube.com/watch?v=00a3nuX30f4&t=1225s). 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)](https://www.youtube.com/watch?v=00a3nuX30f4&t=1269s). I [walked through how it's made](https://www.tomjohn.design/content/basedash-footer-in-unicorn-studio) in another video.

![The dithered Basedash logo in the website's footer, captioned as I say: “this. I call it anti-heroes. I don't know if anyone else calls it that way, but it's like the opposite where you really like if someone gets this far, you really have a chance to pitch them. That's why we put”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/unicorn-studio-cheat-code/footer-Q5H2slv2S7QMKkFeKjH2ZqpBzPpXQl.mp4 "Clip")