GlassSurface

Usage

Loading demo...

Use this component only when the surrounding artwork benefits from visible refraction. For regular cards, prefer TxBaseSurface or TxCard so the UI keeps predictable contrast.
Keep width, height, and borderRadius explicit when the glass layer sits above scrollable or image-heavy content; the displacement map is regenerated from the measured container bounds.
Tune blur, backgroundOpacity, and saturation against the actual background. Heavy blur on low-contrast content can make text behind the panel unreadable.
Treat distortionScale and RGB offsets as art-direction controls. Large negative values or wide channel offsets should be reserved for hero / preview surfaces, not dense forms.
Account for the fallback paths in Safari, Firefox, SSR, tests, and other environments without CSS.supports; those paths preserve layout and readability but remove RGB refraction.
Keep important controls inside the default slot; the generated SVG is decorative, non-interactive, and sits behind .tx-glass-surface__content.

Property	Type	Default	Description
width			Surface width. Numeric values are normalized to px; strings are passed through.
height			Surface height. Numeric values are normalized to px; strings are passed through.
borderRadius			Outer radius in px, also applied to the generated displacement map rectangles.
borderWidth			Edge-size multiplier used when generating the displacement map mask.
brightness			Lightness percentage for the generated inner displacement mask.
opacity			Alpha value for the generated inner displacement mask.
blur			Blur radius for the generated displacement mask; also drives the backdrop-filter fallback blur.
displace			Final SVG feGaussianBlur.stdDeviation applied after the RGB displacement maps are blended.
backgroundOpacity			Background alpha used on the SVG-filter rendering path.
saturation			Saturation value appended to the SVG-filter backdrop-filter chain.
distortionScale			Base SVG displacement scale applied to the red, green, and blue maps.
redOffset			Offset added to distortionScale for the red displacement map.
greenOffset			Offset added to distortionScale for the green displacement map.
blueOffset			Offset added to distortionScale for the blue displacement map.
xChannel			SVG displacement X channel selector forwarded to all RGB maps.
yChannel			SVG displacement Y channel selector forwarded to all RGB maps.
mixBlendMode			CSS mix-blend-mode used by the generated blue gradient rectangle in the displacement map.

TxGlassSurface does not emit custom events. Put interactive controls inside the default slot and handle their native events there.

Slot	Props	Description
`default`	-	Panel content rendered above the generated SVG filter layer and centered by `.tx-glass-surface__content`.

Loading demo...

TxGlassSurface selects the rendering path in this order:

SVG filter refraction path: when the browser supports backdrop-filter: url(#filter), the component uses the generated SVG displacement map and keeps RGB channel displacement, distortionScale, redOffset / greenOffset / blueOffset, xChannel / yChannel, displace, and saturation.
backdrop-filter blur path: when SVG filters are unavailable but native backdrop-filter is supported, it falls back to blur(${blur}px) saturate(1.8) brightness(1.06) with a translucent background and border. RGB displacement and chromatic refraction are no longer rendered.
solid translucent path: when backdrop-filter is also unavailable, it falls back to a translucent background plus border. Real blur and refraction are disabled, but width, height, radius, and baseline readability are preserved.

Safari and Firefox currently skip the SVG filter refraction path and enter the latter fallback paths first.

Rendering contract: numeric width / height become px strings, string dimensions pass through, and measured bounds feed the generated displacement map.
Fallback contract: SVG displacement is the high-fidelity path; unsupported browsers fall back to native backdrop-filter, then to a solid translucent surface that preserves layout and readability but drops RGB refraction.
Interaction contract: the generated SVG/filter layers are decorative. Interactive controls belong in the default slot above .tx-glass-surface__content.
Verified coverage: glass-surface.test.ts covers dimension normalization, slot rendering, solid fallback styling, and RGB displacement channel forwarding.
Component source: packages/tuffex/packages/components/src/glass-surface/src/TxGlassSurface.vue.
Types: packages/tuffex/packages/components/src/glass-surface/index.ts exports GlassSurfaceProps and TxGlassSurfaceInstance.
Coverage: packages/tuffex/packages/components/src/glass-surface/__tests__/glass-surface.test.ts verifies numeric dimension normalization, slot rendering, solid fallback styling, and SVG displacement channel forwarding.

packages/tuffex/packages/components/src/glass-surface/index.ts