Stamped Feature Grid
Features in an exposed table with A1 coordinates. As each row scrolls in, its cells are stamped on left to right: a black slab wipes across in hard steps, then the cell prints.
DOM + CSS0 deps1 file · 12 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState } from "react";
import type { CSSProperties, ReactNode } from "react";
/**
* StampedFeatureGrid — a neo-brutalist feature section laid out as an
* exposed table, whose cells are stamped onto the page as they scroll in.
*
* The table is a 3px ink frame on an 8px hard shadow. Its inner rules are
* not drawn up front: each cell carries its own right and bottom rule, and
* when a row comes into view its cells are stamped left to right, 90ms
* apart. A stamp takes four hard 40ms frames with no easing: nothing, half
* a black slab, the whole slab, then the cell printed with its content and
* its rules. Pointing at a cell fills it with the accent at once, no
* transition; one featured cell holds the accent at rest. Coordinates (A1,
* B1…) sit in each cell's corner, because the structure is the decoration.
*
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
Brutalism's honesty is exposed structure, so this feature section shows its table instead of hiding it: six features in a grid of 3px rules inside a heavy frame on an 8px hard shadow, each cell labelled with its coordinate, A1 to C2, like a spreadsheet printed on a poster. The rules are not drawn up front. As each row scrolls into view its cells are stamped on, left to right, 90 milliseconds apart: a black slab wipes across the cell in four hard steps and the cell prints white with its icon, title, text, spec chip and its own rules. Nothing fades and nothing eases. Pointing at a cell fills it with the accent at once, and one featured cell holds the accent at rest. Each feature has a line icon drawn in the kit's 3px stroke. Without JavaScript, before hydration and under reduced motion every cell simply shows. It lays out in one, two or three columns by container width, and a replay option stamps rows again each time they return.
Curator’s note
Part of the Brutalism kit, drop 3, phase 11: the kit's feature section. Pro because it composes a full-width section (header, intro, a measured table of six parts) around a scroll-driven stamp sequence.
