Heat Shade

WebGPU heat field or climbing licks. Logo cyan on a navy ember.

9.1 KB
•
Updated on September 16, 2026
Active on Canvas Stage

Installation

Bash
pnpm dlx shadcn@latest add @spaceui/components-shader-heat-shade

Depends on vgpu. WebGPU required.

Files

FileRole
heat-shade/index.tsxvgpu surface, clock, low-power
heat-shade/heat-shade.wgsl.tsField boundary
heat-shade/heat-licks.wgsl.tsClimbing tongues

Usage

Code
import { HeatShade } from '@/components/shader/heat-shade'

export default function SpaceUI() {
  return <HeatShade className="h-96 w-full" variant="licks" from="bottom" base="#2a7bba" hot="#43c8ff" speed={1} />
}

Variants

Field

Drifting boundary. Same colors, different silhouette.

Active on Canvas Stage

API Reference

HeatShade

PropTypeDefaultDescription
variant
field|licks
licksSilhouette
from
top|bottom
bottomOrigin edge
base
string
#2a7bbaNavy (logo)
hot
string
#43c8ffCyan rim (logo)
speed
number
1Drift speed
className
string
—Canvas class

Keep in mind

  • MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
  • Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
  • Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.

Related Components

CloudShader

Interactive volumetric cloud material rendered as a full-bleed shader surface.

View
Fluid CrossfadeShader

A dual-pass WebGL shader fluid simulation with chromatic wave refraction and Bayer 4x4 matrix ordered dither crossfading.

View
Fluid Distortion ImageShader

An interactive WebGL shader image component with cover UV mapping and dynamic cursor fluid-distortion ripples using data textures.

View
CloudSilk Gradient
pnpm dlx shadcn@latest add @spaceui/components-spaceui-ui
pnpm dlx shadcn@latest add @spaceui/components-shader-heat-shade