GlassSurface

Liquid glass surface with backdrop blur, five thickness tiers (ultrathin → ultrathick), 10-step tint scale, and automatic dark mode inversion.

Installation

# Install @opencosmos/ui to use GlassSurface
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

active— Whether the frosted glass effect is active

position— Shadow direction: top casts downward, bottom casts upward

thickness— Glass opacity tier (ultrathin 28% → ultrathick 68%)

tint— Glass fill color for light mode: 0 = white, 9 = black

Usage

Import

import { GlassSurface } from '@opencosmos/ui';

Example

<GlassSurface>
  Content
</GlassSurface>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
active	boolean	true	Whether the frosted glass effect is active
position	top \| bottom	"top"	Shadow direction: top casts downward, bottom casts upward
thickness	ultrathin \| thin \| medium \| thick \| ultrathick	"thin"	Glass opacity tier (ultrathin 28% → ultrathick 68%)
tint	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9	"2"	Glass fill color for light mode: 0 = white, 9 = black

Accessibility

Glass effect is purely visual — content remains fully readable
No motion animations to reduce; effect is CSS-only (backdrop-filter)
Ensure sufficient contrast between text and glass background

Examples

Ultrathin (28%)

ultrathin

Thin (38%)

thin

Medium (48%)

medium

Thick (58%)

thick

Ultrathick (68%)

ultrathick

Code Examples

Basic Usage

Frosted glass navigation bar

import { GlassSurface } from "@opencosmos/ui"

<GlassSurface thickness="medium" tint={2}>
  <nav className="p-4">Navigation content</nav>
</GlassSurface>

Bottom Position

Glass surface for bottom-positioned elements

<GlassSurface position="bottom" thickness="thin">
  <footer className="p-4">Footer content</footer>
</GlassSurface>