Reel Gallery
Tilted reels of images that glide as you scroll
Customize
Props
32| Name | Type | Default | Description |
|---|---|---|---|
images | string[] | 10 stock photos | Image URLs spread across the reels. |
rows | number | 6 | Number of stacked reels. |
rowHeight | number | 92 | Height of every plate in pixels. |
rowGap | number | 20 | Vertical space between reels in pixels. |
itemGap | number | 16 | Horizontal space between plates in pixels. |
maxAspect | number | 2 | Widest a plate may get, as a multiple of its height. |
minAspect | number | 0.6 | Narrowest a plate may get, as a multiple of its height. |
maxFps | number | 60 | Highest frame rate the reels redraw at. |
tilt | number | 7 | Angle the whole stack leans by, in degrees. |
arch | number | 48 | How far each reel arches across the frame, in pixels. |
speed | number | 1 | Master multiplier on how far input travels. |
speedVariance | number | 0.55 | How much reel speeds differ from one another, 0 to 1. |
alternate | boolean | false | Send every other reel the opposite way. |
autoScroll | number | 26 | Pixels per second the reels drift on their own. |
inertia | number | 0.92 | How long a flick keeps gliding, 0 to 1. |
damping | number | 0.1 | How quickly the reels catch up to input, 0 to 1. |
dragSensitivity | number | 1.6 | How far a drag pushes the reels. |
wheelSensitivity | number | 1 | How far a wheel notch pushes the reels. |
radius | number | 10 | Corner radius of a plate in pixels. |
grayscale | number | 0.55 | How desaturated plates sit at rest, 0 to 1. |
focusRadius | number | 210 | Radius of the colour spotlight under the cursor, in pixels. |
focusStrength | number | 0.85 | How much the spotlight restores colour and light, 0 to 1. |
brightness | number | 1 | Overall brightness of the plates. |
dpr | number | 1.25 | Pixel ratio ceiling. |
fade | number | 0.12 | How far the left and right edges fade out, 0 to 0.5. |
dim | number | 0.35 | How much the outer reels dim, 0 to 1. |
taper | number | 0.12 | How much the outer reels shrink, 0 to 1. |
backgroundColor | string | "transparent" | Backdrop colour behind the reels. |
interactive | boolean | true | Let the wheel, drag and arrow keys drive the reels. |
paused | boolean | false | Freeze the drift. |
className | string | - | Extra classes for the wrapper. |
children | ReactNode | - | Content layered above the reels. |
imagesstring[]Image URLs spread across the reels.
10 stock photosrowsnumberNumber of stacked reels.
6rowHeightnumberHeight of every plate in pixels.
92rowGapnumberVertical space between reels in pixels.
20itemGapnumberHorizontal space between plates in pixels.
16maxAspectnumberWidest a plate may get, as a multiple of its height.
2minAspectnumberNarrowest a plate may get, as a multiple of its height.
0.6maxFpsnumberHighest frame rate the reels redraw at.
60tiltnumberAngle the whole stack leans by, in degrees.
7archnumberHow far each reel arches across the frame, in pixels.
48speednumberMaster multiplier on how far input travels.
1speedVariancenumberHow much reel speeds differ from one another, 0 to 1.
0.55alternatebooleanSend every other reel the opposite way.
falseautoScrollnumberPixels per second the reels drift on their own.
26inertianumberHow long a flick keeps gliding, 0 to 1.
0.92dampingnumberHow quickly the reels catch up to input, 0 to 1.
0.1dragSensitivitynumberHow far a drag pushes the reels.
1.6wheelSensitivitynumberHow far a wheel notch pushes the reels.
1radiusnumberCorner radius of a plate in pixels.
10grayscalenumberHow desaturated plates sit at rest, 0 to 1.
0.55focusRadiusnumberRadius of the colour spotlight under the cursor, in pixels.
210focusStrengthnumberHow much the spotlight restores colour and light, 0 to 1.
0.85brightnessnumberOverall brightness of the plates.
1dprnumberPixel ratio ceiling.
1.25fadenumberHow far the left and right edges fade out, 0 to 0.5.
0.12dimnumberHow much the outer reels dim, 0 to 1.
0.35tapernumberHow much the outer reels shrink, 0 to 1.
0.12backgroundColorstringBackdrop colour behind the reels.
"transparent"interactivebooleanLet the wheel, drag and arrow keys drive the reels.
truepausedbooleanFreeze the drift.
falseclassNamestringExtra classes for the wrapper.
-childrenReactNodeContent layered above the reels.
-