Surfaces
Glass Surface
Raw glass on any element: frost, rim and lens, ready to shape into your own parts.
Preview
Installation
Install the package once, then import the parts you use into a standalone component.
Install
npm install ngx-vitreo @angular/cdk @floating-ui/domImport
import { GlassSurface } from 'ngx-vitreo';
@Component({
imports: [GlassSurface],
// ...
})Usage
Usage
<glass-surface
preset="prominent"
refraction="soft"
[refractionBackground]="backdrop"
refractionBackgroundSpace="viewport"
class="p-6"
>
Refractive surface
</glass-surface>
<ng-template #backdrop>
<div class="absolute inset-0 ribbon"></div>
</ng-template>
<!-- On any element -->
<section glassSurface preset="subtle">Static glass</section>API reference
GlassSurface
<glass-surface>, [glassSurface]
| Input | Type | Default | Description |
|---|---|---|---|
glass | 'regular' | 'clear' | nearest [glassVariant], else 'regular' | regular scatters a little light and adapts to what lies behind it; clear stays transparent, for controls over photos and video. |
dim | 'auto' | boolean | number | 'auto' | Clear glass's dimming layer. auto grows it to 35% as the backdrop brightens; a bare attribute is 35%, a number its own opacity, 0 none. |
preset | 'subtle' | 'standard' | 'prominent' | 'control' | 'showcase' | 'standard' | Material strength. control and showcase also turn the lens on by default. |
lens | boolean | true except subtle | Chromium-only rim lens that bends and splits the page behind it. Off with reduced transparency, while generated refraction runs, or above 720,000 px² of area. |
thickness | number | thickness preference | Glass thickness as a multiple of regular (1); thicker glass widens the rim and bends further. |
refraction | 'none' | 'soft' | 'strong' | 'strong' for showcase, else 'none' | Generated refraction of refractionBackground. Needs refractionBackground and is off under reduced motion or reduced transparency. |
refractionBackground | TemplateRef | None | An <ng-template> bent inside the surface; decorative, not for interactive or semantic content. Needs a uniform border radius. |
refractionBackgroundSpace | 'local' | 'viewport' | 'local' | Aligns refractionBackground to the surface or to the viewport; use viewport for a fixed wallpaper. |
refractionDisplacement | number | 72 soft, 112 strong | Bend strength of generated refraction. |
interactive | boolean | false | Brightens the surface slightly on hover. |