imdevman.com

Concept

Words come first. A headline draws attention; when that attention settles, the oil-painted dots part to reveal images and a story. The pointillist painting is a veil that holds stories you have not chosen yet.

Revealing through attention

Passing quickly keeps the stories veiled. Rest the pointer or keyboard focus on a headline, or stop scrolling with a headline in the reading area, and that story unfolds. Pressing the headline opens it immediately. The reveal spreads from the words, and opened stories stay open in the same tab across resizing, language changes and visits to articles. Side-by-side headlines require a pointer, focus or press to choose a story. There is no eye tracking; opened topics are remembered only in the tab and never sent anywhere.

How it is painted

• The page — backgrounds, borders, images and text — is redrawn onto one canvas, the page raster.
• A WebGL2 shader paints that raster as oval dabs on three jittered grids, each rotated and offset differently.
• Each dab takes the average colour underneath it (from mipmaps) with its saturation and value nudged. Some become flecks of ultramarine and violet in the shadows, rose and orange in the half-tones, and sky, lavender or peach in the light.
• Every dab gets impasto shading lit from the top left and a few bristle streaks, over a linen canvas weave.
• One WebGL canvas, covering the screen and a margin above and below, is repainted during scrolling and reveals. It scrolls with the document, so the painting never slips against the page even when a frame comes late. Revealed areas are kept in a mask.

Motion that serves the words

• The hero’s paint drifts gently. Once revealed, the galaxy rotates while nebulae and stars move at different depths, responding to the pointer with parallax, starlight and an occasional meteor. The rest of the veil holds still while you read.
• A button pauses or resumes the sky. Reduced motion keeps it still.
• Paint parts from the chosen headline to reveal only its story.
• Headlines and buttons stay in place for reading and interaction. Controls respond as soon as the next page loads.

Fingers and keyboards

On a phone, stop scrolling at a headline or press it to unfold its story. With a keyboard, rest focus on the title or press Enter or Space to open it immediately. Concealed links cannot be accidentally activated or focused; the headline button reports its expanded state to screen readers. “Reveal everything” offers a direct way to read the entire page.

Reduced motion keeps the same choice of story but skips the reveal animation. Without JavaScript or WebGL, all content is visible. Opening an article already expresses interest, so its images and paragraphs are clear from the start.

Performance

The site is static files built with Astro and served for free from Cloudflare’s edge. The page raster updates when layout, fonts or images change, without blocking headline controls on network loading. The sky draws at up to 30 frames per second while visible, reusing its gas and galaxy sprites. Sky rendering stops offscreen and in hidden tabs; the rest of the veil draws only during scrolling and reveals. Slow paint frames step down the resolution.