› dev / covers

Cover filter sandbox

// same source photo (picsum id 180), every wrapper class. pick one, apply via the cover wrapper in PostCard / PostLayout.

› // baseline

original (no filter) Reference. The raw Picsum shot.

.cover-cli Default — grayscale 0.85 + scanlines + grain + cyan/ink overlay.

› // monochrome

.cover-cli--mono Strict black & white, no cyan. Editorial / cleaner.

.cover-cli--threshold Hard B&W, no greys. Heavy print / intercept frame feel.

› // colour-controlled

.cover-cli--duotone Duotone ink → cyan. Photo readable, all colour controlled.

.cover-cli--posterize 4-level posterise with slight saturation. Risograph / print look.

› // atmospheric

.cover-cli--mr-robot Crushed mids, teal-green tint, heavy grain. Surveillance feed.

.cover-cli--edge Sobel edge detect — black ink contour lines on paper.

› // low-fi / glitch

.cover-cli--pixelate Real 12px chunky pixels via SVG. Atari / 8-bit feel.

.cover-cli--glitch RGB chromatic aberration: red shifts right, blue shifts left.

.cover-cli--blueprint Navy → cyan duotone. Reads as a technical drawing / blueprint.

.cover-cli--invert Plain colour invert. Familiar shapes, alien palette.

› // illustration (CSS-Tricks blur+contrast+screen)

.cover-cli--painted Stippled engraving via blur(4px) + contrast(3000%) + 5px radial-gradient screened through. Ink dots on paper.

.cover-cli--painted-cyan Same trick, cyan stipple instead of ink. Branded engraving.

› // ascii (live canvas → character grid)

// same source photo, four character ramps. Renders client-side via // canvas + luminance lookup. Tries CORS, fails open with a // marker.

classic ramp 11-char brightness ramp. Sparse to dense, balanced detail. charset: `" .,:;-=+x#@"`

block chars 5 unicode blocks. Reads like a chunky 8-bit framebuffer. charset: `" ░▒▓█"`

binary Pure 0/1. Maximum signal. Looks like compressed video frame data. charset: `" 01"`

minimal dots Tiny dots, mostly negative space. Reads as a constellation map. charset: `" ·•●"`

› // illustrations (generative svg)

// alternative to photos. Each post slug seeds a deterministic SVG — // same slug always renders the same composition. Zero per-post work, // never repeats inside a feed.

.illustration--grid-dot Network grid with one cyan focal node + connecting lines. seed: observabilidade-agentes-ia-pt

.illustration--contour Stacked closed contour paths — topographic / data map. seed: design-determinista-probabilistico-pt

.illustration--radar Concentric ellipses + crosshair + cyan sweep arc. seed: capability-discovery-agentes-pt

.illustration--lines Orthogonal/diagonal line composition + one cyan accent. seed: modelos-mentais-ia-design-pt

// try with a real article cover: npm run cover -- <slug> "your unsplash query"