Neo-Brutal SaaS Template
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.
DOM + CSS0 deps1 file · 67 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useId, useRef, useState } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* NeoBrutalSaasTemplate — a complete neo-brutalist landing page for a
* software product, built from the kit's own devices.
*
* - A header with a phone sheet that cuts in and out in one frame.
* - A hero with a slab headline and a pile of product cards you can grab
* and throw: a thrown card flies off and cuts to the bottom of the pile.
* - A "works with" strip; features as an exposed table whose cells are
* stamped on as they scroll in; how it works, with one oversized figure.
* - A changelog kept as a ledger, each version punched as Hollerith holes.
* - Quotes from customers, the middle one raised on a deeper shadow.
* - Pricing as stickers, with a monthly or yearly switch.
* - Questions as plain disclosures; a closing band; a footer under a strip
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this page template
A whole landing page for a software product, assembled from the kit rather than dressed in it. The header has a phone sheet that cuts in and out in one frame. The hero pairs a slab headline, with one phrase stamped into a tilted accent box, with a pile of product cards you can grab and throw; a thrown card flies off and cuts to the bottom of the pile. A strip lists what it works with. The features are an exposed table with spreadsheet coordinates whose cells are stamped on as they scroll in. How it works is a numbered ledger beside the page's one oversized moment: a single figure set huge on a tilted accent panel. Three customer quotes follow, the middle one raised on a deeper shadow. The changelog is kept as a ledger, and every version is punched as a small card of Hollerith holes. Pricing is three plans with their prices stuck on as labels, a monthly or yearly switch, and the featured plan raised on a deeper shadow. Questions are plain disclosures, a closing band asks for the sign-up, and the footer sits under a strip of hazard tape crawling on one slow loop. Every figure, price, date and name lives in one typed content object, SAAS_DEMO, marked as placeholder, so nothing invented ships by accident. It scrolls the page by default, or itself inside a fixed-height frame. Before launch, wire the footer and legal links (every demo href is a bare #) and replace the quotes, figures and changelog with your own.
Curator’s note
Part of the Brutalism kit, drop 3, phase 12: the site the kit's assets are cut from. Pro: a full page composing the kit's devices (the throwable pile, the stamped table, sticker pricing, the tape) around one typed, placeholder-marked content object.
