23rd

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 sit on a deck that recedes to the horizon — big and sunlit overhead, small and hazy far off — and drift toward you, catching light on the sun side with sky-blue shade on the other. Toggle Lightning for storm flashes inside the clouds, or Glass for a transparent window film. Press d to switch theme. Turn on Copy to drop a headline over the sky.

Preview

Props
Palette
0.50
0.40
0.70
0.10
0.50
0.90

Headline over the sky

Clouds follow the pointer

Storm flashes inside the clouds

Window film over the sky

7

Installation

pnpm dlx shadcn@latest add @23rd/shader-sky

Or install straight from the public GitHub source registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/shader-sky

Usage

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} />

Let the storm flash. Strikes light the clouds from inside every few seconds and stop under reduced motion:

<ShaderSky theme="dark" lightning />

Fewer, smaller clouds with a mix of sizes:

<ShaderSky amount={0.35} scale={0.3} variation={0.8} />

Props

PropTypeDefault
colorsstring[]zenith / horizon / cloud / shade
speednumber0.1
coveragenumber0.5
intensitynumber0.9
amountnumber0.5
scalenumber0.4
variationnumber0.7
interactivebooleanfalse
lightningbooleanfalse
glassbooleanfalse
glassSizenumber7
theme"light" | "dark" | "auto"auto
classNamestringReact only
classstringSvelte only