Thermal Flow

Customize
Theme
Bands1.0
Scale1.0
Warp1.0
Softness0.005
Grain0.35
Speed1.0
Resolution0.75

Installation

pnpm dlx shadcn@latest add @clover-ui/thermal-flow

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

PropType

Your own palette of 2 to 8 colors. Overrides theme.

How many times the palette repeats.

Default1

Higher means bigger shapes.

Default1

How much the flow swirls.

Default1

Blur on the sharp edges.

Default0.005
Default0.35
Defaulttrue
Default1

Render scale, from 0.25 to 1.

Default0.75

Corner radius, any CSS value.

Shown before the first frame. Defaults to the first palette color.