Recursive Erosion Background

An animated WebGL background of a particle sphere that morphs, erodes into holes, and grows glowing trails crawling across its surface — a self-contained looping shader background for hero sections.

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

"use client";

import RecursiveErosionBackground from "@/components/ui/recursive-erosion";

export default function RecursiveErosionBackgroundDemo() {
  return (
    <div className="relative h-[480px] w-full overflow-hidden rounded-xl border border-border bg-background">
      <RecursiveErosionBackground mode="dark" className="h-full w-full" />
    </div>
  );
}