Heatmap Logo

Heat-map style logo with glowing colors and animated contours. Uses the Heatmap shader from @paper-design/shaders-react.

Variants

Emerald

Infrared

Ultraviolet

Props

colorsArray of hex colors for the gradient (e.g., ["#10b981", "#059669"])

colorBackBackground color (hex)

speedAnimation speed (0-1, default: 0.5)

contourEdge definition strength (0-1)

innerGlowInner glow intensity (0-1)

outerGlowOuter glow intensity (0-1)

sizeSize in pixels (default: 200)

Usage

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

<HeatmapLogo
  size={180}
  colors={["#10b981", "#059669", "#047857", "#065f46"]}
  colorBack="#0a0a0a"
  speed={0.4}
  innerGlow={0.5}
  outerGlow={0.3}
  contour={0.5}
/>