Animated Infinity Background

It uses Framer Motion to generate a captivating animation of endlessly drawing and fading SVG infinity loops. The component centers on an animated title with a letter-by-letter reveal effect and supports an optional subtitle.

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

import { BackgroundPaths } from "@/components/ui/animated-infinity-background";

export default function DemoOne() {
    return (
        <BackgroundPaths 
            title="Infinity Design" 
            subtitle="Endless possibilities in motion"
            titleBackground={true}
            backgroundStyle="gradient" // Try "glass", "gradient", "solid", or "glow"
        />
    );
}