Micro Slats

A wall of tiny slats that becomes a rolling sea in perspective, with glinting crests, four presets, a real fluid the cursor stirs and an intro that rolls in from the horizon.

Default

Pick a preset, then tune the slats and the wave. The cursor stirs a fluid simulation that the slats follow.

Demo Content

FeaturesAbout Sign up

New Creative Components

A quiet pattern, drawn one slat at a time.

Get started Learn more

Customize

Preset

Color

Glint Color

Background

Slat Width10px

Slat Height25px

Gap3px

Roundness0.75

Speed0.6

Scale1.5

Direction250°

Chop0.55

Stretch0

Glint0.7

Contrast1.25

Perspective0.55

Fog0.55

Interactive

Cursor Strength1

Cursor Size40px

Swirl0

Trail1.4s

Lean0

Intro

Intro Duration1.5s

Paused

API Reference

MicroSlats

Prop	Type	Default	Description
`preset`	`'swell' \| 'tide' \| 'storm' \| 'signal'`	`'swell'`	A starting look for the sea. Every wave prop below overrides the preset value when you pass it. Signal turns the field into a flat, equalizer style wall.
`color`	`string`	`'#A855F7'`	Color of the slats.
`glintColor`	`string`	`'#ffffff'`	Color the slats shift towards on wave crests and in the light the cursor leaves.
`backgroundColor`	`string`	`'#000000'`	Color behind the slats. Pass transparent to show the page through.
`slatWidth`	`number`	`10`	Width of one slat in CSS pixels.
`slatHeight`	`number`	`25`	Full height of one slat in CSS pixels.
`gap`	`number`	`3`	Space between slats in CSS pixels.
`roundness`	`number`	`0.75`	Corner rounding of each slat, from square at 0 to a full pill at 1.
`scale`	`number`	`from preset`	Size of the swell. Larger values give longer, calmer waves.
`speed`	`number`	`from preset`	How fast the waves roll. 0 freezes the sea while the cursor can still stir it.
`direction`	`number`	`from preset`	Heading of the swell in degrees. 270 rolls straight towards the viewer.
`chop`	`number`	`from preset`	Sharpens the crests and flattens the troughs, like wind on the water.
`stretch`	`number`	`from preset`	How much each slat grows and shrinks with the wave under it. 0 keeps every slat full length.
`glint`	`number`	`from preset`	Strength of the light caught on the crests.
`contrast`	`number`	`from preset`	Spread between dark troughs and bright crests.
`perspective`	`number`	`from preset`	How far the sea recedes towards a horizon above the top edge. 0 is a flat wall.
`fog`	`number`	`from preset`	Haze that fades the far rows into the background.
`interactive`	`boolean`	`true`	Lets the cursor stir the water. Moving it pushes a real fluid that bends the swell and carries a swirling trail of light, and a click spins out a splash.
`cursorStrength`	`number`	`1`	Brightness of the light the cursor leaves in the water.
`cursorSize`	`number`	`40`	Radius of the patch of water the cursor pushes, in CSS pixels.
`swirl`	`number`	`0`	How strongly the stirred water curls into eddies.
`trail`	`number`	`1.4`	How long the stirred water and its light linger, in seconds.
`lean`	`number`	`0`	How far the slats tilt with the current. 0 keeps them upright.
`intro`	`boolean`	`true`	Rolls the sea in from the horizon on mount, unfolding the slats row by row.
`introDuration`	`number`	`1.5`	Length of the intro in seconds.
`paused`	`boolean`	`false`	Freezes the waves. The cursor can still stir the water.
`style`	`CSSProperties`	-	Inline styles for the root element.

Accessibility

Keyboard shortcuts and ARIA behavior.

Purely decorative canvas. Place it behind content with enough contrast.

Liquid Ether Molten Metal