Site

Mosaic

Mosaic effect with animated wave or video background

mosaic-tw

Customize

Tweak the props live

Source

Variant

Video URL

Mosaic

Pixel Size10

Border Intensity0.8

Appearance

Opacity1

Props

Name	Type	Default	Description
`width`	number \| string	`"100%"`	Width of the component in pixels or CSS value
`height`	number \| string	`"100%"`	Height of the component in pixels or CSS value
`speed`	number	`1.0`	Animation speed multiplier
`variant`	"shader" \| "video"	`"shader"`	Mosaic source variant
`videoSrc`	string	`""`	Video source URL (required when variant='video')
`color1`	string	`"#FF0033"`	Primary wave color in hex format
`color2`	string	`"#00FF66"`	Secondary wave color in hex format
`color3`	string	`"#0066FF"`	Accent wave color in hex format
`pixelSize`	number	`10`	Pixel/mosaic tile size (1-50)
`borderIntensity`	number	`0.8`	Mosaic border intensity (0-1)
`opacity`	number	`1.0`	Overall effect opacity (0-1)
`waveIntensity`	number	`1.0`	Wave intensity/amplitude (0-2)
`waveWidth`	number	`1.0`	Wave width/thickness (0.1-5)
`quality`	"low" \| "medium" \| "high"	`"high"`	Rendering quality level
`className`	string	`""`	Additional CSS classes
`children`	React.ReactNode	`undefined`	Content to render on top of the effect

widthnumber | string

Width of the component in pixels or CSS value

Default:"100%"

heightnumber | string

Height of the component in pixels or CSS value

Default:"100%"

speednumber

Animation speed multiplier

Default:1.0

variant"shader" | "video"

Mosaic source variant

Default:"shader"

videoSrcstring

Video source URL (required when variant='video')

Default:""

color1string

Primary wave color in hex format

Default:"#FF0033"

color2string

Secondary wave color in hex format

Default:"#00FF66"

color3string

Accent wave color in hex format

Default:"#0066FF"

pixelSizenumber

Pixel/mosaic tile size (1-50)

Default:10

borderIntensitynumber

Mosaic border intensity (0-1)

Default:0.8

opacitynumber

Overall effect opacity (0-1)

Default:1.0

waveIntensitynumber

Wave intensity/amplitude (0-2)

Default:1.0

waveWidthnumber

Wave width/thickness (0.1-5)

Default:1.0

quality"low" | "medium" | "high"

Rendering quality level

Default:"high"

classNamestring

Additional CSS classes

Default:""

childrenReact.ReactNode

Content to render on top of the effect

Default:undefined