Catalog

43 entries

Automaton fill
A Life-like automaton grows across the element as a pixel texture and, at the Maze rule, freezes.
Recipefeedbacklab4.9 kB
- Background
- Section intro
- Figure
Contour field
A contour map of a noise field, in the page's own ink, that reveals itself over the page and leaves.
Recipetopologylab4.4 kB
- Page load
- Hero
- Section intro
Contour mark
The contour lines of a seeded, made-up terrain, drawn once in the build as one SVG path: a map of nowhere, in the text colour, with no script on the page.
Recipegenerative marklab3.7 kB
- Section intro
- Hero
- Figure
Dither lift
A picture arrives dithered or screened and the treatment lifts off it, with no GPU.
Recipetreatmentlab10.2 kB
- Figure
- Gallery
- Listing
Draw on
The strokes of an inline SVG are drawn in once, on first view, at a plotter's even pace, and nothing is left behind.
Recipegenerative marklab1.1 kB
- Section intro
- Figure
- Hero
Feedback trails
The pointer leaves a trail that streams, spirals or drifts and fades to exactly nothing.
Recipefeedbacklab4.7 kB
- Hero
- Cursor
- Figure
Flow mark
Evenly spaced lines that follow a seeded field, made once in the build as one SVG path: a mark of its own for every project, in the text colour, with no script on the page.
Recipegenerative marklab3.4 kB
- Section intro
- Hero
- Figure
Gallery open
A thumbnail opens into the picture itself, in place, and closes back into its frame: a same-document view transition into a dialog.
Recipepage transitionlab2.2 kB
- Gallery
- Figure
Ink resolve
A heading's word, or a picture, starts as stirred ink and resolves to itself over its budget, then crossfades onto the real element; reversed, it leaves as wisps.
Recipefeedback looppassed7.1 kB
- Hero
- Section intro
- Page load
Ink sharpen
The heading starts swollen and inky, its letters fused into one rounded shape with a rough edge, and sharpens back to itself; the canvas then fades onto the live word. Reversed, ink swells over the word and fades away, leaving it.
Recipetopologypassed5.9 kB
- Hero
- Page load
Listing reflow
Rows travel to their new places when a list is sorted or filtered: a same-document view transition in which every row is named as itself.
Recipepage transitionlab1.3 kB
- Listing
- Card grid
Mask settle
A picture's frame opens and the picture settles as it crosses the viewport, scrubbed by scroll, on transforms only.
Recipescrolllab1.6 kB
- Figure
- Gallery
- Listing
Page morph
A picture and its title travel from a listing to the page they lead to and back, across two real documents; the page itself crosses by a fade, a slide, an iris or a wipe.
Recipepage transitionlab3.7 kB
- Page transition
- Listing
- Card grid
Palette resolve
A colour field anchored on the page's own tokens, in OKLCH, that plays once, ends as the ground colour exactly, and leaves.
Recipecolourlab5.0 kB
- Page load
- Hero
- Page transition
Plane arrive
A picture entering the screen is uncovered by a rough front from the edge it came in by, the picture stretched toward it and falling into place.
Recipeplanelab4.8 kB
- Gallery
- Listing
- Card grid
Plane bend
While the page moves fast the middle of each picture trails its edges inside its own box, and when the page stops it is the plain picture. Scroll is read, never written.
Recipeplanelab4.9 kB
- Gallery
- Listing
Plane press
Under the pointer a linked thumbnail swells slightly and is dragged along the pointer's motion, settles when it stops, and lets go when it leaves.
Recipeplanelab5.0 kB
- Listing
- Card grid
Plane settle
The contour map, or the page's grid, on a tilted plane that swings flat and lands on the page to the pixel.
Recipetopologylab4.5 kB
- Page load
- Hero
- Page transition
Point field
Points ride a slow curl-noise field that drifts in time and deposit into a trail that fades, for a bounded time; the pointer can stir the field.
Recipepoint systempassed5.5 kB
- Hero
- Lab page
- Figure
Point gather
Points spread over a block gather onto the real heading inside it, land on it exactly, fade and leave; reversed, they lift off it as dust. The heading is never hidden.
Recipepoint systempassed5.4 kB
- Hero
- Page load
- Section intro
Point lift
A picture arrives as a field of its own coloured dots that settle onto a grid and grow into square cells tiling it exactly; then the lid comes off onto the real img.
Recipepoint systempassed5.2 kB
- Hero
- Figure
- Page load
Reaction-diffusion
A Gray-Scott pattern grows from a seed, free or inside a word, and freezes.
Recipefeedbacklab5.7 kB
- Hero
- Section intro
- Background
Reveal
The children of an element arrive as they scroll into view, each in its own time or all as one.
Recipescroll motionlab1.3 kB
- Listing
- Card grid
- Section intro
Shader lift
A picture arrives dithered, screened or pixelated and the treatment lifts off it, pixel by pixel, on a lid over the real image.
Recipetreatmentlab5.0 kB
- Hero
- Figure
- Gallery
Shader wash
A soft, noise-edged band in one of the page's own colours crosses the page once and is gone.
Recipepage-load shaderlab3.5 kB
- Page load
- Hero
- Section intro
Terrain settle
A mesh with real relief and hidden lines, as a wire grid or as points, that flattens into an even grid filling the element.
Recipetopologylab4.7 kB
- Hero
- Page load
Word contour
Evenly spaced contour rings around the page's own heading, drawn from an exact distance field of the word and revealed outward from it; the heading is the summit of a map in the page's ink, and no line touches a glyph.
Recipetopologypassed6.5 kB
- Hero
- Page load
- Section intro
Stepped figure
A figure the page serves as a complete still, with its controls hidden; mounted, the reader steps, plays, scrubs and resets it through the frames of a trace in the figure's own markup.
Case-study devicerunning figurelab2.4 kB
- Figure
Colour field
Use when colour itself is the effect on a page that has design tokens, such as a colour wash on load or a tinted hero that resolves. Covers anchoring on the tokens, OKLab and OKLCH, gamut, settling to an exact colour, dithering, and what the field takes from text contrast.
Technique
Compatibility
Use before any recipe is written, and before one is marked passed: what every recipe owes every browser. Covers the three engines (Chrome and Edge, Safari, Firefox) and what each lacks today, the rest state, the second engine a recipe carries where one exists, feature tests in script, the needs readout, and what is run by hand before a recipe is passed.
Technique
Contour field
Use when drawing contour lines, isolines or a topographic map from a noise or height field in a fragment shader. Covers the line technique, the reveals, the tuning, and where such a map may and may not sit on a page.
Technique
Displacement field
Use when a field is seen in perspective on a page, as a drawing on a tilted plane or as a displaced mesh with real relief, and settles flat. Covers the camera, the mesh built from the vertex index, the horizon, hidden lines, and what a camera move owes the reader.
Technique
Distance field
Use when drawing anything from the distance to the page's own type or a picture's shape, in a fragment shader: contour rings around a heading, an outline that grows, ink that sharpens, a mark made from a word. Covers the mask, the transform, the texture, the line, and where such an effect may and may not sit on a page.
Technique
Feedback loop
Use when building an effect whose each frame is computed from the last one, as the Feedback TOP in TouchDesigner: trails, reaction-diffusion, cellular automata, advection, agent trails. Covers ping-pong targets in WebGL2, float formats, how such a loop ends, and which of these may sit on a content page.
Technique
Generative mark
Use when a page wants a drawing made by a program rather than by hand or by shader: an emblem per project, a divider, a figure beside a heading, a share image. Covers making it at build time and shipping an SVG, seeding from the slug, making marks differ in kind, writing the smallest path, where a mark may sit, and drawing it on once.
Technique
Gpu particles
Points as the image, on the GPU, with no library and no vertex data. When a word, a mark or a decorative picture may be made of points, which route to take, how a point is computed, what it costs, and where it must never go.
Technique
Image lid
Use when drawing a WebGL effect over an image on a page: an arrival, a treatment that lifts, a hover, a scroll response. Covers the lid, a pooled canvas laid over an img that is never touched, the bitmap rule, the handover, the rescue, the row rule, the driven form with its rest test, and where lids may and may not go.
Technique
Image treatment
Use when dithering, screening, posterising, pixelating or recolouring an image on a page, as a look or as a state it arrives through. Covers the one idea under the treatments, the three ways to deliver one and when each, the resolution rule, moire, which treatments may rest on which images, and the no-go list.
Technique
Running diagram
Use when a case study claims something happens over time and a figure should carry it out: a state machine stepped, a request crossing an architecture, a queue hitting its bound, two parties agreeing and parting. Covers the still that makes the point with nothing pressed, the reader-started player, the seven kinds of figure, the four classes of truth and their labels, frames that name parts and never positions, and the checks.
Technique
Scroll reveal
Use when content should arrive as the reader scrolls to it, such as a list, a card grid or a section intro. Covers when a reveal helps, when it harms, and the behaviours that keep one from leaving content hidden.
Technique
Scroll settle
Use when a picture or a block should move with the scroll as it crosses the viewport: a frame that opens, a picture that settles or rises, a small parallax. Covers scroll-driven animation on the compositor, the transform-only constructions, why not clip-path, the parallax price, and how it is looked at on the stage.
Technique
Shader on a page
Use when putting a WebGL shader on a page people read, such as a load effect, a hero field or a background. Covers when it starts, how it sizes and ends, and what it does when anything is missing, so that it never costs the page.
Technique
View transition
Use when a navigation, an opening or a reordering should be a movement and not a cut: a picture that travels from a listing to its page and back, a thumbnail that opens in place, rows that move when a list is sorted. Covers cross-document and same-document view transitions, naming at navigation time, the aspect rule, the language switch, one arrival per page, the head script, and how a transition is looked at.
Technique