CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/thermal-logo

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.

ReactWebGLImageInteractiveFont#logo#brand#thermal#heatmap#shader#webgl#interactive#premium#apple

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-thermal-logo
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

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

export default function Landing() {
  return (
    <ThermalLogo />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <ThermalLogo
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Logo Edge Glow

Upload an SVG or transparent PNG logo and light it with a neon inner glow — a bright, radial-gradient rim clipped to the silhouette that fades to a dark core, and intensifies toward your cursor as it approaches.

Magnetic Logo Field

An image-driven particle field. Drop in a logo and the particles drift around then snap into its silhouette in waves. Cursor magnetically pulls or repels the swarm. Sample by alpha, luminosity, or transparency.

Logo Sand Formation

Thousands of glowing sand grains drift on a warm desert current and re-form the supplied logo. Pointer movement scatters them in a Gaussian shockwave; springs and damping pull each grain back into the silhouette.

Floating Neon Logo Sign

The logo becomes a 3D neon tube sign floating in a dark cinematic scene. Segments flicker on during boot, then settle into a gentle pulse. Smoke drifts behind; hovering brightens the tubes.

Typographic Fluid Simulation

A bold headline acts as a mask for a real-time colorful fluid. Domain-warped FBM noise advected over time + a pointer-driven velocity grid swirl two color fields inside the type while the background stays minimal. Move the cursor to inject velocity and color into the letters.

Logo Inside a Crystal

A slowly rotating crystal prism (3D ray-marched rounded cube) with your logo suspended inside as a glowing emissive mesh. Per-channel IOR refraction on the cube faces splits white light into rainbow seams; caustic highlights pool on the virtual floor; soft bloom on the inner emission.Live customizer

Thermal Logo

Logo (SVG or PNG)Transparent SVG or PNG. The thermal effect is clipped to the silhouette pulled from this image via the Sample-by control below.Sample byWhich channel of the image becomes the silhouette mask. Alpha suits transparent SVG/PNG logos; Luminosity picks bright pixels; Inverse luminosity picks dark pixels (for dark art on a light background).Mask threshold0.4Cutoff that decides which pixels count as part of the shape. Lower captures fainter pixels; higher tightens the silhouette.Logo size0.5Fraction of the short side the logo fills.Flow speed0.45How fast the waves of heat flow through the shape. 0 freezes the field.Wave angle0°Direction the heatwaves travel across the mark.Inner glow0.3Size and intensity of the heated area inside the shape — how hot the body of the mark burns.Outer glow0.5Size of the glowing halo that radiates outside the shape into the background.Edge heat0.5Extra heat concentrated along the silhouette's contour.Grain0.12Film-grain texture applied across the whole graphic.Pointer heat0.85How much heat the cursor adds. 0 disables interaction.Pointer radius0.12Size of the hot spot under the cursor.Cool-down1.6sHow long the heat trail takes to fade after the cursor passes.ColdCoolMidWarmHotWhite-hotBackgroundTransparent backgroundInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.