GlassLikeUI

Svelte component library with frosted glass materials. Pseudo-element lensing, two-axis variant API, drag-snap sheets, View Transitions morph, accessibility-aware out of the box, cross-platform typography.

Svelte 5 only. GPLv3 licensed.

npm install glasslikeui

Peer dependency: svelte ^5.0.0.

Mount LensFilters once near the root of your app, and import the stylesheets you want:

<script>
  import { LensFilters } from 'glasslikeui';
  import 'glasslikeui/glasslikeui.css';
  import 'glasslikeui/lens.css';
  import 'glasslikeui/squircle.css';
  import 'glasslikeui/typography.css';
</script>

<LensFilters />
<!-- rest of app -->

Optional: wire browser accessibility prefs into the library's fallback attributes on non-Safari browsers:

<script>
  import { onMount } from 'svelte';
  import { syncAccessibilityPreferences } from 'glasslikeui';
  onMount(() => syncAccessibilityPreferences());
</script>

<script>
  import { Glass, Button } from 'glasslikeui';
</script>

<Glass variant="regular" intensity="standard">
  {#snippet children()}
    <h2>Frosted card</h2>
    <Button variant="filled">Action</Button>
  {/snippet}
</Glass>

Glass (and its consumers: GlassCard, GlassSection, List, TabView) takes two orthogonal props:

• variant -- regular (default) or clear. Clear requires a <GlassDimLayer /> companion for legibility.
• intensity -- subtle, standard (default), or prominent. Controls blur, edge displacement, and saturation together.

Glass takes a shape prop mirroring SwiftUI's glassEffect(_:in:). It overrides cornerRadius entirely.

<Glass shape="capsule">...</Glass>
<Glass shape="circle">...</Glass>

• rect (default) -- uses the cornerRadius token.
• capsule -- fully rounded ends.
• circle -- 50% radius, locked to a 1:1 box.

Buttons get the same treatment through the glass and glassProminent variants, which read their blur and saturation from the shared intensity tokens rather than duplicating them.

ListRow accepts a swipeActions snippet, mirroring SwiftUI's .swipeActions(edge:allowsFullSwipe:):

<ListRow allowsFullSwipe onFullSwipe={() => remove(item)}>
  {#snippet children()}{item.title}{/snippet}
  {#snippet swipeActions()}
    <button onclick={() => remove(item)}>Delete</button>
  {/snippet}
</ListRow>

ScrollView accepts an onRefresh handler, mirroring .refreshable. The indicator stays up until the returned promise settles -- including when it rejects:

<ScrollView onRefresh={async () => await reload()}>
  ...
</ScrollView>

Both are also available as standalone actions for your own markup. They drive --swipe-x / --refresh-pull and data-swipe-state / data-refresh-phase; style off those.

The motion prop on Glass ties the highlight angle to the device's tilt. iOS Safari requires a user-gesture permission grant before tilt events fire. You MUST call requestMotionPermission() from a click or tap handler -- not from onMount, an effect, or module init.

<script>
  import { Glass, requestMotionPermission } from 'glasslikeui';

  let permission = $state('pending');

  async function enable() {
    permission = await requestMotionPermission();
    // 'granted' | 'denied' | 'unavailable'
  }
</script>

{#if permission === 'pending'}
  <button onclick={enable}>Enable tilt effect</button>
{/if}

<Glass motion={permission === 'granted'}>
  {#snippet children()}...{/snippet}
</Glass>

Requirements:

• User gesture -- call inside onclick / ontap / form handler. Called outside a gesture, iOS silently returns denied without showing the prompt.
• HTTPS -- http://localhost works for dev; plain HTTP on a real device does not expose the API.
• Per-origin -- granted or denied once, then remembered. A denied decision can only be reset by the user in Settings -> Safari -> Advanced.
• Non-iOS browsers (Android Chrome, desktop Chrome / Firefox / Safari) grant access implicitly; the helper returns 'granted' without any prompt on those.
• Unsupported browsers (no DeviceOrientationEvent) -- helper returns 'unavailable' and the action is a no-op.

A small SF-symbol-inspired set ships in ICONS. Register your own before rendering:

import { registerIcons } from 'glasslikeui';
registerIcons({
  'custom-symbol': '<path d="..." />'
});

Native preference handling with zero config:

• prefers-reduced-transparency -- surfaces go opaque, blur off
• prefers-contrast: more -- thicker borders, higher opacity
• prefers-reduced-motion -- transitions and motion highlights off

Cross-browser fallback attributes (flip at :root):

• data-reduced-transparency="true"
• data-contrast="more"
• data-reduced-motion="true"

Call syncAccessibilityPreferences() to manage these automatically.

All design tokens are CSS custom properties. Toggle dark / light with the data-theme attribute on :root:

<html data-theme="light">...</html>

Override any token via your own stylesheet, e.g.:

:root {
  --color-accent: #FF6A00;
  --glass-radius-lg: 28px;
}

npm run package        # svelte-package build
npm test               # vitest once
npm run test:watch     # vitest watch
npm run test:coverage  # with v8 coverage

GNU General Public License v3.0 or later (GPL-3.0-or-later). Copyright (c) 2026 Beau Ayres. See LICENSE.