GlassSurface
glass-surfaceCreates a refractive glass surface with chromatic edge dispersion and fallback blur.
Usage
Basic usage
A liquid glass pill that refracts + disperses the content behind it. It needs to be placed on a rich colorful background to see the effect clearly.
<GlassSurface width={220} height={90} borderRadius={24}>
<span className="text-sm font-semibold text-foreground">
Glass Surface
</span>
</GlassSurface>Strong dispersion
By enlarging distortionScale and each channel offset, a more obvious RGB split light edge appears on the edge of the glass.
<GlassSurface
width={240}
height={100}
borderRadius={28}
distortionScale={-220}
greenOffset={25}
blueOffset={45}
>
<span className="text-sm font-semibold text-foreground">Hulian</span>
</GlassSurface>Matte bottom
backgroundOpacity increases the opacity of the glass background color, and works with saturation to create a more solid frosted texture.
<GlassSurface
width={220}
height={90}
borderRadius={20}
backgroundOpacity={0.5}
saturation={1.4}
>
<span className="text-sm text-foreground">Frosted</span>
</GlassSurface>Round badge
Equal width and height + borderRadius Take the radius to get a circular glass badge.
<GlassSurface width={96} height={96} borderRadius={48}>
<span className="text-xl font-bold text-foreground">hu</span>
</GlassSurface>When to Use
Use it for a fixed-size pill, card, or button surface that visibly refracts the background and separates RGB edges. Use FluidGlass for a full-screen, pointer-following effect or Lens for local magnification. GlassSurface uses an SVG displacement map, so place it over detailed content where refraction is visible.
Import
import { GlassSurface } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | number | string | 200 | Width, number is treated as px, string is passed through as it is |
| height | number | string | 80 | Height, number is treated as px, string is passed through as it is |
| borderRadius | number | 20 | Fillet radius px, acting on the inner rectangle of the container and displacement map at the same time |
| borderWidth | number | 0.07 | Edge highlight band width coefficient 0~1 (relatively short side), the larger the wider the refraction |
| brightness | number | 50 | Displacement map internal rectangular brightness (HSL's L, 0~100), control glass thickness texture |
| opacity | number | 0.93 | Displacement map internal rectangle opacity 0~1 |
| blur | number | 11 | Displacement map internal rectangular Gaussian blur radius px, softening the refraction boundary |
| displace | number | 0 | Refraction result quadratic Gaussian blur, eliminate pixel aliasing |
| backgroundOpacity | number | 0 | Frosted background opacity, 0=fully transparent |
| saturation | number | 1 | backdrop-filter saturation magnification |
| distortionScale | number | -180 | Refraction displacement; negative values indent, positive values bulge, and channel offsets add chromatic separation |
| redOffset | number | 0 | The extra displacement (color difference) of the red channel relative to distortionScale |
| greenOffset | number | 10 | Green channel additional displacement (color difference) |
| blueOffset | number | 20 | Blue channel additional displacement (color difference) |
| xChannel | GlassChannel | "R" | X-direction offset access channel ("R"|"G"|"B"|"A") |
| yChannel | GlassChannel | "G" | Y-direction offset access channel |
| mixBlendMode | CSSProperties["mixBlendMode"] | "difference" | Red/blue gradient overlay blending mode in the displacement map (determines the refraction texture shape) |
| className | string | — | Root container className |
| style | CSSProperties | — | Forward the root container inline style |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Glass surface content (centered above the refractive layer) |
Usage Guidelines
- Refraction relies on SVG feDisplacementMap to shift background pixels. The effect is almost invisible on a solid color/blank background. It must be placed on a background with gradients/textures/images.
- Browsers that do not support SVG filters will fall back to backdrop-blur (no dispersion); this is a built-in downgrade of the component, not a bug.
- Client-side components (relying on runtime SVG filters and pointers), only static shells are available under SSR, and interactive states must be verified in the browser.
- Turn off transition animation in reduced-motion (refraction itself is still there).
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
<GlassSurface
width={220}
height={90}
borderRadius={24}
distortionScale={-180}
blueOffset={20}
backgroundOpacity={0}
>
Glass
</GlassSurface>