Risograph studio and zine press
Two-color riso runs from 50 to 5,000 copies, bound by hand in our Fairlie Street shop. Bring a file on Monday, leave with a stack on Friday.
An editorial print-shop hero with a big condensed headline, a short intro and two square Turn Arrow buttons beside a portrait plate built on the halftone background component: WebGL prints the photo live as a rotated halftone screen, with dot size taken from the photo's luminance and a slow wave traveling through the dots, and the cursor presses a shaded 3D swell into the print that magnifies the dots and sends ripples through them (it drifts and ripples on its own for touch). Every print setting passes through the halftone prop; ink and paper follow the theme tokens, it pauses offscreen, holds a still print for reduced motion and falls back to a grayscale image without WebGL.
An editorial hero with a condensed black headline, an intro and square Turn Arrow buttons beside a 4:5 portrait plate that Halftone prints live in WebGL as a rotated dot screen, with a slow wave through the dots and a 3D swell that follows the cursor.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
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/hero202?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero202?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero202.tsx plus the halftone background and the button24 buttons it uses.
The installed file exports hero202Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero202, hero202Demo } from "@/components/beste/block/hero202";
export default function Page() {
return <Hero202 {...hero202Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero202 } from "@/components/beste/block/hero202";
export default function Page() {
return (
<Hero202
eyebrow="Risograph studio and zine press"
heading="Printed loud, one dot at a time."
description="Two-color riso runs from 50 to 5,000 copies, bound by hand."
buttons={[
{ label: "Get a print quote", href: "/quote" },
{ label: "Browse the zine shelf", href: "https://beste.co" },
]}
image={{
src: "https://images.unsplash.com/photo-1621983266286-09645be8fd01?w=2000&q=80",
alt: "A woman with short hair looking back over her shoulder against a clear sky",
}}
halftone={{ dotSize: 8, angle: 45, wave: 0.5, bulge: 0.6, ripples: 0.6 }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small line above the headline |
heading | string | – | Condensed headline, rendered as the page h1 |
description | string | – | Intro paragraph beside the buttons |
buttons | ActionButton[] | [] | Square Turn Arrow buttons (Button24); the first is dark, the rest light with a 2px border |
image | { src: string; alt: string } | – | Photo printed as halftone; the plate is skipped without it |
halftone | Omit<HalftoneProps, "src" | "alt" | "className" | "children"> | – | Forwards Halftone props: inkColor, paperColor, dotSize, angle, wave, speed, contrast, bulge, bulgeSize, ripples, interactive, paused |
className | string | – | Extra classes for the outer <section> |
type ActionButton = {
label: string;
href: string;
};lg; below that the plate stacks under the text. From md the intro and buttons sit side by side at the bottom of the text column.clipPath over 1.1s, and the text rises in on mount at 0, 0.15s and 0.35s.cursor-crosshair.