Terminal Demo Hero
A staged terminal window as the hero's centerpiece, typed command and streaming output.
- Category
- Heroes
- Added
- 2026-09-01
- Deps
- 1
- Updated
- 2026-09-01
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.
Deploy from your terminal. Nowhere else.
Props
"use client";
// Full-size shippable hero. The registry preview above is a scaled-down
// stand-in for this component at normal type scale.
import { motion } from "framer-motion";
const DEFAULT_COMMAND = "shipctl deploy --prod";
const DEFAULT_OUTPUT = "Building..., Deployed to edge, Live in 4 regions";
function TerminalWindow({
command,
outputLines,
showCursor,
}: {
command: string;
outputLines: string[];
showCursor: boolean;
}) {
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this heroe
Where most heroes describe the product, this one performs it: the terminal window is the entire proof, and the headline shrinks to a caption above it rather than competing for the lead role. It's the right choice for CLIs, deploy tools, and anything a developer would actually type — it reads as a lie the moment you put it in front of a mobile app or a consumer product with no command-line surface. The terminal chrome is intentionally locked to a fixed dark palette (zinc-950, not the theme's inverting ink tokens) because a real terminal doesn't relabel itself for a light-mode visitor, and doing that here makes the demo read as staged rather than authentic. The output lines stagger in with increasing delay to imitate real command latency; keep that stagger under four lines, since a longer sequence starts to feel like a loading screen rather than a finished shot of the product working.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Announcement Badge Hero
heroesA large pulsing announcement pill anchors the hero above one headline.
Bento Preview Hero
heroesCopy beside an asymmetric bento grid of small feature-glimpse tiles.
Logo Proof Hero
heroesA generous wordmark wall leads the hero, with a modest headline above it.