Cloud

Volumetric cloud material. Color the sky, sun, and shadows, then fly the camera with mouse or touch.

10.6 KB
•
Updated on September 3, 2026
Active on Canvas Stage

Volumetric Vanta CLOUDS math in WGSL (vgpu). The canvas renders at devicePixelRatio / 3 (desktop) like the original Vanta runtime — full retina would raymarch ~115 steps per pixel and stall the page.

Installation

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

Depends on vgpu. WebGPU required.

Files

FileRole
cloud/index.tsxvgpu surface, mouse ease, low-DPR backing store
cloud/clouds.wgsl.tsRaymarched fbm clouds (map2–map5)

Usage

Code
import { Cloud } from '@/components/shader/cloud'

export default function SpaceUI() {
  return <Cloud className="h-96 w-full" sky="#68b8d7" cloudColor="#adc1de" sun="#ff9919" speed={1} />
}

API Reference

Cloud

PropTypeDefaultDescription
bg
string
#ffffffScene background
sky
string
#68b8d7Sky tint
cloudColor
string
#adc1deCloud volume
shadow
string
#183550Cloud shadow
sun
string
#ff9919Sun disc
glare
string
#ff6633Sun glare
sunlight
string
#ff9933Direct light
speed
number
1Drift speed
className
string
—Wrapper 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

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
Fluid Dither CrossfadeShader

A dual-pass WebGL shader component featuring real-time Navier-Stokes fluid pressure simulation and Bayer 4x4 matrix ordered dithering crossfade.

View
Gradient BackgroundHeat Shade
pnpm dlx shadcn@latest add @spaceui/components-spaceui-ui
pnpm dlx shadcn@latest add @spaceui/components-shader-cloud