Hero made by @ybouane.

@crazygl/hero-thermal-logo

Your logo rendered as a live thermal-camera image — a flowing heat field clipped to the silhouette and mapped through a cold-to-white-hot gradient, with the cursor leaving a glowing heat trail that slowly cools.

Demo

Thermal Logo

Install

npm install @crazygl/hero-thermal-logo

Usage

import ThermalLogo from '@crazygl/hero-thermal-logo';

export default function Page() {
  return (
    <ThermalLogo
      logo="/brand/logo.png"
      sampleMode="alpha"
      colorHot="#ffce3a"
    />
  );
}

The silhouette is pulled from your image, so transparent SVGs, transparent PNGs, and dark-art-on-light PNGs all work — pick the right sampleMode.

Customise

• Logo — logo (SVG/PNG URL), sampleMode (alpha / luminosity / inverse-luminosity), maskThreshold, logoScale.
• Heatwaves — speed, angle (wave direction), innerGlow (body heat), outerGlow (halo size), contour (edge heat), noise (grain).
• Heat (pointer) — pointerHeat, pointerRadius, coolSeconds (trail fade time).
• Palette — six gradient stops, colorCold → colorPeak, walked by temperature.
• Backdrop & content — backgroundColor, transparentBackground, plus optional heading/custom content.

Best for

• Product, AI, and hardware launch pages that want an "it's alive / running hot" reveal.
• Music, gaming, and creative-studio sites after a moody, infrared aesthetic.
• Dark, cinematic splash and coming-soon pages built around a single brand mark.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.