Heatmap Logo

A logo that glows like hot metal, with heat drifting slowly through the mark. Feed it any solid logo and a color ramp.

Installation

pnpm dlx shadcn@latest add @componentry/heatmap-logo

Dependencies: @paper-design/shaders-react

Usage

Use a solid, single-color logo; the shader reads its silhouette, so a transparent PNG or SVG works best. The background is transparent by default, so the glow blends into whatever sits behind it. The animation stops when reduced motion is on.

import { HeatmapLogo } from "@/components/ui/heatmap-logo"

export default function Demo() {
  return (
    <div className="flex justify-center p-6">
      <HeatmapLogo image="/logo.svg" className="w-96" />
    </div>
  )
}

API Reference

Prop	Type	Default
`image`	`string` Logo URL or data URI. Only the silhouette is used.	—
`colors`	`string[]` Heat ramp from coolest to hottest, as hex colors. Defaults to an ember ramp.	—
`background`	`string` Fill behind the logo. Defaults to transparent.	—
`glow`	`number` Strength of the halo around the logo, 0 to 1. Defaults to 0.3.	—
`className`	`string` Additional styles. Defaults to a square w-80.	—

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X