# How I made the dithered Basedash loading animations

Tom Johnson · 2025-05-02

[Basedash](https://x.com/tomjohndesign/status/1918423209310925257)

It was the Friday before I went to Config, and I walked through how I made the loading animation for chart generation in [Basedash](https://www.tomjohn.design/content/basedash) [(0:10)](#t=10). It starts out really pixelated, swirls, comes into the scene and ends up crispy [(0:59)](#t=59). The loading time there is a little indeterminate, so I wanted something that felt like it was building over time and then revealing the chart [(1:38)](#t=98). I talk about why that loading state mattered on [Dive Club](https://www.tomjohn.design/content/unicorn-studio-cheat-code).

![The loading animation going from pixelated to crisp, captioned as I say: “This one starts off, it gets really pixelated, and then it swirls, and then it all comes into the scene, and then it is crispy.”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/dithered-loading-animations/pixelated-to-crispy-lbgCRtTGgM5OEw79aSaTDGKHufU0Cq.mp4 "Clip")

It's six or seven layers [(1:58)](#t=118): the duotone for the purple, the dither at 8×8, a vignette that keeps it centered so it doesn't look like it's in a box [(2:25)](#t=145), a pixelate that only shows when the animation runs [(3:18)](#t=198), a swirl, a beam I use as a light source, and blinds. Blinds usually give you that fluted glass look you've probably seen in Screen Studio, but I used the squares, which radiate from the center [(3:56)](#t=236).

![The animation in Basedash while a chart generates, captioned as I say: “idea behind this animation specifically was that the loading time here is a little bit indeterminate, so I wanted to have something that felt like it was building over time, and then revealing, and”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/dithered-loading-animations/indeterminate-LYtfWx8PSWCCJKXUEfCi04M6UCO5BA.mp4 "Clip")

Then I rebuilt one from scratch in green. The pixelate runs on an event: when it appears it goes from 100% to nothing over eight seconds, and the beam scales up after a second's delay [(10:22)](#t=622). I've been liking gradient maps lately, so I tried one, then went back to the duotone [(8:19)](#t=499).

![Blinds set to squares, radiating from the center, captioned as I say: “But this one I use the squares, which kind of makes it radiate from the center. It's pretty cool. And then”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/dithered-loading-animations/squares-EFuQSCpLE3G9NCgvu7gJOu9DW9PqZI.mp4 "Clip")

I wanted a ripple at the end, like in The Matrix when Neo touches the mirror after he takes the red pill [(13:10)](#t=790). I don't know what made me think of it. Maybe the green. It looked terrible, and then even worse [(15:45)](#t=945), so I took it out, and I could live with what was left. I published it to the Unicorn community at the end [(19:08)](#t=1148).

![Rebuilding the animation from scratch in green, captioned as I say: “know how in the Matrix when when Neo touches the mirror, right after he takes the red pill, he takes touches the mirror and it like morphs and warps”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/dithered-loading-animations/the-matrix-Gaictif77kIEh5u0ebc2vAYhBPzkI2.mp4 "Clip")

When I posted it on X I wrote:

> Here’s how I made the dithered Basedash loading animations with Unicorn Studio.