Search

Search components and blocks

Sign in

Hero Blocks

Landing-page openers that introduce the product and drive the first click.

Hero Dither

A centered hero with an interactive dither backdrop: soft violet blobs of fine dots sit on the side edges and ripple on their own, and a spotlight glides under the pointer, drags a fading tail behind it, and fades out when it leaves. The headline, copy and buttons blur into focus with a stagger. Sample copy is for Muse, a fictional reasoning AI — swap in your own.

pnpm dlx shadcn@latest add @ditherui/hero-dither

An AI that thinks before it speaks

Muse reasons through your question out loud, so you see every step take shape — then hands you an answer you can trust.

Install

$ pnpm dlx shadcn@latest add @ditherui/hero-dither

Props

className / ...section propsReact.ComponentProps<"section">—

Suggested components