HalftoneBloom

Halftone ring field revealed by soft drifting color blooms behind a punched-metal screen.

HalftoneBloom is a punched-metal halftone screen lit from behind: every cell is a ring (a disc with a smaller hole punched off-center), and the only light in the scene is a configurable rig of blurred color lights drifting slowly behind it. Each ring samples the light field once at its cell center, so the gradient steps cell by cell like a print halftone. The canvas is transparent outside the lit rings, so it sits on dark and light surfaces alike. The heritage scene recreates the dark background reference; sunrise, meadow, and spring recreate the neon.com pattern strips with colors sampled from the source art:

Install

npx shadcn@latest add https://ui.neon.com/r/halftone-bloom.json

Usage

import { HalftoneBloom } from "@/components/neon-ui/halftone-bloom";

<section className="relative isolate overflow-hidden bg-black">
  <HalftoneBloom className="absolute inset-0" />
  <div className="relative">{content}</div>
</section>;

// A custom rig: any set of up to six lights.
import { bloomScenes } from "@/components/neon-ui/fixtures";

<HalftoneBloom
  highlight={bloomScenes.sunrise.highlight}
  lights={bloomScenes.sunrise.lights}
/>;

Props