# Fx Glass Surface

Floating glass navigation bar with blur and subtle bottom rim highlight.

- id: `fx-glass-surface`
- Page: https://agentic-ui-kit.com/components/fx-glass-surface
- Live preview: https://agentic-ui-kit.com/live/fx/fx-glass-surface

## Install

```bash
agentic-ui add fx-glass-surface
npx shadcn@4.17.0 add @agentic-ui/fx-glass-surface
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** backdrop-blur, specular-rim-border, light-reflection, unsupported-filter-fallback, panel-navbar-card-presets, theme-derived-contrast, personality-motion-gating, offscreen-pause
- **Intents:** communicate, navigate, explore-detail
- **Suits domains:** saas, ai-workspace, analytics, marketing, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Floating glass navigation bar with blur and subtle bottom rim highlight, Premium dark mode landing hero panel with specular glare and high contrast, Feature metric cards with animated sheen light sweep and inner specular border, High-legibility fallback surface when backdrop-filter is disabled or unsupported
- **Avoid when:** Dense data tables where transparent backgrounds cause visual interference, Complex multi-layered nested glass surfaces that degrade rendering performance, Placing low-contrast muted elements over glass without verified background luminosity
- **Preserve when adapting:** decorative-layers-aria-hidden, token-derived-glass-backgrounds, backdrop-filter-fallback-behavior, offscreen-pause-and-static-frame
- **Replace when adapting:** preset-and-blur-level, reflection-and-border-style, surface-content
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-foundation, lib-motion