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.
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.
New · Branch previews
Ship the rough draft today.
Every push becomes a live link your team can poke at. No config, no staging queue, no polish required.
- Free for solo builders
- No card needed
Preview #482
- Build38s
- Checks12/12
- Preview linklive
- Mergewaiting
01/04: Preview #482
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Neo-Brutal SaaS Template
templatesA 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.
Card Shuffle Deck
animationsA reorderable neo-brutalist deck where cards lift onto their shadows, travel in straight lines and land exactly. Drag, shuffle or move with the keyboard; ranks stamp as cards land.
Pushed Shadow Button
componentsA neo-brutalist button on a hard 5px shadow: hover lifts it 2px, a press lands it exactly on its shadow. 3px ink everywhere, 100ms linear, no blur.