Designing Basedash

A meeting didn't happen, and enough people had asked me how I made the footer on the Basedash website, so I opened the Unicorn Studio file and tried to rebuild it from memory (0:00). It's totally off the cuff. Partway through, something stopped working and I had to start a new file, which happens to me a lot in Unicorn (4:11). It's built by one person and it can be a little finicky, but it's an unbelievable tool, so I give it all the grace in the world.

The footer is only six or seven layers (1:05): a black background, the Basedash wordmark, a blinds effect with the frequency down to about 1% so it distorts and fades out at the sides, a Bayer 8×8 dither with the threshold pushed from 50% to 100% (4:56), a duotone that strips everything down to black and white, a progressive blur that follows the cursor, with a bit of momentum so it sways instead of tracking it exactly (8:43), and a vignette. It's a lot more like Photoshop than Figma, because everything is layered and the order matters. The blur goes under the dither, so the pixels stay crispy.

The vignette is the one I use all the time (10:13). It looks like an Instagram filter at first, but it's what lets these sit on the page without looking like a box. I skew it into an oval and drag it so the tiny pixels at the bottom never reach the edge and everything diffuses into the page (11:22). None of it is round numbers. I scrub the sliders until it looks right, and a lot of the more interesting looks are past 100 or below zero (13:14).

To get it on the site I export an embed and paste the component into Framer, and there's a code export for the app (14:23). They're tiny and really performant, with hardly any dependencies, so I use them a lot, probably too much. I also showed a few of the loading and empty states I've made for the app, how I make light and dark versions (15:33), and then shared the file so anyone can remix it (16:47). I talked about more of them, and the footer, on Dive Club.