PaceUI

Intro

Agents

Crafts

Charts

Animated Stack

Stacked task and notification cards that dynamically expand on hover with smooth cubic bezier physics and auto-collapse timers.

When to use

Cascading toast stacks, background task lists, and build pipelines.
Minimizing screen real estate by stacking overlapping cards until the user hovers to view the full queue.
Dynamic live streams of incoming events or system progress notifications.

When not to use

Static non-interactive list views where all items should remain visible at all times.
Large cards that exceed the container height when expanded.

API Reference

AnimatedStackProps

Prop	Type	Default	Description
`children`	`ReactNode`	—	The card or task items to stack together.
`visibleCount`	`number`	`3`	Number of cards previewed in the resting stacked state.
`gap`	`number`	`8`	Spacing in pixels between cards when hovered and fully expanded.
`offset`	`number`	`8`	Offset in pixels per stacked card level when collapsed.
`direction`	`"up" \| "down"`	`"up"`	Direction the stack expands towards upon hovering.
`collapseDelayMs`	`number`	`1500`	Delay in milliseconds before collapsing after pointer leave.
`className`	`string`	—	Additional CSS class names.

Motion

Smooth cubic bezier easing curve [0.76, 0, 0.24, 1] with 0.8s duration.
Calculates dynamic bounding height to prevent abrupt layout jumping of surrounding elements.