Glass Refraction Panel
Glass rather than frost: saturated backdrop, bent edges and a tracking specular rim.
- Category
- Components
- Added
- 2026-09-20
- Deps
- none
- Updated
- 2026-09-20
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.
Glass, not frost
Blur plus saturation plus a bent edge. Move the pointer across the panel.
Props
"use client";
import { useRef, useState, type ReactNode } from "react";
export function GlassRefractionPanel({
children,
blur = 14,
saturation = 160,
edge = 60,
tint = true,
}: {
children: ReactNode;
blur?: number;
/** Backdrop saturation %. This is what separates glass from frost. */
saturation?: number;
/** Edge refraction strength, 0-100. */
edge?: number;
/** The milky surface wash. Off, only the backdrop filter remains. */
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this component
Nearly every glassmorphism panel on the web is `backdrop-filter: blur()` and a white border, and nearly every one reads as frosted plastic. Two things are missing. The first is saturation: real glass intensifies the colour of what is behind it, so the backdrop filter needs `saturate()` alongside the blur — a one-line change that does more than any amount of border tuning. The second is edge refraction. Light bends most where the material curves, which is at the rim, so the highlight belongs in an inset gradient that is bright at the top-left, absent through the middle, and returns weakly at the bottom-right. A uniform border cannot produce that asymmetry, and its absence is what makes flat glass panels look like stickers. A specular hotspot tracking the pointer completes it, written to custom properties from a ref so movement never re-renders the panel. One caveat worth stating plainly: this component is pointless over a flat background — it needs colour and structure behind it to refract, which is why the preview supplies its own.
Curator’s note
Built for viberdy 2.1. Adding saturate() to the backdrop filter is the one-line change that turns frost into glass.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Glare Tilt Card
componentsA card that tilts toward the pointer with a true angular specular sweep.
Notification Center
componentsA read/unread notification list with filtering, bulk actions, and a real empty state.
Link Peek Preview
patternsAn index list that floats a velocity-tilted preview card beside the pointer.