← All components
Surfaces / effect
Glass Surface
A reusable optical glass container with RGB backdrop refraction, soft edge lighting and a frosted fallback.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- React Bits derivative with its complete original license. Eligible under the project permission; this entry is not represented as an unrestricted MIT original.
- Automatic mode selects SVG backdrop optics in supported Chromium-style browsers. Safari/Firefox retain upstream frosted fallback; those engines are unverified here. Explicit Frosted fallback lets you inspect the alternative. Distortion and channel spread apply only to SVG mode; frost, edge blur and saturation apply to both.
- Complete Demo uses original local CSS contours with actual Focus/Flow child controls. The primitive needs visually varied content behind it; a flat backdrop cannot reveal displacement. width/height own the glass surface; the parent owns background and composition.
- Preserves generated displacement map, independent RGB distortion, screen recombination and edge lighting. Measured maps are capped to 4096 per axis; one current ResizeObserver disconnects on cleanup. No animation loop, timers, external image assets or pointer capture. Pause/Replay preserve the static optics and selected scene.
React 19.2Modern browsersNative HTML and SVG
React Bits — David Haz · MIT + Commons Clause. Used with explicit permission for this project; complete original notice retained.
Geist and Geist Mono — Vercel, Inc. · SIL Open Font License 1.1; full notice and required self-hosted assets included.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
borderRadius | number | 50 | Radius. Validated live scalar configuration. |
backgroundOpacity | number | 0.1 | Frost. Validated live scalar configuration. |
saturation | number | 1 | Saturation. Validated live scalar configuration. |
distortionScale | number | -180 | Distortion. Validated live scalar configuration. |
blur | number | 11 | Edge softness. Validated live scalar configuration. |
spread | number | 20 | Channel spread. Validated live scalar configuration. |
mode | string | "auto" | Optics. Validated live scalar configuration. |
children | ReactNode | undefined | Actual child content remains sharp and interactive above the distorted backdrop. |
width | number | string | 200 | Pixel number clamped 1–4096, or bounded-length numeric CSS %, px, rem, vh, vw. Maximum visual width is 100% of parent. |
height | number | string | 80 | Pixel number or the same supported numeric CSS units; parent owns surrounding dimensions. |
borderWidth | number | 0.07 | Displacement map edge fraction, clamped 0–0.5. |
brightness | number | 50 | Map brightness percentage, clamped 0–100. |
opacity | number | 0.93 | Map opacity, clamped 0–1. |
displace | number | 0.5 | Final RGB recombination softness, clamped 0–4 px. |
paused | boolean | false | Static design; preserves useful interaction and existing local state. |
replayToken | number | 0 | Static design; replay preserves useful interaction and existing local state. |
className | string | '' | Additional host class. |
style | CSSProperties | undefined | Caller-owned inline styling. |