Halftone Dots
A flexible image halftone that turns tone and color into graphic dot patterns.
Customize
Installation
pnpm dlx shadcn@latest add @vivid-layer/halftone-dotsUsage
Give the parent element an explicit size. Supply a project-owned image URL or
an HTMLImageElement; the shader fills the available width and height.
import { HalftoneDots } from "@/components/effects/halftone-dots"
export function HalftoneDotsExample() {
return (
<div className="h-96 overflow-hidden rounded-xl">
<HalftoneDots image="/images/your-image.webp" />
</div>
)
}The installable example uses a vivid-layer-hosted image and needs network access after installation. The core component embeds no asset and works with a consumer-owned local image.
API reference
The wrapper adds playback and runtime safeguards while preserving the
complete Paper HalftoneDots API. See the
Paper Halftone Dots reference for
the full prop table and accepted ranges.
| Prop | Type | Default | Description |
|---|---|---|---|
image | string | HTMLImageElement | undefined | Optionally supplies the source image used by the halftone effect. |
playback | "auto" | "always" | "paused" | "auto" | Controls motion policy. Auto pauses for reduced motion and while the shader is outside the viewport. |
width / height | number | string | "100%" | Sets the canvas CSS dimensions. Size the parent element to establish the visible area. |
maxPixelCount | number | 2073600 | Caps the rendered pixel budget. Override only after measuring the target devices. |
Accessibility
The shader is decorative by default: it is hidden from assistive technology and does not receive pointer events. Do not use the processed image as the only way to communicate essential information, and verify overlaid text contrast.
playback="auto" honors reduced motion by rendering a stable frame.
Performance
The default maxPixelCount limits rendering to approximately 1080p, and
automatic playback pauses work once the component is more than 200px outside
the viewport. Use appropriately sized source images and static posters in
dense component grids.
Loading and failure behavior
The component keeps its sized container visually empty during server rendering, image loading, and when WebGL2 is unavailable. A failed image request also leaves the container empty; the unprocessed source image is never exposed.
Credits
The rendering engine is Paper Shaders, distributed under the Apache License 2.0. The example image is Scott Webb's Banff landscape, released under CC0. vivid-layer supplies the adapter, playback and loading policies, documentation, and Registry packaging.
