david

This is stunning! Can we do a print swap?

Poster printed with risograph featuring aquatic creatures drawn in text mode. Color are black, blue and yellow on white paper. Big geometric font display the words : "Algorave 2 mai 2026 18h-6h Grrnd Zero 60 avenue de Bohlen 69120 Vaulx-En-Velin Prix + ou - 8 eur no CB". In small pixel font is written artists names along the creatures: - Raphaël Bastide - Lucky Juj && Johann Philippe - Jia Liu && Pilipluie - Daniel Kurosch Hopfner - azertype && Neon Delice - Bruno Gola - Damage Such - Unsorted - pastagang - Epiploke - BuboBubo && gcode - Katran && Zaza la Loca - th4 - jon && Dok - Lil Bleep && Nikilia - Déluge - Living Pseudographics - Crash Server - parkellipsen - anco - TUI - polymorphic_engine - Emilie Breslavetz - NuSan - Kaamtar - lbvp - Peregrine - syntonie && sheglitchr - C13 && beLow

The poster of this year Lyon's Algorave is out ! Printed using risograph thanks to Eidamned and Ralt144mi. If you are in France around May 2nd, book the date for a blast of a night with 44 artists for 12 hours of live coding performances !

#textmode #pixelart #poster #livecoding #algorave

The benefit of doing these directly with HTML elements is you can have them rearrange responsively, and having them static if use has reduce motion enabled.

Animated ASCII illustrations for solutions pages. Previously I had the ASCII completely separate and it was never clear whether to use the faux UI illustration or the ASCII but blending the two becomes a bit more interesting.

I believe this latest one is injection moulded

Well as you know, enginering is easy. Design is hard.

Thanks, was a tough one but me too!

Oh thats fantastic, thanks for sharing

Interactive 3d explorer with React Three Fiber. Worked with an artist to fix the topology and reduce the size of the CAD model. Custom LUT to more closely match the colour grade of the renders.

Swapping the rack image in and out with an aspect ratio container query. Using regular width queries wouldn't work here because we're locking to the viewport height. I also change the gradient angle to avoid overlapping too much with the main heading.

@marijanapav.com had an idea to add this ASCII noise effect. Here I'm using a mask image with a similar gradient to the background to them fade out together.

Reusing the dynamic connecting line code I had written previously that connects two elements responsively. Also uses an animating SVG gradient to do the pulsing line effect.

I was struggling to get a full height hero to work here until I realised I could dynamically change the number of racks on screen. From the latest @oxide.computer (oxide.computer) refresh.

On it!
github.com/oxidecompute...

Amongst other things, I am MUCH better at coding and making software having worked with David all this time.

UI Designer / Oxide

hello. are you an incredibly good UI designer? want to work with people who will love and respect your work and your process? want to make $250k (same as every other employee) and work fully remote? take a look

The height of this container is responsive but I wanted to create a `#` border without any partial characters. Discovered I could use `round(up, 100%, 1lh)` to round up to the nearest multiple of the mono char line height.

I haven't, but that sounds useful! FWIW when I did the first batch of colours a while ago, I was trying to split the difference between them looking equivalent and having equivalent contrast using a Figma plugin. If you just do contrast I don't think you get something that looks right.

I know just enough to get me in trouble, I was trying to avoid creating custom curves for each colour.

Well both dark and light mode draw upon the same core colours now. I just extended to add brighter tints. As an example, this would be the red if I just did a straight hue shift from our accent green. It ends up looking super pale. And yeah exactly on lowering the ones with a wider range.

Exactly! Pretty low risk either way

I suspect for larger orgs, the JSON route would be better. We're a very small team on the product side, so making any automations or tooling more maintainable is a big plus.

We just use Tailwind, so the transformation to other formats isn't useful and LLMs can make large scale changes directly to the CSS easier. Also bidirectionality is less important to me now, especially since Figma lacks native OKLCH support.

Astigmatism comes for us all

I'm no colour expert, but I find if you stick to what is completely perceptually equivalent you end limited by the hues with the smallest range. So what I end up doing is overcranking it, letting it fallback within gamut and then compensating for other colours that seem oversaturated.

Yeah, Oklab is the best colour space I've used for this sort of thing so far. I still end up adjusting down some of the chroma on a couple colours. I think I'm likely relying on the colours snapping back into gamut, that way I avoid having one or two of them looking duller than the rest.

You get a little spill this way, but maybe that's what you're after.

```
font-size: 200px;
background-color: red;
color: transparent;
text-shadow: 0px 0px 14px rgb(255 232 232 / 60%);
background-clip: text;
```

Lots to organise and finalise but the draft PR (including palette generator and Figma plugin) found here: github.com/oxidecompute...

Migrating away from JSON design tokens and now just parsing directly from the CSS files has meant we could remove lots of token-based automation. Built a plugin (thanks @gavinmcfarland.bsky.social for plugma.dev) to sync it with the Figma variables, transforming from OKLCH