Surfaces

LiquidGlass

The SVG refraction layer that Surface paints when material is "liquid". Opt-in: use it directly only for a custom glass container.

<script>
  import { LiquidGlass, GLASS_OPTICS } from "@codeatlasdev/ui";
</script>

<div class="my-glass">
  <LiquidGlass optics={GLASS_OPTICS.regular} />
  <slot />
</div>

You rarely need this. Surface with material="liquid" renders LiquidGlass for you and picks the optics from its elevation. The component is an absolutely positioned, aria-hidden SVG that fills its parent and inherits the parent’s border radius, so the parent needs position: relative and overflow: hidden. It only adds the refraction; the blur, tint and border come from the glass material classes on the parent.

GLASS_OPTICS maps each material thickness (ultra-thin, thin, regular, thick, chrome) to a ready-made optics object.

<script lang="ts">
  import { LiquidGlass, GLASS_OPTICS } from '@codeatlasdev/ui';
</script>

<div class="frame">
  <LiquidGlass optics={GLASS_OPTICS.regular} />
  <p>Refraction layer behind this text.</p>
</div>

<style>
  .frame {
    position: relative;
    padding: var(--ca-space-6);
    border-radius: var(--ca-radius-lg);
    overflow: hidden;
  }
</style>