design-infraReport a problem or share feedback← Catalog
Metal FX
curatedfreelibrariesdev/metal-fx
Liquid-metal shader effects: rings, buttons, metal text, badges with cursor-light reflections (Paper Shaders engine).
$
pnpm add metal-fxnpm deps: metal-fx
Our notes
Premium hero CTA or badge. Shader cost — one or two per page.- Source
- libraries.dev
- Kind
- package
- Categories
- button, text-effect, 3d
- Use as
- wrapper — wraps your existing element
- Applies to
- buttonbadgetext-effect
- Motion
- on loop, cursor · expressive · webgl · high cost · respects reduced motion
- Tags
- npm, mit
- Licence
- MIT (packages). Pro subscription adds a Studio + agent skills.
- Live demo
- libraries.dev
- Docs
- libraries.dev
Similar
Compare all 4 →- Gradient Textreact-bits/gradient-textAnimated gradient text/border. Default palette is React Bits purple/pink — always pass colors from your theme.
- Shiny Textreact-bits/shiny-textShimmer sweep across text, e.g. a hero eyebrow. Default colours #b5b5b5/#fff are props — set from your muted/foreground tokens.
- Staggered Letter Text Swapmicrokit/staggered-letter-text-swapEach letter rolls up and is replaced by its twin with a 34ms stagger on hover/focus-visible — pure CSS transitions via a --letter-delay var; the button carries aria-label and the letter spans are aria-hidden; motion-reduce handled. Remove the hard-coded font-[Arial] and light-dark() text colour so it inherits your type and tokens. Nav links and text CTAs.