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.
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/contour-fieldnpx shadcn add @01orbital/contour-fieldyarn shadcn add @01orbital/contour-fieldbunx --bun shadcn add @01orbital/contour-fieldPart 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/contour-field.tsx, as source you own and edit.
import { ContourField } from "@/components/graphics/contour-field"
export default function Demo() {
return (
<div className="relative aspect-video w-full max-w-2xl overflow-hidden rounded-2xl">
<ContourField from="enceladus" palette="delft" />
</div>
)
}Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: @base-ui/react, cn. The CLI installs them for you.
No other registry pieces.
Color Wash
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.
Glass Icon
Rounded glass tile that frames a single icon, using the kit's glaze surface and glass-edge utilities with scene foreground ink. Sized for a 36px icon and meant for dark art surfaces.