21 · Inkwell & Drum: a risograph studio whose page is a live halftone print

A made-up two-person riso press in an old drum factory in Harrow Bend (a fictional business, labelled as such in the footer). The hero is a full-screen print made live in the browser from three ink layers, each with its own dot screen. What makes people stop: move the pointer and the three inks slip apart like badly seated drums, then spring back. Behind that sits a poster maker that exports a real A3 PNG.

Inspiration

The main borrowed idea is Paper Shaders, used in a way its gallery does not show. Four shaders do the work: Halftone Dots (hero, poster maker, the "how it works" layers), Halftone CMYK (the six past-job cards), Image Dithering (the dithered factory) and Paper Texture (the grain). The page also borrows from riso printing itself: one drum per ink, a screen angle per drum, a stencil master, fixed tin-colours, misregistration as a feature. GSAP supplies the motion: elastic slips, roller passes, SplitText on the hero title, ScrambleText on the job ticket number.

What was added on top: a poster generator that draws its own art (four layouts) into one canvas per ink, then feeds those canvases to the shaders. Text and registration marks print solid while pictures get dots, and where ink is heavy under a word the word becomes bare paper. A 14-ink shelf recolours the whole page, and the export matches the preview.

Visual direction

Palette: paper #f4f0e8 and #ebe5d8, black #1b1b1b, Fluorescent Pink #ff48b0, Blue #0078bf, Yellow #ffe800. The three inks are CSS variables, so loading a drum changes the nav, buttons, headline shadows and ticket at once.
Fonts: Bricolage Grotesque (condensed, 75% width, uppercase, 800 weight) for headings; Space Grotesk for body.
Motion: elastic slip on the plates (elastic.out(1,0.38)), a roller bar that sweeps down the sheet one ink at a time, and the pink offset shadow on each h2 snapping from a wide offset into place on scroll. Hard offset shadows on buttons that press in on hover.
Layout: full-screen print with a rotated paper card on top; a yellow marquee band; a pinned sideways strip of six jobs; a pinned scroll scene (master, then three passes, then a final wobble); the ink shelf; a sticky-preview poster maker; a price calculator with a perforated job ticket; and a dithered factory picture with an FAQ.
Signature moments: the pointer slip, "Pull a fresh print" (old sheet flies off, new art printed by a roller in three passes), the pass toggles in the pinned scene, the shelf reprinting the page, and the downloaded 1754 x 2480 file.

Theme, kit and licenses

Theme: Showpiece (print), Loud, on a light paper ground. The halftone is the product, so the effect had to be the main show. Two changes to the recipe: the ground is light, not dark, and the page carries a usable tool (poster maker, price calculator), because a studio site needs to take orders. The nav is solid on purpose, following the toolkit rule against blur bars over moving content.

Kit parts used: paper.js (mounting, preset and uniform mapping), the shader data for halftone-dots, halftone-cmyk, image-dithering and paper-texture, and fps-chip.js (shown with ?fps). Nothing outside TOOLKIT.md. GSAP plugins are the free ones: ScrollTrigger, SplitText, ScrambleText.

Licenses:

Source	License
Paper Shaders 0.0.81	Apache-2.0
GSAP 3.15 and its plugins	Standard "no charge" license
Bricolage Grotesque, Space Grotesk	SIL Open Font License
Art, poster layouts, factory picture	Drawn in code, no outside art

The ink colours are screen approximations of real riso inks, and the page says so.

References

Paper Shaders, https://shaders.paper.design: halftone dots, CMYK halftone, image dithering and paper texture shaders.
GSAP, https://gsap.com: ScrollTrigger pinning and scrub, SplitText, ScrambleText, quickTo for the pointer slip.
Risograph printing as a craft (no site, general knowledge): one drum per colour, fixed ink tins, screen angles, misregistration.

Why these choices

A riso studio sells texture, so the site proves the texture instead of describing it. The decision with the most weight was drawing the art as separate black-on-transparent plates per ink. That is how a real riso file works, and it lets the same plates drive the live hero, the baked job cards, the exported file and the stencil explainer.

Trade-offs in the code: pictures get dots but type prints solid, so the headline stays readable. Only the hero and the maker keep live WebGL mounts, and only while on screen (IntersectionObserver with a 300px margin); everything else is baked once into a PNG through a pair of reused hidden mounts that are released after five idle seconds. If WebGL is missing, plates fall back to flat CSS masks in each ink. Reduced motion turns off the slip, the pinned scenes and the entrance animations. On narrow screens the job strip becomes a native swipe row and the pinned scene shows one step at a time. The fixed grain overlay is the main risk: it is a blended full-screen layer, which can cost phone scrolling.

Who this kind of site is for

It wins for print shops, screen printers, zine fairs, record labels and any studio whose product is texture, where seeing the material is the sale. A tool inside the showpiece (a maker, a quote) is what keeps it from being only a pretty page.

It is the wrong call for a business whose customers want a phone number and opening hours in two seconds, or where the first visit is on a weak phone. The price calculator and poster export show it can take orders as well as impress.

How to make it

Stack and key techniques

One HTML file, about 1,190 lines in source; GSAP 3.15 (ScrollTrigger, SplitText, ScrambleText); Paper Shaders through the kit loader.
Seeded random generator, so the same seed gives the same poster art.
Per-ink canvases from four layout functions, a title fitter that balances lines, and knockout masks.
Pre-rotated plates plus shader rotation and scale, so dot screens turn while art stays upright.
A baker queue that renders stills from hidden shader mounts with the drawing buffer kept.
Price maths with a studio minimum, rush and split fees, and a generated job number.

The prompt

Build a single-file website, no build step, for "Inkwell & Drum Riso Press", a fictional two-person risograph studio in an old drum factory in Harrow Bend. State plainly in the footer that it is a fictional business made for a design gallery. Theme: Showpiece, Loud, on a light paper ground. The halftone is the product.

Look: paper #f4f0e8, black #1b1b1b, Fluorescent Pink #ff48b0, Blue #0078bf, Yellow #ffe800 as three CSS variables (the inks). Headings Bricolage Grotesque condensed uppercase with a pink offset text-shadow; body Space Grotesk. Solid nav, no blur.

Draw all art in code, nothing external. Make each poster as three black-on-transparent canvases, one per ink, then run each through the Paper Shaders halftone-dots shader (version 0.0.81) at screen angles -15, 15 and 45 degrees, pre-rotating the art so the picture stays upright. Type and registration marks print solid; where a drum is heavy under a word, knock the word out to bare paper. Layer the inks with multiply blending.

Sections: (1) Hero: a full-screen live print. Moving the pointer or scrolling makes the three layers slip apart in different directions and spring back with GSAP quickTo and elastic easing. A "Pull a fresh print" button flies the sheet away, draws new art, and a roller prints it one ink at a time. (2) Recent runs: six past jobs baked with the halftone-cmyk shader, in a sideways strip pinned while scrolling on desktop and a swipe row on phones; each has "Remix this one", which loads it into the poster maker. (3) How riso works: a pinned scroll scene where a master appears and three rollers print each ink, with three buttons that switch each pass on or off. (4) Ink shelf: 14 riso inks; tapping one loads it into drum 1, 2 or 3 and recolours the whole page. (5) Poster maker: headline, small print, four layouts, 2 or 3 inks, headline ink, dot size, dot shape, misregistration, grain, shuffle, and a download of an A3 PNG at 1754 x 2480 that matches the preview. (6) Price a run: copies, colours, size, paper, extras, an animated job ticket and "Copy the order". (7) Visit: the factory drawn on a canvas, dithered with the image-dithering shader in one ink, plus an FAQ.

Technical rules: render stills through reused hidden shader mounts, keep live WebGL contexts to the hero and maker only while visible, and release the rest. Fall back to flat masks without WebGL. Honour prefers-reduced-motion. No em dashes. Wait for fonts and images before mounting shaders.

Verify: screenshot every section at 1440 and 390 wide plus reduced motion, exercise every control, open the downloaded PNG and check its size, check the console for errors, check there is no horizontal overflow, fix and repeat.

Build notes

Shader stills are slow in headless Chrome (20 to 65 seconds each, export 20 to 40); the builder expects a real GPU to be quick but did not confirm it.
Contexts are kept low by reusing hidden mounts, but the hero, the maker (three each) and up to four baker mounts can briefly coexist.
The grain overlay is a fixed blended layer; its phone scroll cost is untested. The export applies the same grain image, sized to the browser window, stretched over the A3 canvas, so its pattern differs a little from the preview.
The "Soft" dot shape looks hazy, as the builder noted.
Tested only in headless Chrome, not Safari or Firefox. Real-device frame rate is still unchecked (use ?fps).

Stepping down: what you would likely lose

This is an informed estimate, not a measurement. No public benchmark compares these exact models on one-shot frontend work, and the kit-versus-blank-page comparison below comes from reading the code and extrapolating from model tiering, not from running Sonnet 5.5 on this prompt.

Feature	Sonnet 5.5 with this kit	Sonnet 5.5 from a blank page
Live hero with three shader layers	Likely does fine: the kit mounts and maps uniforms	Likely attempts it with bugs: shader throws if images are not fully loaded first, or layers show as flat colour
Dot screens at three angles, picture upright	Likely fine if told to pre-rotate; the scale maths is the likely slip	Likely simplifies it away: all layers on one angle, or the art rotates with the dots
Pointer slip with spring-back	Likely does fine (GSAP quickTo is simple)	Likely does fine, with a weaker settle and scroll link
Type solid, pictures dotted, knockouts	Moderate loss: probably prints everything as dots	Likely simplifies it away; text becomes blotchy
Pinned "how it works" scene	Likely does fine with attention to scrub and pin resizing	Likely attempts it with bugs: pin jumps on resize, phone layout breaks
Poster export that matches preview	Likely attempts it with bugs: spacing or grain differs from the preview	Likely simplifies it to a canvas screenshot, losing the dots
Shader stills for cards and dither	Likely fine through the baker	Likely attempts it with bugs: extra WebGL contexts, blank stills
Calculator and ticket	Likely does fine	Likely does fine

Overall (a judgment call): roughly 70 to 85 percent of the visual impact with the kit, and roughly 35 to 55 percent from a blank page, in one pass. The kit loader carries the hardest-to-debug shader mounting and the "wait for images" trap. A screenshot loop and splitting the build (art engine first, then export, then pages) would close much of the remaining gap.