Thermal Button

NewPremium

Button visually 'heats up' the longer you hover. Color shifts from cool blue to hot red with glow and shimmer effects.

buttonsthermalheattemperatureglowinteractive

Installation

Terminalbash
npx motion-primitives-website add thermal-button

Usage

thermal-button.tsxtsx
import { ThermalButton } from "@/components/buttons/premium-buttons";

<ThermalButton>
  Hold to Heat
</ThermalButton>

Props

PropTypeDefaultDescription
children*ReactNode—Button content
classNamestring—Additional CSS classes
onClick() => void—Click handler

Related Components

Cloth Button

New

Button surface simulates fabric using verlet integration physics. Cursor pushes dents into the cloth mesh.

Shader Distortion Button

New

WebGL-powered button with GPU-computed water-warp distortion on hover. Real-time ripple displacement mapping.

Ink Bleed Button

New

Click triggers organic watercolor-like ink bleeding from the click point. Canvas-based fluid simulation with sub-drop spawning.

Portal Button

New

Click tears open a spiraling vortex/wormhole from the click point. Organic distorted rings with center glow.