Browse components
Halftone Reveal
Renders an image as breathing halftone dots that swell and melt into the full photo around the cursor.
Hover the image to develop it
Installation
npx shadcn@latest add @glint-ui/halftone-revealFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/halftone-reveal.json
Usage
import { HalftoneReveal } from "@/components/ui/halftone-reveal";
<HalftoneReveal src="/photo.jpg" alt="Harbor at dusk" className="h-96 w-full rounded-3xl" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | "https://picsum.photos/seed/glint-2/1400/900" | Image URL (CORS-enabled). |
| alt | string | "Halftone photo" | Accessible description of the image. |
| cellSize | number | 11 | Halftone cell size in px. |
| radius | number | 170 | Reveal radius around the cursor in px. |
| colored | boolean | true | Dots take the image colors. |
| dotColor | string | "#c6ff3d" | Dot color when colored is off. |
| className | string | — | Extra classes for the root element. |