Also the new CSS accent-color property.

My coworker hacked together a demo that's pretty wild: https://twitter.com/nathanAlan/status/1436145205019922440

Oh neat, I didn't know about this property.

Good catch. I posted an issue: https://github.com/bryanbraun/checkboxland/issues/16

This is giving me ideas. Thanks for sharing!

Very clever!

It kind of reminds me of this pattern I saw that someone made out of range sliders (though not as animated): https://codepen.io/xdesro/pen/dyRNqqY

This is what I used for testing... it you try it with a bunch of different videos: https://www.bryanbraun.com/checkboxland/docs/demos/video-tes...

There's a better webcam demo that's kind of buried but fun to play with here: https://www.bryanbraun.com/checkboxland/docs/demos/webcam-te...

Some background: a little while ago I built a library called "Checkboxland" at the Recurse Center for rendering stuff into a checkbox grid. I recently made an update that lets it render arbitrary images and video. The video feature supports HTML MediaStream, which is what powers the webcam demo.

Recurse Center for Rendering Stuff into a Checkbox Grid, 1 Checkbox Drive, etc.

I was there for this! I actually use this as an example of a perfect mini-batch project to anyone who's skeptical of what they can get done in a week.

There's no way to change camera input. Shame I couldn't try this demo.

This is really fun! I'm not sure of the practicality (particularly with the QR demo, my boxes don't turn bright blue like yours apparently do, so its pretty invisible to a scanner) but if it looks cool then that's reason enough in itself

Yeah, the boxes are bit brighter by default in Safari, so that's the browser I tend to use for screenshots and video.

You hint in the docs that you make some efforts to render efficiently. Are there any write-ups on the optimizations or it is just as simple as updating only when needed?

I wrote up some notes about it here: https://github.com/bryanbraun/checkboxland/tree/master/src#p...

In short: only updating when needed, minimizing the number of DOM queries, and avoiding costly CSS layouts.

This is brilliant. Amazing work. It even caught my ceiling fan running in the background.

That's a good callout. I just updated it to add more detail there.

Agreed, just trying to keep the tutorial simple for now. My other web-animation/education project (https://sparkbox.github.io/bouncy-ball) uses requestAnimationFrame more heavily.

Now that I think of it, it might be worth adding an asterisk and footnote about requestAnimationFrame to the post.