Is Wave Lines free to use?

Yes. Wave Lines is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.

How do I install Wave Lines?

One command: npx shadcn@latest add https://aicanvas.me/r/wave-lines.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Wave Lines for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.

What is Wave Lines built with?

Wave Lines is built with React and TypeScript, using Canvas and Tailwind CSS. It ships with both light and dark styling.

Where would I use Wave Lines?

Common uses include Hero section, Landing page, and Section divider. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Wave Lines with AI?

Yes. Wave Lines ships with one comprehensive AI prompt written against the real source code. Open "Remix with AI" on this page to read and copy it into Claude, Cursor, ChatGPT, or any AI tool. Prompts are for remixing your own variation; for the exact component, install it with the one-command CLI.

Wave LinesAn animated line background.

BackgroundsHero sectionLanding pageSection divider

Wave Lineshover to fold

Add to your project

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/wave-lines

Free account required. Signed out, this installs a placeholder file instead of the component.

For dark mode, add the dark class to your <html> element:

Optional

<html class="dark">

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

Get MCP

About Wave Lines

Wave Lines is a canvas-driven background of densely packed vertical lines that breathe in two layered sine waves, so the rhythm never repeats. Move your cursor across it and the lines snap into a much wilder distortion that decays as you leave. The drawing loop is a single requestAnimationFrame tick over a 2D canvas with Tailwind for the surrounding chrome, so the component runs cool even on older laptops. It is built to anchor a hero section, sit behind a CTA, or fill an empty section divider without competing with foreground copy.

Built with

CanvasTailwind CSS

Frequently asked questions

Is Wave Lines free to use?: Yes. Wave Lines is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
How do I install Wave Lines?: One command: npx shadcn@latest add https://aicanvas.me/r/wave-lines.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Wave Lines for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
What is Wave Lines built with?: Wave Lines is built with React and TypeScript, using Canvas and Tailwind CSS. It ships with both light and dark styling.
Where would I use Wave Lines?: Common uses include Hero section, Landing page, and Section divider. Like every AI Canvas component, it is self-contained and drops into any React project.
Can I remix Wave Lines with AI?: Yes. Wave Lines ships with one comprehensive AI prompt written against the real source code. Open "Remix with AI" on this page to read and copy it into Claude, Cursor, ChatGPT, or any AI tool. Prompts are for remixing your own variation; for the exact component, install it with the one-command CLI.