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.
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Pointer Warp Dot Field
backgroundsA canvas dot grid that bulges and brightens away from the cursor.
Signal Field
backgroundsA machined dot grid lit by slow waves of light, with a pointer lens and click ripples.
Overshoot Lattice Hero
heroesA first screen on a drawn lattice whose caps headline breaks it by rule, and a plate you drag to any free cell: drop it on column 3, 6 or 9 and it overshoots, wears the bracket, and the hairlines bend to make room.