Components
Background Lines
Background Lines
Animated grid background with floating particles and gradient overlays.
Form Design Template
Replace this with your custom animated form design
Name: Alex Morgan
Installation
1
Install the packages
npm i motion clsx tailwind-merge2
Add util file
lib/util.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3
Copy and paste the following code into your project
background-lines.tsx
"use client";
import React from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";
export function BackgroundLines() {
return (
<div className="relative flex items-center justify-center w-full flex-col px-4 py-20 bg-white dark:bg-black overflow-hidden">
{/* Animated background lines */}
<div className="absolute inset-0 w-full h-full">
{Array.from({ length: 12 }).map((_, i) => (
<motion.div
key={i}
className="absolute h-full w-px bg-gradient-to-b from-transparent via-emerald-500/30 to-transparent"
style={{
left: `${(i + 1) * 8.33}%`,
}}
animate={{
opacity: [0.3, 0.8, 0.3],
scaleY: [0.8, 1.2, 0.8],
}}
transition={{
duration: 3 + i * 0.2,
repeat: Infinity,
ease: "easeInOut",
delay: i * 0.1,
}}
/>
))}
{/* Horizontal lines */}
{Array.from({ length: 8 }).map((_, i) => (
<motion.div
key={`h-${i}`}
className="absolute w-full h-px bg-gradient-to-r from-transparent via-emerald-500/20 to-transparent"
style={{
top: `${(i + 1) * 12.5}%`,
}}
animate={{
opacity: [0.2, 0.6, 0.2],
scaleX: [0.9, 1.1, 0.9],
}}
transition={{
duration: 4 + i * 0.3,
repeat: Infinity,
ease: "easeInOut",
delay: i * 0.15,
}}
/>
))}
</div>
{/* Content */}
<motion.h2
className="bg-clip-text text-transparent text-center bg-gradient-to-b from-emerald-900 to-emerald-700 dark:from-emerald-400 dark:to-emerald-600 text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
>
UI Studio, <br /> Component Library.
</motion.h2>
<motion.p
className="max-w-xl mx-auto text-sm md:text-lg text-emerald-700 dark:text-emerald-300 text-center relative z-20"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
>
Get the best components from our experts, including modern designs, animations, and responsive layouts, completely free.
</motion.p>
{/* Floating particles */}
{Array.from({ length: 25 }).map((_, i) => (
<motion.div
key={`particle-${i}`}
className="absolute w-1 h-1 bg-emerald-400 rounded-full opacity-60"
style={{
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
}}
animate={{
y: [0, -20, 0],
opacity: [0.6, 1, 0.6],
scale: [1, 1.2, 1],
}}
transition={{
duration: 3 + Math.random() * 2,
repeat: Infinity,
ease: "easeInOut",
delay: Math.random() * 2,
}}
/>
))}
{/* Gradient overlay */}
<div className="absolute inset-0 bg-gradient-to-t from-white via-transparent to-white dark:from-black dark:via-transparent dark:to-black opacity-60" />
</div>
);
}
export default BackgroundLines;"use client";
import React from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";
export function BackgroundLines() {
return (
<div className="relative flex items-center justify-center w-full flex-col px-4 py-20 bg-white dark:bg-black overflow-hidden">
{/* Animated background lines */}
<div className="absolute inset-0 w-full h-full">
{Array.from({ length: 12 }).map((_, i) => (
<motion.div
key={i}
className="absolute h-full w-px bg-gradient-to-b from-transparent via-emerald-500/30 to-transparent"
style={{
left: `${(i + 1) * 8.33}%`,
}}
animate={{
opacity: [0.3, 0.8, 0.3],
scaleY: [0.8, 1.2, 0.8],
}}
transition={{
duration: 3 + i * 0.2,
repeat: Infinity,
ease: "easeInOut",
delay: i * 0.1,
}}
/>
))}
{/* Horizontal lines */}
{Array.from({ length: 8 }).map((_, i) => (
<motion.div
key={`h-${i}`}
className="absolute w-full h-px bg-gradient-to-r from-transparent via-emerald-500/20 to-transparent"
style={{
top: `${(i + 1) * 12.5}%`,
}}
animate={{
opacity: [0.2, 0.6, 0.2],
scaleX: [0.9, 1.1, 0.9],
}}
transition={{
duration: 4 + i * 0.3,
repeat: Infinity,
ease: "easeInOut",
delay: i * 0.15,
}}
/>
))}
</div>
{/* Content */}
<motion.h2
className="bg-clip-text text-transparent text-center bg-gradient-to-b from-emerald-900 to-emerald-700 dark:from-emerald-400 dark:to-emerald-600 text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
>
UI Studio, <br /> Component Library.
</motion.h2>
<motion.p
className="max-w-xl mx-auto text-sm md:text-lg text-emerald-700 dark:text-emerald-300 text-center relative z-20"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
>
Get the best components from our experts, including modern designs, animations, and responsive layouts, completely free.
</motion.p>
{/* Floating particles */}
{Array.from({ length: 25 }).map((_, i) => (
<motion.div
key={`particle-${i}`}
className="absolute w-1 h-1 bg-emerald-400 rounded-full opacity-60"
style={{
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
}}
animate={{
y: [0, -20, 0],
opacity: [0.6, 1, 0.6],
scale: [1, 1.2, 1],
}}
transition={{
duration: 3 + Math.random() * 2,
repeat: Infinity,
ease: "easeInOut",
delay: Math.random() * 2,
}}
/>
))}
{/* Gradient overlay */}
<div className="absolute inset-0 bg-gradient-to-t from-white via-transparent to-white dark:from-black dark:via-transparent dark:to-black opacity-60" />
</div>
);
}
export default BackgroundLines;4
Update the import paths to match your project setup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | Additional CSS classes for the background lines container. |