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 motioncraft 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.