A moving gradient printed as a two-ink halftone: each ink has its own screen angle and a slight misregistration, and the dots swell and shrink as the tones drift.
Riso Fair 2026
npx shadcn@latest add https://hyperblur.dev/r/bg-halftone.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-halftone.tsx.
import { BgHalftone } from "@/components/hyperblur/bg-halftone"
<div className="relative h-96"><BgHalftone><h1>Printed matter</h1></BgHalftone></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#ededed" | First ink color. |
| accent | string | "#2f7bff" | Second ink color. |
| background | string | "#08080a" | Paper color. |
| spacing | number | 9 | Distance between dots in pixels, from 5 to 40. |
| angle | number | 18 | Screen angle of the first ink in degrees. The second ink is turned 45 degrees from it. |
| misregister | number | 1.5 | Offset of the second ink in pixels. |
| speed | number | 1 | Speed of the tone drift. |
| children | ReactNode | Content rendered above the background. | |
| className | string | "" | Extra classes for the root element. |