Slab Stack Hero
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.
DOM + CSS0 deps1 file · 25 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState } from "react";
import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactNode } from "react";
/**
* SlabStackHero — a neo-brutalist first screen: a slab headline on the left,
* and on the right a pile of hard-shadow cards you can pick up and throw.
*
* The pile is physical, and nothing in it eases. Each card rests on a fixed
* slot: 14px further out than the one above it, at its own fixed tilt. Grab
* the top card and it lifts onto a bigger shadow and follows the pointer one
* to one, leaning with the drag. Throw it (far enough, or fast enough) and it
* flies off along the throw in 170ms linear, then cuts straight to the bottom
* of the pile while every other card steps up one slot in 100ms linear. A
* short drag drops it back; a tap deals the next card. The "Next card" button
* does the same for keyboards, and a polite status line names the new top card.
*
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this heroe
Neo-brutalism lives or dies on physics: a hard shadow only reads as an object if things behave like objects on it. This hero puts that on the first screen. On the left, a slab headline in a heavy grotesque with one phrase stamped into a tilted accent box, a subtitle, two press buttons and a line of proof. On the right, a pile of product cards, each resting on a fixed slot 14 pixels further out than the last at its own fixed tilt. Grab the top card and it lifts onto a bigger shadow and follows your pointer one to one, leaning with the drag. Throw it, far enough or fast enough, and it flies off along your throw, then cuts to the bottom of the pile while every other card steps up a slot. A tap deals the next card, and a Next card button does the same from the keyboard. On arrival the cards are dealt one at a time, each held up for a beat and then set down. Every move is linear, every border and line is the same 3px ink, and the shadows run on the kit's ladder: 3px for small controls, 5px for buttons, 8px for the cards. A starburst sticker and a dot grid finish it. The cards take list, metric and note layouts, with any kit fill or an inverted ink card.
Curator’s note
Part of the Brutalism kit, drop 3, phase 10: the drop's featured hero. Pro because it composes a full first screen around a stateful pile: pointer capture, throw velocity, slot choreography, keyboard parity and a narrated live region.
