Thermal Flow

Installation

Installs are paused for now. You can still preview and customize every component on its page.

Usage

import { ThermalFlow } from "@/components/thermal-flow";

<div className="relative h-80 w-full overflow-hidden rounded-2xl">
  <ThermalFlow theme="thermal" />
  <div className="relative p-6 text-white">Your content</div>
</div>

It fills its parent, so give the parent relative and put your content above it.

For your own palette, pass 2 to 8 colors from dark to bright.

<ThermalFlow colors={["#05060f", "#1d4ed8", "#38bdf8", "#fde047", "#f97316"]} />

It pauses when off screen, holds still when reduced motion is on, and shows a plain gradient if WebGL is not available. Lower resolution to use less GPU.

Props