Sliced Waves

A grid of soft glowing bars rippling like a slatted equalizer.

Default

Every prop is wired to the controls underneath. The bars are drawn in a WebGL fragment shader and swell near the cursor.

Demo Content

FeaturesAbout Sign up

New Creative Components

A soft slatted wave rippling across the grid.

Get started Learn more

Customize

Color 1

Color 2

Color 3

Speed0.35

Travel0.7

Wave Spread0.9

Row Offset1

Columns14

Rows8

Bar Thickness0.1

Orientation

Softness0.05

Glow0

Brightness1

Contrast1

Opacity0.5

Alternate RowsCursor InteractionGrain

Grain Intensity0.05

Cursor Strength1

Cursor Radius0.3

API Reference

SlicedWaves

Prop	Type	Default	Description
`color1`	`string`	`'#FF9FFC'`	Highlight color for bars at the top of their travel.
`color2`	`string`	`'#5227FF'`	Deep color for bars at the bottom of their travel.
`color3`	`string`	`'#B497CF'`	Accent tint blended across the grid.
`columns`	`number`	`14`	Number of grid columns.
`rows`	`number`	`8`	Number of grid rows.
`barThickness`	`number`	`0.1`	Thickness of each bar relative to its cell.
`speed`	`number`	`0.35`	Animation speed of the travelling wave.
`travel`	`number`	`0.7`	How far each bar moves within its cell.
`waveSpread`	`number`	`0.9`	Phase step between columns; controls how tight the wave is.
`rowOffset`	`number`	`1.0`	Per-row phase offset that staggers the bars.
`softness`	`number`	`0.05`	Edge softness; higher values turn bars into glowing bands.
`glow`	`number`	`0`	Soft halo emitted around each bar.
`brightness`	`number`	`1.0`	Overall brightness of the bars.
`contrast`	`number`	`1.0`	Color contrast applied to the final render.
`opacity`	`number`	`0.5`	Overall opacity of the effect.
`orientation`	`string`	`'horizontal'`	Bar orientation: 'horizontal' slats move vertically, 'vertical' slats move horizontally.
`alternate`	`boolean`	`false`	Reverse the travel direction on alternating rows.
`mouseInteraction`	`boolean`	`true`	Enable cursor-proximity brightening and thickening.
`mouseStrength`	`number`	`1`	Strength of the cursor-proximity response.
`mouseRadius`	`number`	`0.3`	Radius of the cursor influence falloff.
`grain`	`boolean`	`true`	Adds a subtle animated grain.
`grainIntensity`	`number`	`0.05`	Amplitude of the grain overlay. 0 disables it entirely.
`lightMode`	`boolean`	`false`	Renders the effect over an opaque white background instead of a transparent one.

Accessibility

Keyboard shortcuts and ARIA behavior.

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

Silk Soft Aurora