Truchet Weave Background

An animated full-bleed canvas background of interlocking Truchet arc tiles whose orientation follows a slow shifting field, creating pale seams that ripple and re-route around the cursor.

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

import TruchetWeave from "@/components/ui/background-truchet-weave";

export default function Demo() {
  return (
    <div className="relative h-screen w-full bg-background text-foreground">
      <TruchetWeave className="absolute inset-0" />
    </div>
  );
}