How I made the dithered Basedash loading animations

It was the Friday before I went to Config, and I walked through how I made the loading animation for chart generation in Basedash (0:10). It starts out really pixelated, swirls, comes into the scene and ends up crispy (0: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). I talk about why that loading state mattered on Dive Club.

It's six or seven layers (1:58): 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), a pixelate that only shows when the animation runs (3:18), 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).

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). I've been liking gradient maps lately, so I tried one, then went back to the duotone (8:19).

I wanted a ripple at the end, like in The Matrix when Neo touches the mirror after he takes the red pill (13:10). I don't know what made me think of it. Maybe the green. It looked terrible, and then even worse (15:45), 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).

When I posted it on X I wrote:

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