Theme

Kinetic Tiles

Pro

A rolling field of softly beveled ceramic tiles.

Loading code...

Starwind Dependencies

This component requires Starwind Pro.

Get lifetime access to all premium components, updates, and priority support.

Upgrade to Pro

Failed to load code. Please try again.

Code

Usage

<ShaderKineticTiles
  backdropColor="#eee7dc"
  tileColor="#e4ddce"
  fogDistance={1}
  tileRoughness={0.4}
  waveHeight={2.2}
  waveTravelDistance={1}
  waveDrift={0.35}
  opacity={1}
/>

Props

prop	type	default	description
`waveHeight`	`number`	`2.2`	Wave height amount.
`waveDrift`	`number`	`0.35`	Wave drift amount.
`waveTravelDistance`	`number`	`1`	Travel multiplier. One crosses the viewport with room for the crest.
`tileColor`	`string`	`"#e4ddce"`	Tile CSS color.
`backdropColor`	`string`	`"#eee7dc"`	Backdrop CSS color.
`opacity`	`number`	`1`	Effect opacity.
`maxDpr`	`number`	`1.5`	Maximum device pixel ratio.
`tileRoughness`	`number`	`0.4`	Surface roughness from polished to matte.
`fogDistance`	`number`	`1`	Distance before the tile field fades into the background.