FancyUI
Saved GitHub Get started
Card — liquid-metal edge — preview

Card — liquid-metal edge

FancyUI FANCYUI

A polished metal ring that keeps flowing around a card, in chromatic, silver or gold.

#glow#iridescent#ambient

Open docs

Use in FancyUI

Type
Interaction
Interaction
Ambient
Style
Glow, Iridescent
Code availability
Open source

Why it works

Two conic fields drift at different rates under a glint that laps the border, so the edge looks like polished metal catching light rather than a lit stroke. Neutral body and shadow are woven into the tint, which keeps even the chromatic preset from reading as a rainbow.

When to use it

One surface that should feel premium: the featured pricing tier, a selected plan, a hero card.

Things to watch

Pure CSS (registered custom properties), no listeners. Reduced motion stops the fields and parks the glint. It is an overlay with no children: the parent must be positioned and rounded.

Implementation clues

  • @property angles per field
  • two conic fields + a glint lap
  • mask to the border ring
  • presets: chromatic / silver / gold