Brand logoentauri

Add this component

npx zentauri-ui add glass-card

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Surfaces & interaction

Glass with a different dimension.

A translucent surface that responds to your perspective. Compose your content, choose a material, and let light do the rest.

Material studies / 001

Made of light.
Built for touch.

A quiet surface with another dimension. Move your cursor across the crystal to catch the light.

CSS-poweredNo canvasMotion-aware
ZENTAURI01 / ∞

The crystal collection

Beyond the surface.

Light. Form. Perspective.

Your material lab

Tune the feeling.

Use the page theme toggle to compare light and dark.

Zentauri / Studio

A different dimension.

Light, depth, and your content. A little perspective changes everything.

Explore the surface

Choose an appearance. Every card has its own pointer interaction.

default
subtle
contrast
cyan
violet
gradient-blue
glass

One primitive. Three materials.

Glass is soft and translucent. Crystal has sharper reflections and stronger edges. Frosted diffuses the background with a quieter highlight.

glass

Zentauri / Studio

A different dimension.

Light, depth, and your content. A little perspective changes everything.

Explore the surface

crystal

Zentauri / Studio

A different dimension.

Light, depth, and your content. A little perspective changes everything.

Explore the surface

frosted

Zentauri / Studio

A different dimension.

Light, depth, and your content. A little perspective changes everything.

Explore the surface

A simple glass surface

Zentauri / Studio

A different dimension.

Light, depth, and your content. A little perspective changes everything.

Explore the surface

Crystal edges and ambient light

Zentauri / Studio

A different dimension.

Light, depth, and your content. A little perspective changes everything.

Explore the surface

Frosted glass with a stronger tilt

Zentauri / Studio

A different dimension.

Light, depth, and your content. A little perspective changes everything.

Explore the surface

A still surface with usable controls

Zentauri / Studio

A different dimension.

Light, depth, and your content. A little perspective changes everything.

Explore the surface

Reduced motion, full content

Zentauri / Studio

A different dimension.

Light, depth, and your content. A little perspective changes everything.

Explore the surface

Movement is optional. Content is not.

Touch and coarse pointers keep the material without tilt. System reduced-motion settings always disable movement, even when reducedMotion is false. Disabled and interactive=false stop effects without disabling links or buttons inside the card.

Pointer updates use CSS variables and a short, damped animation loop that stops when settled. Floating is opt-in, runs only while visible, and pauses when the tab is hidden. No canvas, WebGL, or animation dependency is required.

Use ZuiGlassCard.Content to give content padding and depth. Without backdrop-filter support, the background, border, and shadows remain. Check text contrast against the background you place behind a translucent appearance.

Glass Card API

Generated from the package prop types and variant definitions.

GlassCard

GlassCardProps

Variants

PropTypeDefault
appearance
contrastcyandefaultglassgradient-bluesubtleviolet
default
size
lgmdsm
md
variant
crystalfrostedglass
glass

Behavior

PropTypeDefault
depthContent lift in pixels. Clamped to 0–60.number | undefined20
disabledDisable effects that move; child controls remain usable.boolean | undefinedfalse
floatingOpt into gentle floating while visible on a fine-pointer device.boolean | undefinedfalse
glareShow the pointer-following light.boolean | undefinedtrue
glareIntensityGlare opacity, from 0 to 1.number | undefined0.15
glowShow a soft ambient glow behind the surface.boolean | undefinedfalse
glowIntensityGlow opacity, from 0 to 1.number | undefined0.2
intensityMaximum tilt in degrees. Clamped to 0–30.number | undefined12
interactiveEnable pointer tilt and floating.boolean | undefinedtrue
perspectivePerspective distance in pixels. Clamped to 200–3000.number | undefined1000
reducedMotionForce motion off. OS reduced-motion preferences always take precedence.boolean | undefinedfalse
scaleScale while hovered. Clamped to 1–1.15.number | undefined1.02
Inherited HTML props
PropTypeDefault
childrenReactNodenone
classNamestring | undefinednone
idstring | undefinednone
onClickMouseEventHandler<HTMLDivElement> | undefinednone
styleCSSProperties | undefinednone
titlestring | undefinednone

GlassCardContent

GlassCardContentProps

Inherited HTML props
PropTypeDefault
childrenReactNodenone
classNamestring | undefinednone
idstring | undefinednone
onClickMouseEventHandler<HTMLDivElement> | undefinednone
styleCSSProperties | undefinednone
titlestring | undefinednone
CSS variable overrides

Glass Card CSS variables

Theme the glass surface, edges, reflection, glow, and each material. Motion is configured through props; private --_gc-* values are not a public token API.

44 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-glass-card-fg: #0f172a;
  --zui-glass-card-border: #ffffffb3;
  --zui-glass-card-highlight: #ffffffb3;
  --zui-glass-card-shadow: 0 20px 50px -18px #0f172a45;
  --zui-glass-card-glow: #0891b2;
  --zui-glass-card-glare: #ffffff;
  --zui-glass-card-bg: #ffffff99;
  --zui-glass-card-subtle-bg: #f1f5f9d9;
  --zui-glass-card-contrast-bg: #ffffffed;
  --zui-glass-card-cyan-bg: #cffafe99;
  --zui-glass-card-violet-bg: #ede9fe99;
  --zui-glass-card-gradient-blue-bg: linear-gradient(135deg,#cffafeb3,#e0e7ff99);
  --zui-glass-card-glass-bg: #ffffff59;
  --zui-glass-card-glass-blur: 16px;
  --zui-glass-card-glass-reflection: .35;
  --zui-glass-card-glass-edge-width: 1px;
  --zui-glass-card-crystal-blur: 8px;
  --zui-glass-card-crystal-reflection: .8;
  --zui-glass-card-crystal-edge-width: 2px;
  --zui-glass-card-frosted-blur: 24px;
  --zui-glass-card-frosted-reflection: .15;
  --zui-glass-card-frosted-edge-width: 1px;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-glass-card-fg-dark: #f1f5f9;
  --zui-glass-card-border-dark: #ffffff38;
  /* ...same variables with -dark at the end */
}

Overview

Import ZuiGlassCard from the glass-card entry and compose ZuiGlassCard.Content inside it. The root forwards div attributes and refs. Material variant, color appearance, and size can be chosen independently.

The defaults are intensity 12, perspective 1000, scale 1.02, glare true, glareIntensity 0.15, glow false, glowIntensity 0.2, depth 20, floating false, disabled false, and interactive true. Glare follows the cursor; glow is ambient. Floating requires a visible card and a fine hover pointer.

Consumers using Tailwind v4 must include the package in their @source scan so both light and dark token classes are generated. The static entry is safe to server-render, and all browser interaction is initialized after mounting.

Use the compound ZuiGlassCard.Content API inside a client component. In a Next.js Server Component, import the named GlassCardContent export instead; the server can compose the two client boundaries without accessing a client component property.

Common use cases

  • Feature and product highlights.
  • Membership and profile surfaces.
  • Interactive dashboards and portfolio cards.

FAQ

Does Glass Card require Framer Motion or WebGL?

No. It uses CSS transforms and gradients with frame-rate independent interpolation. It adds no animation dependency.

How does it behave on touch devices?

Touch pointers do not tilt the card. The glass appearance and all child controls remain available.

Can reduced motion be overridden?

No. OS reduced-motion preferences always take precedence. You can also set reducedMotion to true to force movement off.