Halftone
A comic pop-art Ben-Day dot field: three ink screens at classic offset-print angles, mis-registered for printed-comic fringing, their dot radii driven by a slow traveling wave so waves of dot-size ripple across a bold flat ground. Cursor sends a concentric pressure wave. Original OGL fragment shader, DPR-clamped, offscreen-paused, reduced-motion-safe.
oglpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/halftoneManual — install dependencies, then copy the source
npm install oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string, string] | Four tones: [paper, ink0, ink1, ink2]. paper is the bold flat ground the dots print on; ink0/ink1/ink2 are the three halftone ink colors (default a CMYK-ish cyan / magenta / near-black key). Each ink is applied as a subtractive multiply tint, so overlapping dots blend the way real printed screens do. Any hex string. | |
| speed | number | 1 | Wave drift speed multiplier. 1 = default, 2 = twice as fast, 0 = still. |
| intensity | number | 1 | Ink density / contrast, 0–2. 1 = default. Higher pushes dark regions to solid ink and thins the highlights; lower flattens toward even mid dots. |
| density | number | 1 | Dot-screen density, 0.2–4. 1 = default (a comic-book screen). Higher packs finer dots; lower blows them up into bold Ben-Day discs. |
| ripple | number | 1 | Strength of the pointer pressure ripple, 0–1. 0 disables it; 1 sends a full concentric dot-size wave rippling out from the cursor. |
| paused | boolean | Freeze the animation at its current frame. | |
Also accepts all props of React.ComponentPropsWithoutRef<"div"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.