Shader Sky
A WebGL sky with drifting clouds: clear blue in light mode, stormy in dark.
Preview
Installation
pnpm dlx shadcn@latest add @23rd/shader-skyOr from the public GitHub registry:
pnpm dlx shadcn@latest add radiumcoders/23rd.dev/shader-skyUsage
Pin it behind a relatively positioned section, with content in relative z-10.
"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>
)
}Lock the weather:
<ShaderSky theme="light" />
<ShaderSky theme="dark" />Window glass, a dotted film over the sky:
<ShaderSky glass glassSize={7} />Lightning flashes inside the clouds:
<ShaderSky theme="dark" lightning />Fewer, smaller clouds:
<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 |
lightning | boolean | false |
glass | boolean | false |
glassSize | number | 7 |
theme | "light" | "dark" | "auto" | auto |
className | string | React only |
class | string | Svelte only |