Signature / Moleculestable

Depth Card

Parallax tilt card with layered glass planes and glare effect on hover.

@glinui/uiComponent: depth-card

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

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.

Basic$

Glass Surface

Hover to see the parallax tilt and glare effect in action.

TSX

1"use client"
2import { DepthCard } from "@glinui/ui"
3
4export function DepthCardDemo() {
5return (
6  <DepthCard className="max-w-sm bg-neutral-900/50 p-8">
7    <h3 className="text-lg font-semibold text-white">Glass Surface</h3>
8    <p className="mt-2 text-sm text-neutral-300">
9      Hover to see the parallax tilt and glare effect in action.
10    </p>
11  </DepthCard>
12)
13}

Examples$

Strong Tilt$

Increase maxTilt for a more dramatic parallax effect.

Strong Tilt

25° max tilt with 1.05x hover scale.

TSX

1"use client"
2import { DepthCard } from "@glinui/ui"
3
4export function DepthCardStrongDemo() {
5return (
6  <DepthCard maxTilt={25} hoverScale={1.05} className="max-w-sm bg-neutral-900/50 p-8">
7    <h3 className="text-lg font-semibold text-white">Strong Tilt</h3>
8    <p className="mt-2 text-sm text-neutral-300">25° max tilt with 1.05x hover scale.</p>
9  </DepthCard>
10)
11}

No Glare$

Set glare={false} to disable the glare overlay.

No Glare

Parallax tilt without the glare effect.

TSX

1"use client"
2import { DepthCard } from "@glinui/ui"
3
4export function DepthCardNoGlareDemo() {
5return (
6  <DepthCard glare={false} className="max-w-sm bg-neutral-900/50 p-8">
7    <h3 className="text-lg font-semibold text-white">No Glare</h3>
8    <p className="mt-2 text-sm text-neutral-300">Parallax tilt without the glare effect.</p>
9  </DepthCard>
10)
11}

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$

Prop	Type	Required	Default	Description
`glare`	`boolean`	No	`true`	Glare effect
`glareOpacity`	`number`	No	`0.2`	Glare max opacity
`hoverScale`	`number`	No	`1.02`	Scale on hover
`maxTilt`	`number`	No	`15`	Maximum tilt angle in degrees
`perspective`	`number`	No	`800`	Perspective distance in px

Source$

TSX

1import { DepthCard } from "@glinui/ui"

packages/ui/src/components/depth-card.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/depth-card.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

DepthCardProps

`DepthCardProps`

Prop	Type	Required	Default	Description
`glare`	`boolean`	No	`true`	Glare effect
`glareOpacity`	`number`	No	`0.2`	Glare max opacity
`hoverScale`	`number`	No	`1.02`	Scale on hover
`maxTilt`	`number`	No	`15`	Maximum tilt angle in degrees
`perspective`	`number`	No	`800`	Perspective distance in px