Playground
Visual effects for the web
Modern CSS and SVG techniques, built as tokenized, fully configurable Svelte components. Pick an effect and play with every knob.
Noise
Grain and texture from a single SVG filter primitive, optionally animated as film grain.
Frosted glass
Blurred, warped backdrop with grain and a thin, directionally lit rim.
Liquid glass
A refractive lens: the backdrop bends along a curved bezel computed from a signed distance field, with a specular rim.
Chromatic aberration
RGB split on any content: channels isolated, offset and screened back together, optionally radial like a lens.
Gooey
Shapes that melt into each other like metaballs, from a blur and an alpha threshold, plus a gooey menu.
Lighting
Embossed plaster and raised letters lit by a light that follows the pointer.
Duotone
Gradient maps for any HTML: luminance mapped through two or three color stops by an SVG filter.
Halftone
Print-style dots from CSS gradients and a contrast() threshold, or posterize with ordered Bayer dither.
CRT
Scanlines, phosphor mask, barrel distortion and bloom over real, readable text, with a photosensitivity-safe flicker.
Holographic foil
Trading-card foil that tilts in 3D towards the pointer, with a sliding rainbow, embossed relief and glare.
Spotlight cards
One pointer-following glow lighting up a grid of cards, strongest in their borders.
Aurora
Drifting mesh gradient: layered radial-gradients moved by animated, registered custom properties.
Squircles
Superellipse corners that morph, plus a Material 3 Expressive style connected button group.