Surfaces

Glass Surface

The foundational glass material component with configurable thickness, tint, glow and optional refraction.

<script>
  import { GlassSurface } from "@codeatlasdev/ui";
</script>

<GlassSurface thickness="thin" tinted>…</GlassSurface>

GlassSurface is the low-level material. Prefer Glass Card for content containers. Extra attributes are forwarded to the root element. Do not add will-change: transform to a glass element or its ancestors, since it breaks backdrop-filter.

Interactive

Adjust the controls to preview each variant.

Thickness

Tinted Glowing

regular

GlassSurface

Code

<script lang="ts">
  import { GlassSurface } from '@codeatlasdev/ui';
  import type { Thickness } from '@codeatlasdev/ui';

  const tiers: Thickness[] = ['ultra-thin', 'thin', 'regular', 'thick', 'chrome'];
  let thickness = $state<Thickness>('regular');
  let tinted = $state(false);
  let glowing = $state(false);
</script>

<div class="controls">
  <div class="group" role="group" aria-label="Thickness">
    <span class="label">Thickness</span>
    {#each tiers as t}
      <button
        type="button"
        class="chip"
        class:chip--active={thickness === t}
        aria-pressed={thickness === t}
        onclick={() => (thickness = t)}
      >{t}</button>
    {/each}
  </div>
  <div class="group">
    <label class="label"><input type="checkbox" bind:checked={tinted} /> Tinted</label>
    <label class="label"><input type="checkbox" bind:checked={glowing} /> Glowing</label>
  </div>

  <div class="backdrop">
    <GlassSurface {thickness} {tinted} {glowing} refraction={false} class="preview">
      <p class="name">{thickness}{tinted ? ' · tinted' : ''}{glowing ? ' · glowing' : ''}</p>
      <p class="sub">GlassSurface</p>
    </GlassSurface>
  </div>
</div>

<style>
  .controls { display: flex; flex-direction: column; gap: var(--ca-space-3); width: 100%; }
  .group { display: flex; align-items: center; gap: var(--ca-space-2); flex-wrap: wrap; }
  .label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ca-font-size-caption);
    font-weight: 500;
    color: var(--ca-text-secondary);
    cursor: pointer;
  }
  .chip {
    padding: 4px 12px;
    border-radius: var(--ca-radius-pill);
    font: inherit;
    font-size: var(--ca-font-size-caption);
    font-weight: 500;
    border: 1px solid var(--ca-outline-default);
    background: transparent;
    color: var(--ca-text-secondary);
    cursor: pointer;
  }
  .chip--active { background: var(--ca-brand-fill); border-color: var(--ca-brand-main); color: var(--ca-brand-contrast); }
  .backdrop {
    background: linear-gradient(135deg, var(--ca-brand-main) 0%, var(--ca-semantic-info) 100%);
    border-radius: var(--ca-radius-lg);
    padding: var(--ca-space-10);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  :global(.preview) { padding: 32px 48px; border-radius: var(--ca-radius-lg); text-align: center; min-width: 200px; }
  .name { margin: 0 0 4px; font-family: var(--ca-font-mono); font-size: var(--ca-font-size-body1); font-weight: 600; color: var(--ca-text-primary); }
  .sub { margin: 0; font-size: var(--ca-font-size-caption); color: var(--ca-text-secondary); }
</style>

All tiers side by side

ultra-thin

thin

regular

thick

chrome

Code

<script lang="ts">
  import { GlassSurface } from '@codeatlasdev/ui';
  import type { Thickness } from '@codeatlasdev/ui';

  const tiers: Thickness[] = ['ultra-thin', 'thin', 'regular', 'thick', 'chrome'];
</script>

<div class="backdrop">
  {#each tiers as t}
    <GlassSurface thickness={t} refraction={false} class="tier">
      <p>{t}</p>
    </GlassSurface>
  {/each}
</div>

<style>
  .backdrop {
    background: linear-gradient(135deg, var(--ca-brand-dark), var(--ca-semantic-info), var(--ca-semantic-success));
    border-radius: var(--ca-radius-lg);
    padding: var(--ca-space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ca-space-3);
    width: 100%;
  }
  :global(.tier) { flex: 1; min-width: 100px; padding: 20px; border-radius: var(--ca-radius-md); text-align: center; }
  p { margin: 0; font-family: var(--ca-font-mono); font-size: var(--ca-font-size-caption); font-weight: 600; color: var(--ca-text-primary); }
</style>

Props

Prop	Type	Default	Description
`thickness`	`'ultra-thin' \| 'thin' \| 'regular' \| 'thick' \| 'chrome'`	`'regular'`	Material tier controlling blur and opacity.
`tinted`	`boolean`	`false`	Adds the brand accent gradient overlay.
`glowing`	`boolean`	`false`	Adds a backlit glow halo.
`refraction`	`boolean`	`true`	Renders the LiquidGlass SVG refraction overlay.
`class`	`string`	`''`	Extra class names.
`style`	`string`	`''`	Inline style string.
`children`	`Snippet`	`undefined`	Slot content.