Hero200: Dithered Render Hero

A split product hero: eyebrow, headline, intro and 2 Arrow Pill buttons on the left, and a square panel on the right where the dither-form component raymarches a 3D shape in WebGL and prints it with 1-bit ordered dithering. The panel wipes open from the top while the copy rises in.

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

Base UI flavor

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

This installs the block to components/beste/block/hero200.tsx plus the dither-form background and the button23 button it uses.

Quick start

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

import { Hero200, hero200Demo } from "@/components/beste/block/hero200";

export default function Page() {
  return <Hero200 {...hero200Demo} />;
}

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

import { Hero200 } from "@/components/beste/block/hero200";

export default function Page() {
  return (
    <Hero200
      eyebrow="Render runtime 2.0"
      heading="Real-time 3D in one bit of color."
      description="A tiny renderer for product pages. Ship an interactive object in under 40 kB, with no model files and no loading spinner."
      buttons={[
        { label: "Start rendering", href: "/start" },
        { label: "Read the docs", href: "/docs" },
      ]}
      form={{
        inkColor: "var(--foreground)",
        paperColor: "var(--background)",
        pixelSize: 3,
        shape: "torus",
        pattern: "bayer8",
      }}
    />
  );
}

Props

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

Behavior notes

• The panel is aspect-square and reveals with a clipPath wipe from inset(0 0 100% 0) over 1.2s; with reduced motion it starts fully open.
• DitherForm renders in WebGL, tilts the shape toward the cursor, pauses through an IntersectionObserver and on hidden tabs, and holds a still frame under prefers-reduced-motion.
• If the WebGL program fails, the component falls back to a masked CSS dot pattern in inkColor.
• Passing var(--foreground) and var(--background) as ink and paper, as the demo does, makes the render follow the theme in light and dark mode.
• The layout stacks on small screens and splits into 2 equal 6-column halves from lg.
• Every prop is optional; missing copy simply drops out and the panel keeps its square.