A developer hero led by a large terminal that types a command and plays a deploy session line by line, with a filling progress bar, check marks and a live URL, then loops. A copyable command sits above it.
quill deploy, now with preview checks
Quill installs, builds, tests and ships your app to 31 regions, and tells you exactly what happened along the way.
npx shadcn@latest add https://hyperblur.dev/r/hero-terminal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-terminal.tsx.
import { HeroTerminal } from "@/components/hyperblur/hero-terminal"
<HeroTerminal command="npm create acme@latest" title="Scaffold, build and ship from your shell" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "quill deploy, now with preview checks" | Mono path-style line above the headline. Hidden when empty. |
| title | string | "From git push to global in one command" | Headline. |
| subtitle | string | "Quill installs, builds, tests..." | Supporting paragraph. Hidden when empty. |
| command | string | "npx quill@latest deploy" | Command in the copy field. Empty hides the field. |
| script | { kind: "command" | "info" | "progress" | "success" | "link"; text: string; meta?: string; wait?: number }[] | 7 deploy lines | Lines played in the terminal. Commands are typed, the rest appear after wait milliseconds. |
| windowTitle | string | "zsh · acme-store" | Tab label in the window chrome. |
| primaryCta | { label: string; href: string } | null | { label: "Read the quickstart", href: "#" } | Accent button next to the command. null hides it. |
| secondaryCta | { label: string; href: string } | null | null | Optional outlined button. |
| accent | string | "#3ddc97" | Prompt, caret, check marks, progress and button color. |
| loop | boolean | true | Replays the session after a pause. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. |