Circle Gallery

Draggable circular carousel with inertia and 3D transforms

circle-gallery-tw

001

002

003

004

005

006

007

008

009

010

011

012

Customize

Tweak the props live

Layout

Circle Radius %15%

Item Width200px

Item Height250px

Item Scale0.85

Border Radius16px

Animation

Throw Resistance0.35

Animation Duration0.9s

Auto Spin (deg/s)5°/s

Interaction

Enable Drag

Show Numbers

Props

Name	Type	Default	Description
`images`	string[]	`[]`	Array of image URLs to display in the circular gallery
`radiusPercent`	number	`38`	Radius of the circle as a percentage of viewport (10-50)
`itemWidth`	number	`280`	Width of each gallery item in pixels
`itemHeight`	number	`400`	Height of each gallery item in pixels
`itemScale`	number	`0.85`	Scale factor for items (0.5-1.5)
`borderRadius`	number	`8`	Border radius for items in pixels
`enableDrag`	boolean	`true`	Enable drag rotation of the gallery
`throwResistance`	number	`0.35`	Throw resistance for inertia (0-1, lower = more momentum)
`animationDuration`	number	`0.9`	Duration for initial animation in seconds
`showNumbers`	boolean	`true`	Show item numbers on cards
`autoSpin`	number	`0`	Auto-spin speed in degrees per second (0 = disabled)
`className`	string	`""`	Additional CSS classes for the wrapper container
`itemClassName`	string	`""`	Additional CSS classes for each gallery item
`onItemClick`	(index: number, image: string) => void	`undefined`	Callback function when an item is clicked

imagesstring[]

Array of image URLs to display in the circular gallery

Default:[]

radiusPercentnumber

Radius of the circle as a percentage of viewport (10-50)

Default:38

itemWidthnumber

Width of each gallery item in pixels

Default:280

itemHeightnumber

Height of each gallery item in pixels

Default:400

itemScalenumber

Scale factor for items (0.5-1.5)

Default:0.85

borderRadiusnumber

Border radius for items in pixels

Default:8

enableDragboolean

Enable drag rotation of the gallery

Default:true

throwResistancenumber

Throw resistance for inertia (0-1, lower = more momentum)

Default:0.35

animationDurationnumber

Duration for initial animation in seconds

Default:0.9

showNumbersboolean

Show item numbers on cards

Default:true

autoSpinnumber

Auto-spin speed in degrees per second (0 = disabled)

Default:0

classNamestring

Additional CSS classes for the wrapper container

Default:""

itemClassNamestring

Additional CSS classes for each gallery item

Default:""

onItemClick(index: number, image: string) => void

Callback function when an item is clicked

Default:undefined