Wave Mesh

Backgrounds 11

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";

const THEMES: Record<
  string,
  { c: [string, string, string]; crests: boolean; light: boolean }
> = {
  night: { c: ["#06070a", "#c9d6ea", "#f0b37a"], crests: false, light: false },
  paper: { c: ["#f3efe6", "#1b1a17", "#2f5fd0"], crests: false, light: true },
  signal: { c: ["#07080c", "#8f97a8", "#ff8a4c"], crests: true, light: false },
};

export default function Demo({ variant = "night" }: { variant?: string }) {
  const t = THEMES[variant] ?? THEMES.night;
  return (
    <div className="w-full h-screen">
      <WaveMesh
        colors={t.c}
        crests={t.crests}
        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] ${t.light ? "text-black/45" : "text-white/50"}`}
          >
            Vitrine Signal · v4
          </p>
          <p
            className={`mt-3 max-w-lg text-3xl font-semibold tracking-tight sm:text-5xl ${t.light ? "text-[#1b1a17]" : "text-white"}`}
          >
            Every sensor on the coast, in one view.
          </p>
        </div>
      </WaveMesh>
    </div>
  );
}