Visual effects
Usage
This repo's answer to Unicorn Studio's decorative shader-effect library — same category structure (Generative/Distort/Post process/Blur/Misc), built as plain CSS filters/gradients/backdrop-filter instead of a paid, externally-hosted WebGL editor. This doc covers the pure-CSS tier; the Canvas2D Generative effects (mesh gradient, noise grain, particle field, aurora, circle, pattern, grid glow) live in ambient.doc.tsx, and the Distort-category approximations (water ripple, mirror, swirl, pixelate, mouse trail) in distort.doc.tsx — split across three docs because they genuinely differ in build tier (T1 CSS vs. T2 Canvas2D), not because the categories differ. Deliberately still not all ~85 of Unicorn's named effects: only the ones with a real use on a dashboard product, same selectivity kintsugi already applies when picking a technique for a brief (see distort.doc.tsx's own list of what a true per-pixel WebGL shader would add that these approximations do not). Two things already exist elsewhere and are not duplicated here — chromatic-aberration and film-grain are both live in use-shader-mask.ts's WebGL hover-sheen hook (used by the nav logo/wordmark).import { Vignette, Fog, ReflectiveSurface, Bloom, Duotone, Posterize, Replicate, FrostedGlass } from '@summonware/ui';Best practices
DoUse FrostedGlass on a panel that sits over genuinely busy content (a sticky header over a scrolling list) — over a plain background it just looks like reduced contrast for no reason.
DoTreat Posterize as a stylistic accent, not a claim of true colour quantization — it is a contrast/saturation approximation, said plainly in its own doc comment.
Don'tStack two or more of these on the same element. Each is a self-contained "one signature technique" — combining them (e.g. Vignette + Duotone) reads as noise, not depth.
Anatomy
VignetteGenerative — darkens the edges of whatever it wraps.
FogPost process — a soft gradient wash, e.g. fading an image into the panel below it.
ReflectiveSurfaceMisc — a faint glossy reflection under a card.
BloomPost process — a slow breathing glow (public alias of the existing sw-glow-pulse keyframe).
DuotonePost process — two-colour treatment for an <img>/<video> child, using the current brand primary/secondary.
PosterizePost process — a contrast/saturation approximation, not true colour quantization.
ReplicateMisc — ghost copies via stacked box-shadow, no extra markup.
FrostedGlassBlur — four strengths (sm/md/lg/progressive), backdrop-filter based.
Examples
Common configurations, variations and states.Generative — Vignette
Vignette
Darkened edges over a plain gradient swatch.
Post process — Fog, Bloom, Duotone, Posterize
Fog
Bloom
Duotone
Posterize
Four post-process treatments over the same swatch, for comparison.
Blur — frosted-glass family
sm
md
lg
A translucent panel over busy content behind it — three fixed strengths plus a progressive edge falloff.
Misc — ReflectiveSurface, Replicate
Reflective
Replicate
A glossy reflection and a stacked ghost-copy effect, both markup-free.