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
Paper ShaderShader

Paper Shaders WebGL2 canvas driven by a fragment shader and live uniforms.

View
Silk FlareShader

WebGPU single-pass composite shader fusing silky mesh warp gradients and rising thermodynamic heat flares.

View
Cloud
Silk Gradient
pnpm dlx shadcn@latest add @spaceui/components-spaceui-ui