Circle Stack

A tilted stack of circles that cycles through your images

circle-stack-tw

Customize

Tweak the props live

Disc Size410px

Tilt60°

Stack Gap45px

Border Width2px

Interval4s

Transition Duration0.9s

Paused

Surface Color

#FFFFFF

Border Color

#000000

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? }.

Default:3 sample images

sizenumber

Diameter of each disc in pixels.

Default:410

tiltnumber

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

Default:60

stackGapnumber

Vertical separation between adjacent discs in pixels.

Default:45

intervalnumber

Seconds between active-index advances.

Default:4

transitionDurationnumber

Seconds for the lift / settle transition.

Default:0.9

pausedboolean

Pause the auto-cycle.

Default:false

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.

Default:1

classNamestring

Class applied to the root element.

Default:undefined

styleCSSProperties

Inline style applied to the root element.

Default:undefined

onActiveChange(index: number) => void

Fires when the active disc index changes.

Default:undefined