Terminal Demo Hero
A staged terminal window as the hero's centerpiece, typed command and streaming output.
DOM + CSS1 dep1 file · 3 KB TSX
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
// ---------------------------------------------------------------
}Details
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.
