Wave Lines

Heroes 12

About

An animated canvas background of thin silky lines that ripple and part around the pointer, used as a decorative hero or section backdrop.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Wave Lines to your project and fits it to your theme.

Code

How Wave Lines is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { WaveLines } from "@/components/ui/wave-lines";

export default function WaveLinesDemo() {
  return (
    <div className="relative flex size-full min-h-80 items-center justify-center overflow-hidden">
      <p className="z-10 rounded-full border bg-background/80 px-4 py-1.5 text-sm font-medium backdrop-blur-sm">
        Wave Lines
      </p>
      <WaveLines className="[mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]" />
    </div>
  );
}