Dither lab

A working comparison sheet for the site’s low-energy graphics: CSS pattern tiles, dividers, stepped animations, and image pipeline variants — so we can pick favourites before rolling them out everywhere.

01 · Pattern tiles (CSS-only, ~200 bytes each)

Bayer 4×4 threshold tiles as inline SVG data URIs. Theme-aware, zero requests. Top row at 8px scale, bottom row at 4px.

--dither-028px scale

--dither-048px scale

--dither-088px scale

--dither-128px scale

--dither-hatch8px scale

--dither-024px scale

--dither-044px scale

--dither-084px scale

--dither-124px scale

--dither-hatch4px scale

02 · Dividers

A · .dither-fade — density ramp, ink to nothing:

B · .dither-fade--up — reversed ramp:

C · .shade-rule — pure Unicode text, zero graphics:

D · dithered <hr> as used in article content:

03 · Motion (steps() animations, paused under reduced-motion)

.dither-static --fine4/6px grain, 1.6s drift

.dither-static8/12px grain

.dither-static --coarse16/24px grain, 2.2s drift

.static-noise404-page variant (conic interference)

Hover me — accent shimmer sweeps in

.dither-shimmerstepped hover underline

Terminal cursor

.blink-cursorsteps(2) blink

.pix-sparklesambient twinkle field, frame-swapped sprites

Hover me — a sparkle pops

.pix-sparkle-hoversingle 0.5s twinkle

The homepage hero and post banners also run interactive canvas effects (pixel-fx.js): a coarse-grid ripple simulation follows the pointer, rendered as chunky pixels or as an ASCII ░▒▓█ ramp, with the same sparkle sprites as a separate, composable effect. Configured via [Params.pixelFx] in hugo.toml, per-slide fx / fx_color in data/slides.toml and per-post fx / fx_color front matter.

04 · Photo treatments (surveillance capitalism post image)

Same source photo through different pipeline settings. Sizes are actual file weights served.

Original photo, resized to 480px — **Original (480px JPEG)**24 kB

Previous pipeline: 160px Bayer dither with CSS tint overlay — **Previous pipeline (160px + CSS tint)**3 kB

Shipped cover: 480px grayscale Bayer 8x8 dither with CSS tint — **Shipped cover (480px grayscale + CSS tint)**27 kB

Two-tone 1-bit dither, fine Bayer 8x8 grain — **1-bit, fine grain (Bayer 8×8)**1 kB

04b · Hero cutout treatments (on accent background)

Dithered flower, alpha flattened to white — **Old pipeline (alpha flattened)**3 kB

Dithered flower with transparency preserved — **Alpha-preserving dither**3 kB

1-bit flower: white pixels and transparency only — **1-bit white/transparent**1 kB

Shipped: clean two-colour pixel graphic, white on transparent — **Shipped: 2-colour pix (auto-detected)**3 kB

04c · Two-colour pix graphics (auto-detected sources)

Sources that are already essentially two colours skip dithering and are snapped to exactly two colours — same look, tiny file, crisp pixels. Colour pairs are remappable per image (white/transparent, kept as-is, or any pair).

ASCII penguins, remapped to white on transparent, on accent background — **linux.png → white/transparent (hero)**6 kB

05 · 88×31 buttons (steal these)

Classic web-button size, dithered. Shown at 1× and 2×.