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.
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 · Seeded databases
Ship the rough draft today.
Hod turns every push into 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
Works with
- Next.js
- Astro
- Remix
- SvelteKit
- Nuxt
- Vite
- Rails
- Django
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
A link per push
Every commit on every branch gets its own URL, torn down when the branch merges.
Any framework
Comments on the page
Reviewers pin notes to the exact element. Threads sync back to the pull request.
Syncs to GitHub
Private by default
Keep previews behind a shared password or your own identity provider.
SAML · OIDC
Roll back in one key
Promote any preview to production, or put the last good build back.
Press R
Seeded databases
Each preview boots with a copy of staging data, personal fields scrubbed.
Postgres · MySQL
Checks that block
Lighthouse, visual diffs and your own tests run before a link is shared.
Custom checks
How it works
Three steps. The third is merging.
- 01
Connect the repo
Install the app on the organisation and pick the repositories. Hod reads your framework and build command.
$ npx hod init - 02
Push a branch
Every push builds in its own box and posts a link on the pull request, with checks beside it.
- 03
Merge when it's right
Reviewers comment on the page itself. When the checks are green and the thread is quiet, merge.
Measured across every preview built in the last 30 days.
From teams on Hod
Reviews happen where the work is.
Design review used to be a screenshot in a thread. Now it is a link and a pinned comment, and the argument is over in ten minutes.
Maya Okonjo · Design lead, Tallow
We cut staging entirely. Every branch is its own staging, and it goes away on merge.
Jon Brevik · CTO, Parcelry
The seeded database is the feature. Reviewers finally see the page with real-shaped data in it.
Anika Rao · Engineering manager, Ledgerbird
Changelog
What shipped, every Thursday.
- v3.2.025 SepComment threads sync to GitHub, both waysNew
- v3.1.418 SepStale preview links fixed after a force-pushFix
- v3.1.011 SepSeeded databases for Postgres and MySQLNew
- v3.0.24 SepCold starts cut by two-thirdsPerf
Pricing
Pay for seats. Previews are on us.
Solo
One builder, unlimited side projects.
$0free, for good
- 1 seat
- Previews for every push
- 7-day preview history
- Community support
- Most popular
Team
For teams who review in the browser.
$24per seat / month
- Up to 50 seats
- Comments on the page
- Password-protected previews
- 90-day history
- Email support
Company
SSO, audit logs and a person to call.
Customtalk to us
- Unlimited seats
- SAML and SCIM
- Audit log export
- Seeded databases
- Named support engineer
Prices in USD, before tax. Change plans or cancel from the dashboard at any time.
Questions
Asked before you asked.
Does it work with my framework?
If it builds with a command and serves from a folder or a port, yes. The common frameworks are detected without any config.
Where do previews run?
In isolated containers in the region you pick. Each one is torn down when its branch is merged or closed.
Can clients see previews without an account?
Yes. Share a link with a password, or invite them as guests who can comment but not deploy.
What happens to my data if I leave?
Export comments and history as JSON from the dashboard, then delete the organisation. Nothing is kept after 30 days.
Push something ugly. See it live.
Free for one builder, forever. Your team can join when the draft is worth arguing about.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Dark Precision Site
templatesA complete launch site for a developer platform in the Linear/Vercel register: a nav that morphs into a command palette, a hero on a routing lattice of light, a trace console, beams that deliver, a circuit of features, pricing lit by a usage slider, a WebGL light-cone call to action and a horizon-lit footer.
Slab Stack Hero
heroesA 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.
Sticker Pricing Section
sectionsNeo-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.