Glass Bento Wall
A feature grid cut from one sheet of liquid glass: each tile is as thick as it is big, and one pointer light moves across every rim.
Canvas 2D0 deps1 file · 19 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useId, useRef } from "react";
import type { CSSProperties, ReactNode } from "react";
/**
* GlassBentoWall — a feature grid cut from one sheet of liquid glass.
*
* Every tile sits over the same backdrop, and every tile is glass of a
* different THICKNESS: each one measures itself and sets its bezel, blur and
* shadow from its own size, so a small stat tile is a thin pane and the big
* feature tile is a thick slab that bends the light harder at its edge. Real
* glass works that way; identical thickness on every panel size is the tell
* of a flat imitation.
*
* One light source moves across the whole wall. Point anywhere and the rims
* of all the tiles light up on the side facing the pointer, with a soft
* specular under it, easing after the pointer over about 150ms.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
Most glass feature grids give every tile the same blur and the same white border, which is exactly how a flat imitation gives itself away: real glass gets thicker as it gets bigger. Here each tile measures itself and sets its own bezel, blur and shadow from its area, so a small stat tile is a thin pane and the large feature tile is a slab that bends the light hard at its edge. In Chromium each tile also runs a displacement map generated for its exact size inside backdrop-filter, so the discs drifting behind the wall visibly curve at every rim; Safari and Firefox get the same tiles with blur, saturation and a graduated rim. One light serves the whole wall: point anywhere and every rim lights on the side facing you, easing after the pointer. The grid follows its own width with container queries, from one column to four. Pass any backdrop, from a photo to a WebGL field.
Curator’s note
Part of the Glassmorphism kit, drop 2. Pro because it is a whole section and a per-tile SVG filter pipeline: every tile generates its own displacement map from its measured size.
