Why the Images on My Blog Look Like That
Every once in a while, someone messages me to point out that the photos on my blog look a little broken. They are looking out for me, and I appreciate every single one of those messages, even when the answer is “no, I did that on purpose.”
The dots, the colors bleeding into each other, the way the images soften when they first load. They think maybe my Craft templates are misfiring, or my image transforms have drifted off the rails.
They haven’t. That weird look was a choice. Not necessarily a good one — but this is where I experiment, and I’m fine with that.
The dots come from a web component I built called Some Shade, because under the hood it is a WebGL shader. It is a custom element you can drop into any HTML page. Load a photo, pass it through the shader, and out comes a CMYK halftone, a duotone, an early Technicolor two-strip, or a dot grid. There’s a live playground if you’d like to turn the knobs yourself.
I want to talk about why it exists at all, because the why is more interesting to me than the code behind it.
Old habits
I spent a chunk of my early career as an art director involved in print production, back when “halftone” was a thing you had to think about at the imagesetter, not a thing you faked in code. That dot pattern is just interesting to me. I love how it breaks an image into something the eye still reads as a photograph, only assembled out of parts you can count.
So a CMYK halftone was the first effect I built. Four screens, four angles, four channels. The component’s default settings use the classic print angles: 15 degrees for cyan, 75 degrees for magenta, 0 degrees for yellow, and 45 degrees for black. These values are not there because I’m being clever. They are the historically correct angles to use to avoid a moiré pattern when reproducing a halftone image.
My component sometimes produces the pattern because you’re seeing a screen instead of a fixed-sized printed piece of paper. That’s fine with me. Visit the image playground example where I’ve altered the magenta channel’s angle and then change it more yourself to see the moiré pattern change.
The Technicolor sidequest
The effect I’m fondest of is the two-strip Technicolor one. That came directly from watching old footage of The King of Jazz (1930) and getting hooked on what early color reproduction looked like when the medium could only do two channels. Warm and cool, no blue. Skin tones go salmon-coral. Grass turns the strange yellow-green that only exists in those reels. There is a real artistic decision behind every shot in the movie, because the medium itself is forcing your hand. If you want to explore the history of the process, watch The Two-Color Process on YouTube.
Re-creating that as a shader meant building a halftone for each ink color and letting you pick the colors. It is a tiny love letter to a constraint I find beautiful.
There’s also a technical wrinkle worth mentioning. Halftone printing works in subtractive color. Inks absorb light. While a screen works in additive color, where light is emitted directly. Marrying a two-strip Technicolor look with a halftone grid means bridging those two systems, and the result is something I haven’t seen done before. So it’s an experiment in multiple ways.
Why is it a web component?
I wanted this to be useful outside of SuperGeekery. Once the web component is registered, I can use it here in Craft in a Twig template, in a React playground, or in a static HTML page. No framework dependency, no build pipeline — just a standard JavaScript import to drop it in. Lit does the heavy lifting on the rendering side. The rest is plain DOM. It feels like the right shape for a portable visual effect.
Why is this weird thing on my blog?
SuperGeekery is my public playground. It’s where I take ideas that are not necessarily good and let them run loose on a live website that real people see. The photos on my site are not run through a “make-this-look-nice” pipeline. They are run through an in-progress experiment that I keep tweaking. Recently, I switched the effect to a dot-grid effect and quickly decided the halftone looked better, and switched it back. Sometimes I bump a parameter, and the images look worse for a day until I notice. I may have removed the image experiment entirely from my site by the time you are reading this, but this will still be a playground for possibly weird ideas.
If the only places I shipped code were client work and other people’s products, I would only ever build the safe version of every idea. Halftones on a blog are not something anyone is asking for. They make people ask if my CSS is broken. (Sometimes the correct answer to that question is yes!) They are also mine, and they are on a site I own, and the worst-case downside is that I look a little odd for a while.
If you’re a developer, do you have a place like this? A personal site, a side project, or a little subdomain where you let yourself try things that wouldn’t survive a “stakeholder review.” If you don’t have one, I’d encourage you to make one — not because you need to ship something important on it, but because you need somewhere to ship something strange, unnecessary, or stupid.
That’s the whole pitch. Using odd-looking images on my site is my current strange thing. The thing after this one will be something else, hopefully just as esoteric and strange. The site is the playground. The playground is the point.
What weird thing are you running on your own site right now? I want to know.
