Hero194: Turning Request Hero

A hero whose headline never finishes the same way twice: the last word cycles through the things an agent can be asked for, so the promise reads as a list rather than a claim.

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/hero194?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero194.tsx plus the button22 sliding-marker pill and the text4 turning word it uses.

Quick start

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

import { Hero194, hero194Demo } from "@/components/beste/block/hero194";

export default function Page() {
  return <Hero194 {...hero194Demo} />;
}

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

import { Hero194 } from "@/components/beste/block/hero194";

export default function Page() {
  return (
    <Hero194
      eyebrow="Your agent, better furnished"
      headingBefore="Ask your agent for a"
      headingWords={["pricing page.", "hero.", "sign in form.", "footer."]}
      description="It answers with a section that already exists, in your theme."
      command="npx your-cli@latest"
      copyLabel="Copy command"
      copiedLabel="Copied"
      buttons={[{ label: "Read the docs", href: "/docs", tone: "outline" }]}
      note="Free to start. No account needed for the first page."
    />
  );
}

Props

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

Behavior notes

• The turning word comes from Text4, which swaps it on a timer and blurs each one in and out. Include the full stop in each word so the sentence closes cleanly whichever one is showing.
• Words are set in the muted colour while the fixed part stays at full strength, so the eye reads the sentence once and then watches only the part that moves.
• The command pill is filled ink here rather than outlined, because it is competing with a headline that is already moving.
• Timing after the headline is estimated from headingBefore.split(" ").length + 1, since the turning word's length is not knowable in advance.
• The cycle stops entirely under reduced motion and the first word stays on screen, which leaves a complete, readable sentence.
• Keep the words close in length. A very long one changes the line count and makes the block below it jump as the cycle turns.
• Both the pill and the button are held at h-14 so the filled command and the outlined action line up exactly.