Yielding Hairline Field
A background that is the lattice itself: twelve-column hairlines with crosses where they meet, bending one gutter around every module the rule breaks and leaning away from the pointer, drawn on a canvas that sleeps when still.
Canvas 2D0 deps1 file · 20 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode, RefObject } from "react";
/**
* YieldingHairlineField — a background that is the lattice itself, and gives way to what breaks it.
*
* Hairlines through the gutter centres of a twelve-column grid, square rows
* and small crosses, drawn on a canvas. Mark your modules with bgModule(i,
* count) and the rule is computed for you: the lines each breaking module
* crosses bend by one gutter, and the pointer leans lines away. Bends relax
* in about 360ms; the canvas sleeps when still and wakes only when a module
* changes. An inspector numbers the columns and reads out every break.
*
* Part of the Broken Grid kit: a Klein-blue field #2416f0, paper plates
* #f1f0e8, ink #0a0a1f, and acid #e2ff3a only where a rule fires. One rule,
* "The Third": every third module in a run overshoots its leading edge by two
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
A background that is the kit's grid, drawn, and that gives way to the kit's rule. Hairlines run through the gutter centres of a twelve-column lattice (four on a phone), rows are square with the columns, and small crosses mark where they meet. Put your modules on it and mark each with bgModule(i, count), which computes the rule for you: wherever a breaking module crosses a line, the line bends one gutter the way it overshoots over the module's height and eases back over a pitch above and below, as if the plate had pushed it aside. The pointer leans nearby lines away. Bends relax in about 360ms and the canvas sleeps when nothing moves; it wakes only when a module changes, so animated content elsewhere costs nothing. Rows can start at the margin or line up with your modules. Switch on the inspector and it numbers the columns, outlines every module and reads each break out. Field blue or paper; or ticks only, where the lattice should just be implied.
Curator’s note
The Broken Grid kit's signature surface (slot 2), cut from broken-grid-site, where it runs as column ticks behind the work. Pro: a canvas renderer that measures the modules on it each frame they move and bends its hairlines around the ones the rule breaks.
