How it was made

The concept

Forage Almanac is a fictional seasonal press: a riso-printed almanac of wild food and slow ferments. The brief asked one question first, before any code: what is the single, physical reference object this site should feel like? The answer was a printed almanac wheel, the old circular calendar of the year, turned by hand.

Everything else follows from that. We refused the usual food-web patterns: no recipe-card grid of glossy photos, no dark moody hero, no cream-and-serif cookbook. The identity is paper, two spot inks, and the happy accidents of a risograph.

The turning wheel

The signature moment is a circular wheel of the year with twelve months around a ring. As you scroll through the months, the wheel turns to bring the month in view under a fixed pink pointer, and the month at the centre updates in step.

It is driven by a single, small script: an IntersectionObserver marks which month beat is centred in the viewport, and a requestAnimationFrame loop eases the ring toward that month’s angle by mutating one transform on an SVG group. There are no inline handlers and no framework. Where a reader prefers reduced motion, the wheel simply stands still on the current month and every spread is shown in full.

The riso treatment

The whole page is unified as one print. A fine grain overlay (an SVG turbulence filter) sits above everything at low opacity in multiply blend, so illustrations, type, and flat colour all share the same paper texture. Coloured layers overprint with multiply, and each botanical plate carries two offset ink shadows, one moss and one spore-pink, that start out of register and snap to zero as the plate scrolls into view, the way a riso machine lands its colours a hair apart.

The palette is deliberately narrow: oat paper, mushroom-ink, moss green, a riso-blue for depth, and one fluoro spore-pink spent only on accents and illustration, never on body text.

The illustrations

The botanical plates (elderflower, sloe, and woodland mushrooms) were generated with an AI image model (Recraft V3, digital-illustration style) as a consistent riso-inflected family: two spot inks on oat paper, halftone grain, and a screenprint texture with gentle misregistration. They were then recompressed to lossy WebP at roughly 900px wide so the whole page stays well within a mobile payload budget.

Illustraties met AI gegenereerd (riso-stijl).

Accessibility

One h1, logical heading order, and a skip link. Colour pairings are checked for WCAG AA; the light spore-pink is treated strictly as decoration and never as text. The wheel carries a descriptive label, every plate has real alt text, form fields are labelled, and focus states are visible throughout. Motion is a designed second experience: with reduced motion the wheel is static, plates are fully visible, and no parallax runs.

The stack

Built with Astro and Tailwind, self-hosted Fraunces and Hanken Grotesk variable fonts, and a strict Content-Security-Policy with no inline styles, no inline handlers, and no external hosts. Illustrations are served from the same origin. It builds to static files and deploys to Cloudflare.