Components
This React component generates an animated background using multiple SVG paths with varying colors and animations. The animation involves a dash offset effect creating the illusion of lines drawing and fading. It uses the motion library for smooth animations and accepts optional props to customize the animation duration.
Loading preview...
import { BackgroundLines } from "@/components/ui/animated-svg-background";
export default function DemoOne() {
return <BackgroundLines className="flex items-center justify-center w-full flex-col px-4">
<h2 className="bg-clip-text text-transparent text-center bg-gradient-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight">
Sanjana Airlines, <br /> Sajana Textiles.
</h2>
<p className="max-w-xl mx-auto text-sm md:text-lg text-neutral-700 dark:text-neutral-400 text-center">
Get the best advices from our experts, including expert artists,
painters, marathon enthusiasts and RDX, totally free.
</p>
</BackgroundLines>
}