Component Library

Find a component

Search the library by name or tag.

Liquid Metal

A WebGL shader used as a moving metal rim — on a button, and around an input that only comes alive once it has focus.

buttoninputshaderwebglmetalhoverportfolio@paper-design/shaders-react

Note

The shader is a real WebGL surface, so it is guarded with `prefersReducedMotion()` — with reduced motion on it falls back to a plain border rather than a frozen canvas. It renders as an absolutely-positioned layer, so it needs a `relative` parent with padding; the padding is the only part of it you see.

1280px