Circle Stack

A tilted stack of circles that cycles through your images

circle-stack-tw

Customize

Disc Size

410px

Tilt

60°

Stack Gap

45px

Border Width

2px

Interval

4.0s

Transition Duration

0.90s

Paused

Surface Color

Border Color

Props

Name	Type	Default	Description
`items`	CircleStackItem[]	`3 sample images`	Discs to render. Each item: { id?, image, alt? }.
`size`	number	`410`	Diameter of each disc in pixels.
`tilt`	number	`60`	Disc tilt in degrees. 0 = flat circle, 90 = edge-on.
`stackGap`	number	`45`	Vertical separation between adjacent discs in pixels.
`interval`	number	`4`	Seconds between active-index advances.
`transitionDuration`	number	`0.9`	Seconds for the lift / settle transition.
`paused`	boolean	`false`	Pause the auto-cycle.
`surfaceColor`	string	`"#FFFFFF"`	CSS color for the disc surface (top face).
`borderColor`	string	`"#000000"`	CSS color for the disc border ring.
`borderWidth`	number	`1`	Border thickness in pixels.
`className`	string	`undefined`	Class applied to the root element.
`style`	CSSProperties	`undefined`	Inline style applied to the root element.
`onActiveChange`	(index: number) => void	`undefined`	Fires when the active disc index changes.

itemsCircleStackItem[]

Discs to render. Each item: { id?, image, alt? }.

Default3 sample images

sizenumber

Diameter of each disc in pixels.

Default410

tiltnumber

Disc tilt in degrees. 0 = flat circle, 90 = edge-on.

Default60

stackGapnumber

Vertical separation between adjacent discs in pixels.

Default45

intervalnumber

Seconds between active-index advances.

Default4

transitionDurationnumber

Seconds for the lift / settle transition.

Default0.9

pausedboolean

Pause the auto-cycle.

Defaultfalse

surfaceColorstring

CSS color for the disc surface (top face).

Default"#FFFFFF"

borderColorstring

CSS color for the disc border ring.

Default"#000000"

borderWidthnumber

Border thickness in pixels.

Default1

classNamestring

Class applied to the root element.

Defaultundefined

styleCSSProperties

Inline style applied to the root element.

Defaultundefined

onActiveChange(index: number) => void

Fires when the active disc index changes.

Defaultundefined