Tilted Tiles
A tilted grid of image columns that drift as you scroll
Customize
Props
28| Name | Type | Default | Description |
|---|---|---|---|
images | string[] | 10 photos | Image sources tiled across the plane. |
columns | number | 16 | Number of scrolling columns. |
tilesPerColumn | number | 5 | Tiles rendered per column before the loop repeats. |
tileAspect | number | 1 | Width divided by height of a single tile. |
rowGap | number | 8 | Vertical space between tiles in pixels. |
columnGap | number | 8 | Horizontal space between columns in pixels. |
borderRadius | number | 0 | Corner radius of each tile in pixels. |
perspective | number | 1600 | Perspective depth of the scene in pixels. |
rotateX | number | 40 | Degrees the plane leans back. |
rotateY | number | 16 | Degrees the plane turns sideways. |
rotateZ | number | -20 | Degrees the plane spins within its own surface. |
offsetX | number | -40 | Horizontal shift of the plane in pixels. |
offsetY | number | 0 | Vertical shift of the plane in pixels. |
offsetZ | number | 0 | Depth shift of the plane in pixels. |
planeWidth | number | 280 | Plane width as a percentage of the container. |
planeHeight | number | 260 | Plane height as a percentage of the container. |
stagger | number | 20 | Head start given to alternating columns, as a percentage of column width. |
duration | number | 25 | Seconds a column takes to travel one full loop. |
alternate | boolean | true | Send every other column in the opposite direction. |
fadeTop | number | 22 | Height of the top fade as a percentage of the plane. |
fadeBottom | number | 0 | Height of the bottom fade as a percentage of the plane. |
parallax | boolean | true | Let the pointer steer the plane. |
parallaxStrength | number | 8 | Maximum degrees the pointer can add to the tilt. |
pauseOnHover | boolean | false | Halt the scroll while the pointer rests on the plane. |
saturation | number | 1 | Saturation of the tiles, where 1 is untouched. |
width | number | string | "100%" | Width of the container. |
height | number | string | "100%" | Height of the container. |
className | string | "" | Additional CSS classes. |
imagesstring[]Image sources tiled across the plane.
10 photoscolumnsnumberNumber of scrolling columns.
16tilesPerColumnnumberTiles rendered per column before the loop repeats.
5tileAspectnumberWidth divided by height of a single tile.
1rowGapnumberVertical space between tiles in pixels.
8columnGapnumberHorizontal space between columns in pixels.
8borderRadiusnumberCorner radius of each tile in pixels.
0perspectivenumberPerspective depth of the scene in pixels.
1600rotateXnumberDegrees the plane leans back.
40rotateYnumberDegrees the plane turns sideways.
16rotateZnumberDegrees the plane spins within its own surface.
-20offsetXnumberHorizontal shift of the plane in pixels.
-40offsetYnumberVertical shift of the plane in pixels.
0offsetZnumberDepth shift of the plane in pixels.
0planeWidthnumberPlane width as a percentage of the container.
280planeHeightnumberPlane height as a percentage of the container.
260staggernumberHead start given to alternating columns, as a percentage of column width.
20durationnumberSeconds a column takes to travel one full loop.
25alternatebooleanSend every other column in the opposite direction.
truefadeTopnumberHeight of the top fade as a percentage of the plane.
22fadeBottomnumberHeight of the bottom fade as a percentage of the plane.
0parallaxbooleanLet the pointer steer the plane.
trueparallaxStrengthnumberMaximum degrees the pointer can add to the tilt.
8pauseOnHoverbooleanHalt the scroll while the pointer rests on the plane.
falsesaturationnumberSaturation of the tiles, where 1 is untouched.
1widthnumber | stringWidth of the container.
"100%"heightnumber | stringHeight of the container.
"100%"classNamestringAdditional CSS classes.
""