Run-off Wordmark Footer
The closing anchor: the full lattice again, link columns under the rule (the third breaks onto a paper plate with the bracket), and the studio's name fitted to run two gutters past the right edge, whatever the name.
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, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, RefObject } from "react";
/**
* RunOffWordmarkFooter — the closing anchor: the lattice in full, link columns under the rule, the name running off the edge.
*
* The field carries the full lattice, leaning from the pointer and bending
* around what breaks it. The third link column breaks onto a paper plate
* with the bracket; the name is fitted to end two gutters past the right
* edge, whatever the name and font. Drawn on a canvas that sleeps when still.
*
* 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
* gutters (overlapping its neighbour by one) and wears the acid bracket; the
* ends never break. Radius 0, no shadows; reflows in 380ms, no bounce. Big
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this section
The page ends where it began: on the drawn lattice. The Klein-blue field carries the full grid again, leaning from the pointer and bending where something breaks it. A statement in caps opens it; the link columns (Studio, Work, Contact, Elsewhere) are a run, so the third breaks by the rule onto a paper plate two gutters out at its leading edge, with the bracket, and the hairlines it crosses bend to make room, while the column before it keeps a gutter clear. Long addresses wrap inside their column. Along the bottom the name is fitted, not guessed: measured once in a hidden copy and sized so it runs from the left margin to two gutters past the right edge, the rule's own overshoot, and the page crops the end of its last letter. Change the name, or let a fallback font arrive, and it refits. An optional note sits above it for a copyright line.
Curator’s note
The Broken Grid kit's footer (slot 9), cut from broken-grid-site. Pro: it runs the kit's canvas lattice (bending around the breaking column and leaning from the pointer), so it sits in the middle phase and the form in the last, as in drops 8 to 12.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Flush Wordmark Footer
sectionsA footer that ends the page in the face: a band of the glyph wave field carries a closing line, and the name stands flush across the width, rising from hairlines to full weight as the footer comes into view.
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.
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.