Terminal Hero
A hero that boots itself: the terminal types your install command, then the headline drops in letter by letter.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Typing has human jitter, output lines print one by one, and only when the 'install' succeeds do the headline letters fall into place with a bouncy, slightly rotated landing. Click the terminal to replay.
Installation
$ npx shadcn@latest add https://guetix.com/r/terminal-hero.json
Uses the shadcn CLI. It creates components/guetix/terminal-hero.tsx and installs nothing else.
Usage
example.tsx
import { TerminalHero } from "@/components/guetix/terminal-hero";
export default function Example() {
return <TerminalHero />;
}
Dev-tool landing pagesCLI productsOpen-source projects
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Letters get a deterministic tilt, so the drop feels hand-placed but renders the same every time.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| command | string | — | Command to type. |
| output | string[] | — | Lines printed after it. |
| headline / sub | string | — | Hero copy. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Headline keeps its full text as aria-label; reduced motion shows everything at once.