Background panel of two blurred color fields over a ground with overlay grain, in nine palettes such as delft, gold, vesper and gesso. Blur, field height, grain and ground lift are adjustable.
The source comes with full access.
One payment of $149 ($49 for now) opens the source right here and lets the CLI install every paid component, with lifetime updates.
pnpm dlx shadcn add @01orbital/color-washnpx shadcn add @01orbital/color-washyarn shadcn add @01orbital/color-washbunx --bun shadcn add @01orbital/color-washPart of the 01orbital library. With a license, put ORBITAL_TOKEN in .env.local and the same command installs it (licensed install, pricing).
It lands at components/graphics/color-wash.tsx, as source you own and edit.
import { ColorWash } from "@/components/graphics/color-wash"
const COLORS = [
"delft",
"mint",
"gold",
"rose",
"sky",
"lilac",
"vesper",
"gesso",
] as const
export default function ColorWashDemo() {
return (
<div className="grid w-full place-items-center gap-5 p-6 sm:grid-cols-2 lg:grid-cols-4">
{COLORS.map((color) => (
<div
key={color}
className="relative aspect-4/3 w-full overflow-hidden rounded-lg"
>
<ColorWash color={color} className="absolute inset-0" />
</div>
))}
</div>
)
}Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: class-variance-authority, cn. The CLI installs them for you.
No other registry pieces.
Cloud Shapes
Paper-white shapes lit with a two-color crescent shadow, in fourteen geometries from circle and pill to egg, arch and shield. Pinned to a daylight look; shading deepens on dark grounds.
Contour Field
Client canvas field painted by the celestograph plate engine, blurred and traced with white contour lines from its own luminance. Seeded from a string, four palettes; fills a positioned parent and repaints on resize.