Overshoot Lattice Hero
A 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.
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.
The gridholds,exceptevery third.
We build identities and sites on a strict grid, then break it by one rule, the same way, everywhere. It is the difference between a system and a style.
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* OvershootLatticeHero — a first screen on the drawn lattice, with the rule set in the headline and a plate you can move by it.
*
* The Klein-blue field carries the full lattice. The caps headline is a run
* of lines, and its third (never the first or last) starts one column to
* the left, the rule's overshoot at the scale of type. A construction plate
* follows a drag 1:1 (or the arrow keys), shows the free cell it will take
* (never over the words) and snaps there; on column 3, 6 or 9 it breaks by
* the rule and the hairlines it crosses bend. G (or Inspect) shows the grid,
* numbered, with each break read out; inspect={false} removes both. The
* lattice is drawn on a canvas and sleeps when still.
*
* Part of the Broken Grid kit: a Klein-blue field #2416f0, paper plates
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this heroe
The first screen of a studio that breaks the grid on purpose. A Klein-blue field carries the full lattice: hairlines through the gutter centres, square rows, small crosses where they meet. The caps headline is a run of lines from column 2, and the rule is computed on it like any run: the third line, never the first or the last, starts one column to the left with the acid bracket on its corner. Two construction plates sit on the lattice, one fixed and one you move. Drag it, or focus it and use the arrow keys: it follows 1:1, a dashed outline shows the free cell it will take (never over the words or the buttons), and it snaps there in 320ms. The columns are a run too, so on column 3, 6 or 9 it breaks, growing two gutters out while the hairlines it crosses bend. Press G, or Inspect, to see the grid numbered and each break read out; inspect={false} ships without both. On a phone the plates are hidden and the headline carries the rule.
Curator’s note
The Broken Grid kit's hero (slot 1, Featured), cut from broken-grid-site. Pro: a canvas lattice that measures the page's modules and bends its hairlines around the ones the rule breaks, a drag-and-snap plate bound to the same rule, and a grid inspector.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Broken Grid Site
templatesThe whole Broken Grid kit as one studio site on one rule: a drawn-lattice hero, an inverting headline, work and clients that reflow and hand the break on, practices across three layouts, engagements that re-order, and a run-off footer.
Yielding Hairline Field
backgroundsA 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.
Z-Swap Plate Card
componentsA work card on the lattice: every third in a run breaks by the rule, two gutters out with the bracket, and hovering the card it overlaps lifts that card above it, the bracket going with the lift, in 240ms.