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.

Landing hero
Props
Palette
Amount
0.50
Size
0.40
Mix
0.70
Speed
0.10
Coverage
0.50
Intensity
0.90

Headline over the sky

Clouds follow the pointer

Window film over the sky

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

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
glassbooleanfalse
glassSizenumber7
theme"light" | "dark" | "auto"auto
classNamestringReact only
classstringSvelte only