Skip to content

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.

ProBrutalismbrutalistplayful

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.

Preview

Features

Everything a preview needs. Nothing it doesn't.

Six parts, each doing one job. No plug-in store, no settings page longer than this section.

06 parts · 3 × 2

01 · A1

A link per push

Every commit on every branch gets its own URL, torn down when the branch merges.

Any framework

02 · B1

Comments on the page

Reviewers pin notes to the exact element. Threads sync back to the pull request.

Syncs to GitHub

03 · C1

Private by default

Keep previews behind a shared password or your own identity provider.

SAML · OIDC

04 · A2

Roll back in one key

Promote any preview to production, or put the last good build back.

Press R

05 · B2

Seeded databases

Each preview boots with a copy of staging data, personal fields scrubbed.

Postgres · MySQL

06 · C2

Checks that block

Lighthouse, visual diffs and your own tests run before a link is shared.

Custom checks

Props

Featured cell
Coordinates
Stamp again
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

NewPro

Neo-brutalist pricing where each price is a label stuck on its card at a tilt. A monthly or yearly switch changes every price in one frame; the featured plan sits higher on a deeper shadow.

pricingpricing tableplans
Featured
NewPro

A neo-brutalist first screen: a slab headline beside a pile of hard-shadow cards you can grab and throw. Thrown cards fly off and cut to the bottom; the rest step up. Nothing eases.

heroneo-brutalismbrutalist
NewPro

A complete neo-brutalist landing page for a software product: a throwable card-pile hero, stamped feature table, customer quotes, punched changelog ledger, sticker pricing, FAQ and a hazard-tape footer.

templatelanding pagesaas