Tilted Tiles

A tilted wall of image columns scrolling past

tilted-tiles-tw

Customize

Columns

Tiles Per Column

Duration

Rotate X

Rotate Y

Rotate Z

-20

Perspective

1600

Plane Width

280

Stagger

Row Gap

Column Gap

Border Radius

Fade Top

Saturation

1.00

Alternate DirectionParallaxPause On Hover

Props

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.

Default10 photos

columnsnumber

Number of scrolling columns.

Default16

tilesPerColumnnumber

Tiles rendered per column before the loop repeats.

Default5

tileAspectnumber

Width divided by height of a single tile.

Default1

rowGapnumber

Vertical space between tiles in pixels.

Default8

columnGapnumber

Horizontal space between columns in pixels.

Default8

borderRadiusnumber

Corner radius of each tile in pixels.

Default0

perspectivenumber

Perspective depth of the scene in pixels.

Default1600

rotateXnumber

Degrees the plane leans back.

Default40

rotateYnumber

Degrees the plane turns sideways.

Default16

rotateZnumber

Degrees the plane spins within its own surface.

Default-20

offsetXnumber

Horizontal shift of the plane in pixels.

Default-40

offsetYnumber

Vertical shift of the plane in pixels.

Default0

offsetZnumber

Depth shift of the plane in pixels.

Default0

planeWidthnumber

Plane width as a percentage of the container.

Default280

planeHeightnumber

Plane height as a percentage of the container.

Default260

staggernumber

Head start given to alternating columns, as a percentage of column width.

Default20

durationnumber

Seconds a column takes to travel one full loop.

Default25

alternateboolean

Send every other column in the opposite direction.

Defaulttrue

fadeTopnumber

Height of the top fade as a percentage of the plane.

Default22

fadeBottomnumber

Height of the bottom fade as a percentage of the plane.

Default0

parallaxboolean

Let the pointer steer the plane.

Defaulttrue

parallaxStrengthnumber

Maximum degrees the pointer can add to the tilt.

Default8

pauseOnHoverboolean

Halt the scroll while the pointer rests on the plane.

Defaultfalse

saturationnumber

Saturation of the tiles, where 1 is untouched.

Default1

widthnumber | string

Width of the container.

Default"100%"

heightnumber | string

Height of the container.

Default"100%"

classNamestring

Additional CSS classes.

Default""

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.