Lenticular Carousel

A gallery whose cards turn over like a lenticular print

lenticular-carousel-tw

Customize

Card Width

260

Gap

Border Radius

Strips

Sweep

0.60

Refraction

0.32

Ridge

0.50

Foil

0.50

Foil Scale

8.0

Scrim

0.85

Tilt

14°

Travel

0.64

Lift

Perspective

1200

Inactive Scale

0.90

Inactive Dim

0.55

Speed

1.0

Label Color

Show LabelsShow ControlsShow DotsLoopAutoplayEnable DragPaused

Props

Name	Type	Default	Description
`items`	LenticularCarouselItem[]	`8 sample slides`	Slides rendered by the carousel
`initialIndex`	number	`2`	Slide focused on mount
`cardWidth`	number	`260`	Slide width in pixels
`aspectRatio`	string	`"3 / 4"`	Aspect ratio of each slide
`gap`	number	`26`	Space between slides in pixels
`borderRadius`	number	`14`	Corner radius of the slides in pixels
`strips`	number	`56`	Number of lens ribs printed across a slide
`sweep`	number	`0.6`	How far the turn lags across the slide, raking the wipe
`refraction`	number	`0.32`	Parallax the two faces pick up as the lens turns
`ridge`	number	`0.5`	Shading and glint strength of the lens ribs
`foil`	number	`0.5`	Strength of the holographic foil on the revealed face
`foilScale`	number	`8`	Number of foil shimmer bands across a slide
`scrim`	number	`0.85`	Darkening under the label from 0 to 1
`tilt`	number	`14`	Degrees the slide turns while flipped
`travel`	number	`0.64`	Fraction of the slide width the cursor sweeps to turn the lens fully
`lift`	number	`40`	Distance in pixels the slide travels toward the viewer while flipped
`perspective`	number	`1200`	Camera distance in pixels
`inactiveScale`	number	`0.9`	Scale applied to slides away from the focus
`inactiveDim`	number	`0.55`	Brightness of slides away from the focus from 0 to 1
`speed`	number	`1`	Multiplier for every transition
`trigger`	"hover" \| "focus"	`"hover"`	What turns a slide over. Falls back to focus on touch devices
`showLabels`	boolean	`true`	Print the label on the revealed face
`labelColor`	string	`"#ffffff"`	Label colour in hex
`showControls`	boolean	`true`	Show the previous and next buttons
`showDots`	boolean	`true`	Show the segmented progress rail
`loop`	boolean	`false`	Wrap around at either end
`autoplay`	boolean	`false`	Advance on a timer
`autoplayDelay`	number	`3200`	Delay between automatic advances in milliseconds
`enableDrag`	boolean	`true`	Allow dragging across the strip to navigate
`enableKeyboard`	boolean	`true`	Allow arrow keys to navigate when focused
`dpr`	number	`2`	Upper bound on device pixel ratio
`paused`	boolean	`false`	Hold the foil still
`className`	string	`-`	Additional CSS classes
`onIndexChange`	(index: number) => void	`-`	Fired whenever the focused slide changes

itemsLenticularCarouselItem[]

Slides rendered by the carousel

Default8 sample slides

initialIndexnumber

Slide focused on mount

Default2

cardWidthnumber

Slide width in pixels

Default260

aspectRatiostring

Aspect ratio of each slide

Default"3 / 4"

gapnumber

Space between slides in pixels

Default26

borderRadiusnumber

Corner radius of the slides in pixels

Default14

stripsnumber

Number of lens ribs printed across a slide

Default56

sweepnumber

How far the turn lags across the slide, raking the wipe

Default0.6

refractionnumber

Parallax the two faces pick up as the lens turns

Default0.32

ridgenumber

Shading and glint strength of the lens ribs

Default0.5

foilnumber

Strength of the holographic foil on the revealed face

Default0.5

foilScalenumber

Number of foil shimmer bands across a slide

Default8

scrimnumber

Darkening under the label from 0 to 1

Default0.85

tiltnumber

Degrees the slide turns while flipped

Default14

travelnumber

Fraction of the slide width the cursor sweeps to turn the lens fully

Default0.64

liftnumber

Distance in pixels the slide travels toward the viewer while flipped

Default40

perspectivenumber

Camera distance in pixels

Default1200

inactiveScalenumber

Scale applied to slides away from the focus

Default0.9

inactiveDimnumber

Brightness of slides away from the focus from 0 to 1

Default0.55

speednumber

Multiplier for every transition

Default1

trigger"hover" | "focus"

What turns a slide over. Falls back to focus on touch devices

Default"hover"

showLabelsboolean

Print the label on the revealed face

Defaulttrue

labelColorstring

Label colour in hex

Default"#ffffff"

showControlsboolean

Show the previous and next buttons

Defaulttrue

showDotsboolean

Show the segmented progress rail

Defaulttrue

loopboolean

Wrap around at either end

Defaultfalse

autoplayboolean

Advance on a timer

Defaultfalse

autoplayDelaynumber

Delay between automatic advances in milliseconds

Default3200

enableDragboolean

Allow dragging across the strip to navigate

Defaulttrue

enableKeyboardboolean

Allow arrow keys to navigate when focused

Defaulttrue

dprnumber

Upper bound on device pixel ratio

Default2

pausedboolean

Hold the foil still

Defaultfalse

classNamestring

Additional CSS classes

Default-

onIndexChange(index: number) => void

Fired whenever the focused slide changes

Default-