StyleKit / Card Stack

CARD
STACK

3D layering with Z-axis depth. Cards that fan, lift, and breathe. Spatial dimension through perspective.

Card Stack

Hover to fan out

5 cards stacked with depth

Hover the stack to fan

Scroll

Primary Demo

Interactive Card Deck

Hover to fan the deck. Click any card to bring it to front. The stack always shows depth — you can feel there is more beneath.

Design

Visual Hierarchy

Cards establish depth through layering — the top card commands attention while lower cards provide context.

Interaction

Fan on Hover

On interaction, the stack fans out to reveal each card individually, inviting exploration.

Motion

Spring Physics

cubic-bezier(0.16,1,0.3,1) gives cards a natural, springy feel — fast start, soft landing.

Structure

Z-axis Depth

Scale + translateY + rotate work together to simulate genuine three-dimensional stacking.

System

Reorder by Click

Clicking any card brings it to the front, enabling natural deck-browsing interactions.

Deck Controls

Current top card

Visual Hierarchy

Index 0 of 4 — click any card in fanned state to reorder

The deck hover detection uses onMouseEnter/onMouseLeave on the container, not individual cards. This prevents flickering as the pointer moves between stacked elements.

Depth Mechanics

At Rest vs Fanned State

At Rest

Card 0 (top)scale(1.00), rotate(0deg)

Card 1scale(0.94), rotate(2deg), Y+10 X+5

Card 2scale(0.88), rotate(4deg), Y+20 X+10

Fanned Out

Card 0 (left)translateX(-88px) rotate(-10deg)

Card 1 (center)translateX(0) translateY(-8px) scale(0.88)

Card 2 (right)translateX(+88px) rotate(+10deg)

Transform Formula

At Rest (i = card index)

translateY(i × 8px)
translateX(i × 4px)
scale(1 − i × 0.05)
rotate(i × 1.5deg)
opacity(1 − i × 0.10)

Fanned Out

translateX((i − 2) × 68px)
translateY(i × −6px)
rotate((i − 2) × 8deg)
scale(0.90)
opacity(1.00)

Components

Button, Input, and Card Variants

Button Variants

Input Fields

Default

Focused

Teal Accent

Error State

3D Tilt Card — Hover Each

◈

Depth Layer

Z-axis perspective

⊕

Spring Snap

0.16,1,0.3,1 easing

◉

Hover Lift

24px shadow elevation

Color System

Six-Color Palette

Deep purple-black anchors every composition. Accent colors — purple, teal, pink, yellow — rotate across cards for visual variety without sacrificing cohesion.

Light Context

Deep Purple-Black

#1a1a2e

Near White

#f0f0f5

Purple

#6c5ce7

Teal

#00cec9

Pink

#fd79a8

Yellow

#ffeaa7

Dark Context

Deep Purple-Black

#1a1a2e

Near White

#f0f0f5

Purple

#6c5ce7

Teal

#00cec9

Pink

#fd79a8

Yellow

#ffeaa7

Use Cases

Where Card Stack Belongs

The stacked card pattern is most powerful when it replaces flat, dimensionless lists with content that has natural depth and order.

◐

Carousel

Replace flat carousels with stacked cards that convey depth. Users intuitively understand more content exists behind the top card.

▤

Deck Selection

Card games, flash cards, and quiz apps use physical deck metaphors. The stack signals a collection of discrete, selectable items.

→

Step-by-step

Progress through a multi-step flow by advancing through the deck. Completed steps slip beneath the current card, showing forward motion.

▣

Gallery

Photo galleries and portfolio showcases gain spatial richness when images are presented as a stack rather than a flat grid.

Design Rules

Do and Don't

Use scale(0.95) and scale(0.90) for visible depth layers

Offset each card 8px down and 4px right to signal depth

Apply cubic-bezier(0.16,1,0.3,1) for spring-like snap

Keep the top card fully opaque; reduce opacity 10% per layer

Lift the hovered card with a dramatic shadow increase

Limit visible stack depth to 3 cards maximum at rest

−

Don't

Never stack more than 5 cards — visual noise defeats depth

Never use linear easing — it feels mechanical and flat

Never make all cards fully visible at rest — mystery drives engagement

Never skip the rotation offset — it is the key spatial cue

Never use identical background colors across stacked cards

Never animate the Z-index directly — reorder with state, not transition

StyleKit / Card Stack

CARD
STACK

3D layering with Z-axis depth. Cards that fan, lift, and breathe. Spatial dimension through perspective.

Card Stack

Hover to fan out

5 cards stacked with depth

Hover the stack to fan

Scroll

Primary Demo

Interactive Card Deck

Hover to fan the deck. Click any card to bring it to front. The stack always shows depth — you can feel there is more beneath.

Design

Visual Hierarchy

Cards establish depth through layering — the top card commands attention while lower cards provide context.

Interaction

Fan on Hover

On interaction, the stack fans out to reveal each card individually, inviting exploration.

Motion

Spring Physics

cubic-bezier(0.16,1,0.3,1) gives cards a natural, springy feel — fast start, soft landing.

Structure

Z-axis Depth

Scale + translateY + rotate work together to simulate genuine three-dimensional stacking.

System

Reorder by Click

Clicking any card brings it to the front, enabling natural deck-browsing interactions.

Deck Controls

Current top card

Visual Hierarchy

Index 0 of 4 — click any card in fanned state to reorder

The deck hover detection uses onMouseEnter/onMouseLeave on the container, not individual cards. This prevents flickering as the pointer moves between stacked elements.

Depth Mechanics

At Rest vs Fanned State

At Rest

Card 0 (top)scale(1.00), rotate(0deg)

Card 1scale(0.94), rotate(2deg), Y+10 X+5

Card 2scale(0.88), rotate(4deg), Y+20 X+10

Fanned Out

Card 0 (left)translateX(-88px) rotate(-10deg)

Card 1 (center)translateX(0) translateY(-8px) scale(0.88)

Card 2 (right)translateX(+88px) rotate(+10deg)

Transform Formula

At Rest (i = card index)

translateY(i × 8px)
translateX(i × 4px)
scale(1 − i × 0.05)
rotate(i × 1.5deg)
opacity(1 − i × 0.10)

Fanned Out

translateX((i − 2) × 68px)
translateY(i × −6px)
rotate((i − 2) × 8deg)
scale(0.90)
opacity(1.00)

Components

Button, Input, and Card Variants

Button Variants

Input Fields

Default

Focused

Teal Accent

Error State

3D Tilt Card — Hover Each

◈

Depth Layer

Z-axis perspective

⊕

Spring Snap

0.16,1,0.3,1 easing

◉

Hover Lift

24px shadow elevation

Color System

Six-Color Palette

Deep purple-black anchors every composition. Accent colors — purple, teal, pink, yellow — rotate across cards for visual variety without sacrificing cohesion.

Light Context

Deep Purple-Black

#1a1a2e

Near White

#f0f0f5

Purple

#6c5ce7

Teal

#00cec9

Pink

#fd79a8

Yellow

#ffeaa7

Dark Context

Deep Purple-Black

#1a1a2e

Near White

#f0f0f5

Purple

#6c5ce7

Teal

#00cec9

Pink

#fd79a8

Yellow

#ffeaa7

Use Cases

Where Card Stack Belongs

The stacked card pattern is most powerful when it replaces flat, dimensionless lists with content that has natural depth and order.

◐

Carousel

Replace flat carousels with stacked cards that convey depth. Users intuitively understand more content exists behind the top card.

▤

Deck Selection

Card games, flash cards, and quiz apps use physical deck metaphors. The stack signals a collection of discrete, selectable items.

→

Step-by-step

Progress through a multi-step flow by advancing through the deck. Completed steps slip beneath the current card, showing forward motion.

▣

Gallery

Photo galleries and portfolio showcases gain spatial richness when images are presented as a stack rather than a flat grid.

Design Rules

Do and Don't

Use scale(0.95) and scale(0.90) for visible depth layers

Offset each card 8px down and 4px right to signal depth

Apply cubic-bezier(0.16,1,0.3,1) for spring-like snap

Keep the top card fully opaque; reduce opacity 10% per layer

Lift the hovered card with a dramatic shadow increase

Limit visible stack depth to 3 cards maximum at rest

−

Don't

Never stack more than 5 cards — visual noise defeats depth

Never use linear easing — it feels mechanical and flat

Never make all cards fully visible at rest — mystery drives engagement

Never skip the rotation offset — it is the key spatial cue

Never use identical background colors across stacked cards

Never animate the Z-index directly — reorder with state, not transition

CARDSTACK

Interactive Card Deck

Deck Controls

At Rest vs Fanned State

Button, Input, and Card Variants

Six-Color Palette

Where Card Stack Belongs

Do and Don't

CARDSTACK

Interactive Card Deck

Deck Controls

At Rest vs Fanned State

Button, Input, and Card Variants

Six-Color Palette

Where Card Stack Belongs

Do and Don't

CARD
STACK

CARD
STACK