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-

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