Distort approximations
Usage
Unicorn Studio's Distort category (Mouse Trail, Water Ripple, Liquify, Swirl, Pixelate…) is per-pixel WebGL shader displacement — genuinely warping the texture underneath. These are honest, cheap CSS/Canvas2D stand-ins for the same idea, not a port of the algorithm — each component's own doc comment says exactly what it approximates and what it does not do. Reach for a real fragment shader (use-shader-mask.ts's pattern) instead if a brief specifically needs true per-pixel warp; kintsugi's own 105-site library has real raymarching/shader-distortion precedent for that tier.import { WaterRipple, Mirror, Swirl, Pixelate, MouseTrail } from '@summonware/ui';Best practices
DoUse WaterRipple on an actual click target (a button, a card) — it is a click-feedback effect, not an ambient/idle one.
DoPixelate needs a same-origin or CORS-enabled image URL — it reads pixel data via Canvas2D, which a cross-origin image without CORS headers will taint and silently fail to redraw.
Don'tPresent Swirl/Mirror as "the same as a real distortion shader" in copy or a demo caption — they are a rotating gradient overlay and a flipped reflection respectively, not per-pixel warps, and calling them more than that oversells the technique.
Anatomy
WaterRippleClick-triggered expanding ring from the click point.
MirrorA flipped, faded reflection beneath the child.
SwirlA rotating conic-gradient sheen on hover.
PixelateReal Canvas2D downsample/upscale on hover, for an <img> source.
MouseTrailA fading trail of dots following the pointer within the wrapper.
Examples
Common configurations, variations and states.WaterRipple
Click me
Click anywhere on the card.
Mirror and Swirl
Mirror
Swirl (hover)
Mirror always shows its reflection; Swirl's overlay appears on hover.
Pixelate
Hover to pixelate, move off to sharpen back — uses the app's own same-origin apple-touch-icon.png so this demo never hits the cross-origin/CORS tainting warning above.
MouseTrail
Move the pointer here
Move the pointer across the card.