Toggle Sidebar B
AppearanceLight & dark mode D

Fluid Glass

Glassmorphism container with animated liquid distortion refraction.

Default

A glass shape refracts a scrollable scene behind it. Move the pointer to drag the lens around and scroll inside the preview to move through the images. Every prop is wired to the controls underneath.

Light previewReplay previewOpen in new tab

Customize

Mode
Scale0.25
IOR1.15
Thickness2
Chromatic Aberration0.05
Anisotropy0.01

API Reference

FluidGlass

PropTypeDefaultDescription
mode'lens' | 'bar' | 'cube'"lens"Display mode of the fluid glass effect. Options: 'lens', 'bar', 'cube'.
lensPropsobject{}Props specific to lens mode including material properties like ior, thickness, transmission.
barPropsobject{}Props specific to bar mode including navItems array and material properties.
cubePropsobject{}Props specific to cube mode including material properties and interaction settings.
backgroundColorstring"#120F17"Background color rendered behind the glass scene.
textColorstring"#ffffff"Color used for the scene title and navigation labels.
lensModelUrlstring"/assets/3d/lens.glb"URL of the lens model (a glTF binary with a Cylinder mesh).
barModelUrlstring"/assets/3d/bar.glb"URL of the bar model (a glTF binary with a Cube mesh).
cubeModelUrlstring"/assets/3d/cube.glb"URL of the cube model (a glTF binary with a Cube mesh).

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut Description
Arrow Up + Arrow Down + Page Up + Page DownScroll the scene when the preview has focus.
  • The scene is drawn on a canvas, so its text is not exposed to screen readers. Keep the same content in the page markup if it matters.
  • Navigation labels in bar mode are canvas text. Give the links real counterparts elsewhere for keyboard and assistive tech users.
Flowing MenuFlying Posters