Shader Sky
A WebGL sky for landing heroes — clear blue with drifting clouds in light, storm gray in dark, optional window-glass film.
Not a stock photo. Use it as weather behind a hero so light and dark already feel like a forecast. Open blue in light; a gray storm ceiling in dark. Clouds drift continuously, forming and dissolving like weather. Toggle Glass for a transparent window film. Press d to switch theme. Turn on Copy to drop a headline over the sky.
Headline over the sky
Clouds follow the pointer
Window film over the sky
Installation
pnpm dlx shadcn@latest add @23rd/shader-skyOr install straight from the public GitHub source registry:
pnpm dlx shadcn@latest add radiumcoders/23rd.dev/shader-skyUsage
Pin it behind a relatively positioned section. Keep content in a later stacking context (relative z-10). Default theme="auto" follows shadcn / next-themes (class on <html>), so the site theme is the weather: light = clear, dark = rain.
"use client"
import { ShaderSky } from "@/components/ui/shader-sky"
export function Hero() {
return (
<section className="relative isolate min-h-svh overflow-hidden bg-background">
<ShaderSky />
<div className="relative z-10 mx-auto flex min-h-svh max-w-xl flex-col items-center justify-center px-6 text-center">
<p className="text-xs font-medium tracking-[0.18em] text-muted-foreground uppercase">
New
</p>
<h1 className="mt-3 text-4xl font-medium tracking-tight">
The sky is the theme
</h1>
<p className="mt-3 text-muted-foreground">
Clear in light. Rain in dark. The shader stays behind the copy.
</p>
</div>
</section>
)
}Force a forecast if the parent theme should not drive it:
<ShaderSky theme="light" />
<ShaderSky theme="dark" />See the same sky through window glass — a transparent dotted film, sky still moving underneath:
<ShaderSky glass glassSize={7} />Fewer, smaller clouds with a mix of sizes:
<ShaderSky amount={0.35} scale={0.3} variation={0.8} />Props
| Prop | Type | Default |
|---|---|---|
colors | string[] | zenith / horizon / cloud / shade |
speed | number | 0.1 |
coverage | number | 0.5 |
intensity | number | 0.9 |
amount | number | 0.5 |
scale | number | 0.4 |
variation | number | 0.7 |
interactive | boolean | false |
glass | boolean | false |
glassSize | number | 7 |
theme | "light" | "dark" | "auto" | auto |
className | string | React only |
class | string | Svelte only |