Fluid Glass
A thick glass lens or pill gliding over content after the pointer, bending what is under it with a bright rim.
import { FluidGlass } from "pleate/effects/fluid-glass";Lens
Look closer
Pill
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Props
- children
What the glass slides over.
ReactNode- shape
Glass shape.
"lens" | "pill"default "lens"- size
Glass height in px.
numberdefault 180- strength
Refraction in px.
numberdefault 40- magnify
Zoom inside the glass.
numberdefault 1.15- tint
Glass tint.
stringdefault rgb(255 255 255 / 0.06)
Accessibility
- The glass is decorative and ignores pointer events.
- The glass shows an inert copy of the content, hidden from assistive tech; keep that content light.
- Touch screens and reduced motion park the glass in the middle.