Hero190: Terminal Split Hero

A split hero that answers its own headline: text on the left, and on the right an ink terminal that types the command, prints its output line by line and ends on a blinking cursor.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero190?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero190?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero190.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports hero190Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero190, hero190Demo } from "@/components/beste/block/hero190";

export default function Page() {
  return <Hero190 {...hero190Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hero190 } from "@/components/beste/block/hero190";

export default function Page() {
  return (
    <Hero190
      eyebrow="Built for your agent"
      heading="Stop describing pages. Ask for them."
      description="One command connects your coding agent to a library of finished sections."
      buttons={[{ label: "See what it builds", href: "/blocks" }]}
      terminal={{
        title: "terminal",
        command: "npx your-cli@latest",
        output: ["Connected to Claude Code", "1,500 sections available"],
        copyLabel: "Copy command",
        copiedLabel: "Copied",
      }}
    />
  );
}

Props

type Terminal = {
  title: string;
  command: string;
  output: string[];
  copyLabel: string;
  copiedLabel: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• Output lines appear on a fixed cadence rather than a real typing simulation: the command lands first, then each line 0.55 seconds after the one above it, so the rhythm holds however many lines you pass.
• The blinking cursor is an infinite opacity loop that stops entirely under reduced motion, since a caret that never settles is the kind of movement the setting exists to remove.
• The card drifts from 4 percent to minus 6 percent across the whole scroll, a slower travel than a background photograph because the card is foreground and should not appear to slide.
• The panel keeps a min-h so the section does not grow taller as the lines arrive, which would otherwise push the page down while someone is reading it.
• Copying happens from the title bar rather than the command line, leaving the printed command as text you can select by hand.
• The three dots in the title bar are decorative and marked aria-hidden, so a screen reader gets the terminal title and nothing else.
• The whole terminal prop is optional, which collapses the block to a single-column hero.