Wave Mesh

Backgrounds 2

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={["#f3efe6", "#1b1a17", "#2f5fd0"]}
        crests={false}
        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-black/45">
            Vitrine Signal · v4
          </p>
          <p className="mt-3 max-w-lg text-3xl font-semibold tracking-tight sm:text-5xl text-[#1b1a17]">
            Every sensor on the coast, in one view.
          </p>
        </div>
      </WaveMesh>
    </div>
  );
}