FancyUI
Saved GitHub Get started
Pane — frosted refraction — preview

Pane — frosted refraction

FancyUI FANCYUI

Noise bends the backdrop like textured glass, with a specular rim on the edge.

#glass#scroll

Open docs

Use in FancyUI

Type
Interaction
Interaction
Scroll
Style
Glass
Code availability
Open source

Why it works

Turbulence noise distorts the backdrop unevenly instead of blurring it, so colour under the pane breaks into organic ripples like frosted glass. A specular highlight and a cool rim give the pane an edge.

When to use it

A floating label, toolbar or toast over colourful content.

Things to watch

Light-tinted only: the white tint has no dark branch. Safari drops the filter for a blur fallback. The settle fade is not gated by reduced motion.

Implementation clues

  • feTurbulence → displacement
  • seeded noise
  • specular rim + conic border
  • Safari blur fallback