FancyUI
Saved GitHub Get started
Nav — liquid glass lens — preview

Nav — liquid glass lens

FancyUI FANCYUI

A pill that refracts what passes under it, with a thin chromatic fringe at the edge.

#glass#iridescent#scroll

Open docs

Use in FancyUI

Type
Interaction
Interaction
Scroll
Style
Glass, Iridescent
Code availability
Open source

Why it works

An SVG displacement map bends the backdrop and each colour channel is offset by a different amount, so the edges split into a thin chromatic fringe the way thick glass does. It only reads when something moves behind it — a page scrolling under a pill nav — and then the bend is what tells you there is a surface.

When to use it

A floating nav or toolbar over colourful, scrolling content.

Things to watch

`backdrop-filter: url(#…)` works in Chromium only; Safari gets a blur-and-saturate fallback and Firefox only a frost tint. Over a flat backdrop it is invisible. It sets `--frost` on its root, which inherits into children.

Implementation clues

  • feDisplacementMap per channel
  • generated SVG displacement map
  • backdrop-filter: url()
  • ResizeObserver rebuilds the map