Wavy Tide Background

Animated canvas waves that fill the container and drift with the pointer — a softer, SaaS-ready take on classic wavy backgrounds.

Add to your project

1Connect the Uniquel MCP

Connect Uniquel to your coding agent before using the component ID.

Connect MCP

2Copy the component ID

MCP ID

component:backgrounds/wavy-tide

Works with your AI tools

Claude*

Codex*

Lovable

Base44

Figma Make

Replit*

Cursor*

* Compatible with most projects that use the default React/Next.js framework.

Built With

React

Tailwind CSSCanvas API

Props

Prop	Type	Description
`children`	`ReactNode`	Content layered above the canvas (headline, CTA, etc.)
`className`	`string`	Styles for the content wrapper
`containerClassName`	`string`	Styles for the outer shell (size, layout)
`colors`	`string[]`	Wave layer colors (hex); falls back to a warm palette
`backgroundFill`	`string`	Solid color behind the waves (hex)
`waveWidth`	`number`	Stroke width of each wave line
`speed`	`'slow' \| 'fast'`	How quickly the waves drift
`waveOpacity`	`number`	Overall opacity of the wave layers (0–1)

More Backgrounds Components

Meteor Shower Background

Subtle canvas meteors drifting across a dark sky — a quiet animated background for heroes and landing sections.

Neon Flow Background

Staggered neon trails that sweep across a dark field — colors are prop-driven for easy theming.

Desert Dune Background

Soft layered waves in parallax drift — cool indigo tones by default, colors via props.

Aurora Background

Northern lights as folding canvas curtains: irregular ribbons and faint rays drifting across a night sky.

Background Grid

A static 3D background grid — a wireframe perspective grid that covers the full container, warped and bowed toward a vanishing point for depth. No animation, no layout shift.