Skip to Content
Get full access

Celestograph Image

Image with a generative art fallback: while loading or when it fails, a Celestograph plate seeded from the alt text stands in, and the photo fades in over it. With no source, the plate is the picture.

pnpm dlx shadcn add @01orbital/celestograph-image

Usage

import { CelestographImage } from "@/components/celestograph/celestograph-image"

export default function CelestographImageDemo() {
  return (
    <div className="grid w-full max-w-3xl grid-cols-2 place-items-stretch gap-5 p-6">
      <CelestographImage alt="Dornach, 1894" shape="wide" />
      <CelestographImage
        alt="A broken source"
        shape="wide"
        src="/does-not-exist.jpg"
      />
    </div>
  )
}

Examples

New

celestograph-image-wide-frame

celestograph-image-wide-frame

Wide Frame

Example of the Celestograph Image: a generated mineral plate in a wide landscape frame, used as the placeholder picture when no photo is given.

pnpm dlx shadcn add @01orbital/celestograph-image-wide-frame

New

celestograph-image-square-frame

celestograph-image-square-frame

Square Frame

Example of the Celestograph Image: the same generated mineral plate cropped to a square, for thumbnails and album-style covers.

pnpm dlx shadcn add @01orbital/celestograph-image-square-frame

New

celestograph-image-circle-frame

celestograph-image-circle-frame

Circle Frame

Example of the Celestograph Image: a generated mineral plate cropped to a circle, for round avatars or badges.

pnpm dlx shadcn add @01orbital/celestograph-image-circle-frame

New

celestograph-image-portrait-frame

celestograph-image-portrait-frame

Portrait Frame

Example of the Celestograph Image: a generated mineral plate in a tall portrait frame, for editorial cards and posters.

pnpm dlx shadcn add @01orbital/celestograph-image-portrait-frame

New

celestograph-image-banner-frame

celestograph-image-banner-frame

Banner Frame

Example of the Celestograph Image: a generated mineral plate stretched into a very wide, short banner, for page headers and strips.

pnpm dlx shadcn add @01orbital/celestograph-image-banner-frame

New

celestograph-image-fresh-emulsion

celestograph-image-fresh-emulsion

Fresh Emulsion

Example of the Celestograph Image: a fresh, lightly aged plate in the emulsion chemistry on a dark ground, the youngest of the three plate states.

pnpm dlx shadcn add @01orbital/celestograph-image-fresh-emulsion

New

celestograph-image-developed-emulsion

celestograph-image-developed-emulsion

Developed Emulsion

Example of the Celestograph Image: a fully developed emulsion plate on a light ground, showing the standard finished look of that chemistry.

pnpm dlx shadcn add @01orbital/celestograph-image-developed-emulsion

New

celestograph-image-ruined-emulsion

celestograph-image-ruined-emulsion

Ruined Emulsion

Example of the Celestograph Image: an emulsion plate in its ruined state, heavily aged and opaque, like a photograph left out for years.

pnpm dlx shadcn add @01orbital/celestograph-image-ruined-emulsion

New

celestograph-image-fresh-amber

celestograph-image-fresh-amber

Fresh Amber

Example of the Celestograph Image: a fresh plate in the warm amber chemistry, with golden tones instead of the cooler emulsion colors.

pnpm dlx shadcn add @01orbital/celestograph-image-fresh-amber

New

celestograph-image-ruined-amber

celestograph-image-ruined-amber

Ruined Amber

Example of the Celestograph Image: an amber plate in its ruined state, with the warm tones heavily aged and opaque.

pnpm dlx shadcn add @01orbital/celestograph-image-ruined-amber

New

celestograph-image-folded-strata

celestograph-image-folded-strata

Folded Strata

Example of the Celestograph Image: a plate with few, strongly warped bands, giving layered folds like rock strata.

pnpm dlx shadcn add @01orbital/celestograph-image-folded-strata

New

celestograph-image-clouded-plate

celestograph-image-clouded-plate

Clouded Plate

Example of the Celestograph Image: a plate with fine, cloudy detail, heavy grain and many specks, for a hazy and dusty surface.

pnpm dlx shadcn add @01orbital/celestograph-image-clouded-plate

New

celestograph-image-marbled-plate

celestograph-image-marbled-plate

Marbled Plate

Example of the Celestograph Image: a plate with broad, swirling bands and a larger scale, giving a marbled look.

pnpm dlx shadcn add @01orbital/celestograph-image-marbled-plate

New

celestograph-image-soft-ungrained-plate

celestograph-image-soft-ungrained-plate

Soft Ungrained Plate

Example of the Celestograph Image: a smooth plate with no grain or vignette and almost no specks, for a clean, soft surface.

pnpm dlx shadcn add @01orbital/celestograph-image-soft-ungrained-plate

New

celestograph-image-cyan-and-plum-anchors

celestograph-image-cyan-and-plum-anchors

Cyan And Plum Anchors

Example of the Celestograph Image: a plate painted between a bright cyan top and a deep plum bottom, showing how custom palette colors set the mood.

pnpm dlx shadcn add @01orbital/celestograph-image-cyan-and-plum-anchors

New

celestograph-image-short-image-title

celestograph-image-short-image-title

Short Image Title

Example of the Celestograph Image: a plate generated from the one-word alt text Copper, showing that even a short title gets its own picture.

pnpm dlx shadcn add @01orbital/celestograph-image-short-image-title

New

celestograph-image-different-seed-same-chemistry

celestograph-image-different-seed-same-chemistry

Different Seed Same Chemistry

Example of the Celestograph Image: an amber plate drawn from a chosen seed number, showing how a seed gives a different picture within the same chemistry.

pnpm dlx shadcn add @01orbital/celestograph-image-different-seed-same-chemistry

New

celestograph-image-album-cover

celestograph-image-album-cover

Album Cover

Example of the Celestograph Image: a square emulsion plate used as an album cover, with the title and artist set below it.

pnpm dlx shadcn add @01orbital/celestograph-image-album-cover

New

celestograph-image-edition-triptych

celestograph-image-edition-triptych

Edition Triptych

Example of the Celestograph Image: three portrait plates in a row, one amber, one emulsion and one ruined, as a small print edition.

pnpm dlx shadcn add @01orbital/celestograph-image-edition-triptych

New

celestograph-image-card-with-image

celestograph-image-card-with-image

Card With Image

Example of the Celestograph Image in a card: a wide plate across the top and a title and description below, for a field study listing.

pnpm dlx shadcn add @01orbital/celestograph-image-card-with-image

API reference

An image whose loading state is a plate painted from its alt text, stable, with no extra request and no layout shift. With no src, or after the image fails to load, the plate is the picture.

While no image shows, the plate is labeled with alt; an empty alt hides the whole frame from assistive tech. The image fades in over 500ms once loaded, or at once with reduced motion. className lands on the frame and imgClassName on the <img>.

Prop

Type

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

Dependencies

npm: cn. The CLI installs them for you.

Registry pieces it installs with it:

Celestograph Avatar

Celestograph Cover

Celestograph Placeholder

Celestograph Plate

Contour Field