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.
- Category
- Sections
- Added
- 2026-09-26
- Deps
- none
- Updated
- 2026-09-26
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Features
Money, seen clearly.
Accounts, cards and spending in one place, with nothing hidden behind the glass.
Total balance
€12,480.20
↑ 3.2% this monthEvery account at a glance
Current, savings and cards in one balance, updated the second money moves.
•••• 4821
•••• 4822
•••• 4823
Cards that live on your phone
Freeze, unfreeze or make a single-use card in a tap.
0%
No FX fees
Spend in 30 currencies at the real rate.
Locked to you
Face unlock on every payment over €30.
- Groceries 38%Transport 21%Eating out 17%Other 24%
Spending that sorts itself
Every payment filed by what it was for, not by the shop's name.
- AKJBMSLR
€84.00 · 4 ways · settled
Split anything
Send the link; everyone pays their share from any bank.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Glass Pricing Tiers
sectionsA pricing section where each plan is a thicker pane of glass than the last, and the plan you choose puts a lens over its price.
Glass Tint Footer
sectionsA liquid-glass footer slab that rises over the section above it and re-tints its frost to that section's colour.
Glass Refraction Panel
componentsA card of liquid glass: it bends its backdrop at the rim, with a graduated edge and a light that follows the pointer.