Wave Mesh

Backgrounds 3

About

An animated canvas background of a perspective field of dots rolling toward the horizon like a slow sea, with a soft hill that follows the pointer and expanding rings on click.

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

Code

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

Usage.tsx

"use client";

import WaveMesh from "@/components/ui/wave-mesh";

export default function Demo() {
  return (
    <div className="w-full h-screen">
      <WaveMesh
        colors={["#07080c", "#8f97a8", "#ff8a4c"]}
        crests={true}
        className="h-full min-h-full w-full"
      >
        <div className="pointer-events-none flex h-full flex-col items-center px-6 pt-[14%] text-center">
          <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-white/50">
            Vitrine Signal · v4
          </p>
          <p className="mt-3 max-w-lg text-3xl font-semibold tracking-tight sm:text-5xl text-white">
            Every sensor on the coast, in one view.
          </p>
        </div>
      </WaveMesh>
    </div>
  );
}