Hero218: CRT Broadcast Hero

A broadcast hero centered on a CrtScreen tube set whose picture is a live WebGL CRT shader with curvature, scanlines, a rolling hum bar and static, tuning from the headline card to more channels with a glitch every few seconds or on click, with an intro, a primary Arrow Pill and an underline link below.

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

Base UI flavor

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

This installs the block to components/beste/block/hero218.tsx plus the crt-screen component and the button23 and button2 buttons it uses.

Quick start

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

import { Hero218, hero218Demo } from "@/components/beste/block/hero218";

export default function Page() {
  return <Hero218 {...hero218Demo} />;
}

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

import { Hero218 } from "@/components/beste/block/hero218";

export default function Page() {
  return (
    <Hero218
      eyebrow="Rabbit Ear Archive"
      heading="The late show never signed off."
      description="Four thousand films recorded off the air, streamed with the original station idents."
      buttons={[
        { label: "Start a free week", href: "https://beste.co" },
        { label: "Browse the tape vault", href: "/vault" },
      ]}
      channels={[
        { title: "Midnight double feature", caption: "Two noir pictures, back to back" },
        { title: "Cartoons before dawn", caption: "Saturday mornings, as taped in 1986" },
      ]}
      tuneLabel="Change the channel"
      screen={{ scanlines: 0.6, glitchInterval: 6.5, clickToTune: true, bezel: true }}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
};

type CrtChannel = {
  title: string;
  caption?: string;
  look?: "title" | "bars" | "slate";
};

Behavior notes

• The block builds the channel list as { title: heading, caption: eyebrow } followed by channels. A channel without a look gets "title" at index 0, then alternates "bars" (odd) and "slate" (even).
• The heading and eyebrow on the tube are painted into the canvas, so the block keeps them in the DOM as an sr-only h1 and paragraph.
• The set's width is capped at min(56rem, (100svh - 78px - 19rem) * 4/3), so the 4:3 tube and the copy below always fit one screen.
• With clickToTune the tube is a <button> named by tuneLabel; otherwise it is an aria-hidden element. A glitchInterval of 0 or less stops the timed channel switches.
• The section, intro, pill and links use the theme tokens (background, muted-foreground, primary), so they follow the site theme. The tube, its picture and the bezel keep their own fixed colors.
• The picture pauses offscreen and in hidden tabs. With reduced motion or paused it draws still frames and a click switches channels without the glitch; if WebGL fails, a static first card with CSS scanlines stands in.