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. MIT licensed.

Install

npm install glasslikeui

Peer dependency: svelte ^5.0.0.

Setup

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>

Basic use

<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>

Variants and intensity

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.

Components

Component	Purpose
Glass	Core frosted surface.
GlassCard	Header / body / footer card.
GlassSection	Titled section block.
GlassEffectContainer	Groups glass siblings with shared shadow.
GlassDimLayer	Required under variant="clear".
GlassMorph	Tag a subtree for View Transitions morph.
LensFilters	SVG filter defs (mount once).
Sheet	Bottom sheet with detents + drag-to-snap.
NavigationBar	Top chrome; supports largeTitle collapse.
NavigationLink	Pill-style link.
TabView	Floating tab bar.
Button / IconButton	filled / outlined / plain / tinted / destructive.
Badge	default / accent.
Text	Dynamic-Type-aware text.
List / ListRow	Grouped list with insets.
HStack / VStack / ZStack / Grid / Spacer / Divider / ScrollView	Layout primitives.
SymbolImage	SVG icon renderer.

Actions

Export	Purpose
scrollEdge	Fade a scroll container at edges meeting glass chrome.
dragSnap	Detent-based drag gesture (used by Sheet).
deviceMotion	Ties the glass highlight angle to device tilt.
withGlassTransition	Wraps a DOM update in a view transition.
syncAccessibilityPreferences	Bridges prefers-* media to data-attrs at :root.
requestMotionPermission	Triggers the iOS user-gesture permission flow.

Device motion (opt-in)

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.

Icons

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

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

Accessibility

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.

Theming

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;
}

Browser support

Browser	Support
Chrome / Edge 111+	Full.
Safari 16.4+	Full, including native prefers-reduced-transparency.
Firefox 115+	Full. 103-114 works without edge lensing.
Older	Opaque fallback via @supports not.
SSR	All actions guard typeof window.

Build / test

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

License

MIT. See LICENSE.