Heatmap
A contour-driven thermal color treatment for logos, marks, and transparent shapes.
Customize
Installation
pnpm dlx shadcn@latest add @vivid-layer/heatmapUsage
Give the parent element an explicit size. image is required and accepts a
project-owned URL or an HTMLImageElement.
import { Heatmap } from "@/components/effects/heatmap"
export function HeatmapExample() {
return (
<div className="h-96 overflow-hidden rounded-xl">
<Heatmap image="/brand/your-mark.png" />
</div>
)
}The installable example uses a vivid-layer-hosted mark 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 Heatmap API. See the
Paper Heatmap reference for the full
prop table and accepted ranges.
| Prop | Type | Default | Description |
|---|---|---|---|
image | string | HTMLImageElement | required | Supplies the source shape that Paper processes into the animated heatmap. |
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. Pair a meaningful logo with accessible text elsewhere, and do not rely on color or motion alone.
playback="auto" honors reduced motion by rendering a stable frame.
Performance
Paper processes the source shape before rendering. Reuse stable image URLs, keep source assets appropriately sized, and avoid mounting many live instances at once. The default pixel budget is approximately 1080p, and automatic playback pauses offscreen work.
Loading and failure behavior
The component keeps its sized container visually empty during server rendering, mark preprocessing, and when WebGL2 is unavailable. The first visible frame is fully processed; a failed mark or shader initialization leaves the container empty.
Credits
The rendering engine is Paper Shaders, distributed under the Apache License 2.0. The example uses vivid-layer's own mark. vivid-layer supplies the adapter, playback and loading policies, documentation, and Registry packaging.