Broken Grid Site
The 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.
Canvas 2D0 deps1 file · 125 KB TSXreduced-motion aware
Props
This entry takes no configurable props.
"use client";
import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, FormEvent, KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* BrokenGridSite — the site for Overshoot, a fictional brand and digital
* studio, set in the Broken Grid register: a visible grid that holds, and one
* rule that breaks it, the same way, everywhere.
*
* The rule is "The Third". In every run of modules (cards, plans, nav items,
* footer columns, form rows), module 3, 6, 9 and so on leaves the lattice at
* its leading edge by two gutters, overlapping its neighbour by exactly one,
* one layer above it, and wears the acid bracket. The ends of a run never
* break. The break belongs to the position, not the module: reorder the run
* and the break passes to whichever module is now third.
*
* - A numbered nav whose third item hangs below the bar.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this page template
The whole kit as one site for Overshoot, a fictional brand and digital studio in Antwerp, built on one rule: every third module breaks the grid by exactly one gutter of overlap, and the break belongs to the position. A numbered nav whose third item hangs below the bar follows the section crossing the middle of the view; the hero is set on the drawn lattice with a plate you can move by the rule and a grid inspector; the rule itself is a headline that inverts under the plates; the selected work reflows by filter and hands the break on, over the lattice's ticks, and clients do the same through the flip primitive; four practices re-lay across three layouts at scroll checkpoints; engagements re-order with a toggle; the contact form's labels hang off the grid; and the footer's name runs off the edge. Field and paper sections alternate. Every word, figure and link comes from one typed content prop, placeholders by default.
Curator’s note
The Broken Grid kit site (slot 12): every asset in the kit composed around one typed content object, OVERSHOOT_DEMO, for a fictional brand and digital studio. The assets above are cut from this file, byte for byte.
