Skip to Content
Get full access

Celestograph Plate

Generative art plate in a vintage darkroom film style that fills a sized container, in emulsion or amber chemistry or your own colors. Fresh, developed and ruined presets set its age and opacity, so the ground shows through.

pnpm dlx shadcn add @01orbital/celestograph-plate

Usage

import { CelestographPlate } from "@/components/celestograph/celestograph-plate"

// Bright pink over bright blue: pass any OKLCH anchors.
const ANCHORS = {
  upper: "oklch(0.74 0.17 350)",
  lower: "oklch(0.52 0.19 262)",
  glow: "oklch(0.9 0.07 350)",
}

export default function CelestographPlateDemo() {
  return (
    <div className="grid w-full place-items-center p-6">
      <CelestographPlate
        plate="developed"
        anchors={ANCHORS}
        knobs={{ opacity: 1 }}
        className="aspect-1000/580 w-full max-w-2xl rounded-sm"
      />
    </div>
  )
}

API reference

A photographic plate painted on a canvas, used as a textured layer over a surface. The same settings always paint the same plate.

It has no height of its own: size it with className or style. The canvas is painted at a 100:58 ratio and stretched to fill the box, at the opacity of the plate preset unless knobs.opacity sets one. Hidden from assistive tech.

Prop

Type

It also accepts the HTML attributes of the element it renders.

Dependencies

npm: cn. The CLI installs them for you.

No other registry pieces.

Celestograph Avatar

Celestograph Cover

Celestograph Image

Celestograph Placeholder

Contour Field