Depth Card

Installation$

pnpm dlx @glinui/cli@latest add depth-card

Usage$

DepthCard is a "use client" component. It tilts based on cursor position with an optional glare effect. Works great for product showcases and interactive cards.

DepthLayer children float at four heights (depth 1 to 4) above the card face. As the card tilts toward the pointer, the avatar, price tag and badge shift against the face, and a glare sheen follows the cursor. autoPlay runs a slow synthetic pointer for touch and screenshots.

Examples$

Variants$

glinr is the default, plain is the flat shadcn look, solid is a neutral tonal face and glass is opt-in. Glass needs a backdrop, so the set below sits on a vivid one.

import { DepthCard, DepthLayer } from "@glinui/ui"
// Omit variant to follow the ambient style (glinr by default).
export function DepthCardVariants() {

import { DepthCard, DepthLayer } from "@glinui/ui"


// Omit variant to follow the ambient style (glinr by default).
export function DepthCardVariants() {
return (
  <>
    <DepthCard variant="glinr">
      ...
    </DepthCard>
    <DepthCard variant="plain">
      ...
    </DepthCard>
    <DepthCard variant="solid">
      ...
    </DepthCard>
    <DepthCard variant="glass">
      ...
    </DepthCard>
  </>
)
}

Colors$

Tones apply through the soft variant, so the face is tinted and the text stays AA.

import { DepthCard, DepthLayer } from "@glinui/ui"
export function DepthCardTones() {
return (

import { DepthCard, DepthLayer } from "@glinui/ui"


export function DepthCardTones() {
return (
  <DepthCard variant="soft" tone="success">
    ...
  </DepthCard>
)
}

In a layout$

Depth cards as metric tiles in a dashboard row.

// Depth cards as metric tiles in a dashboard row.
import { DepthCard, DepthLayer } from "@glinui/ui"
export function DepthCardLayout() {

// Depth cards as metric tiles in a dashboard row.
import { DepthCard, DepthLayer } from "@glinui/ui"


export function DepthCardLayout() {
return (
  <section className="grid gap-4 sm:grid-cols-3">
    ...
  </section>
)
}

Accessibility$

• The glare overlay is aria-hidden="true", invisible to assistive technologies.
• The card itself is a standard div with no implicit role; add role and keyboard handlers as needed.
• Content inside the card remains fully accessible.

Reduced Motion$

When prefers-reduced-motion: reduce is active, the tilt transform is disabled via motion-reduce:transform-none and the glare layer is hidden via motion-reduce:hidden.

API Reference$

Source$

import { DepthCard } from "@glinui/ui"