Dot Snake Background

1npm install framer-motion clsx tailwind-merge

1"use client";
2
3import { motion } from "framer-motion";
4
5export default function DotSnakeBackground({ 
6  children, 
7  color = "#ec4899", // Pink 500
8  backgroundColor = "#000000" 
9}) {
10  return (
11    <div 
12      className="relative w-full h-full min-h-[300px] flex items-center justify-center overflow-hidden rounded-2xl"
13      style={{ backgroundColor }}
14    >
15      <div className="absolute inset-4 rounded-xl border border-white/5 overflow-hidden">
16        
17        {/* Animated Dot running along the border */}
18        <motion.div
19          className="absolute top-0 left-0 w-2 h-2 rounded-full blur-[1px]"
20          style={{
21            backgroundColor: color,
22            boxShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`
23          }}
24          animate={{ 
25            x: ["0%", "calc(100cqw - 8px)", "calc(100cqw - 8px)", "0%", "0%"],
26            y: ["0%", "0%", "calc(100cqh - 8px)", "calc(100cqh - 8px)", "0%"]
27          }}
28          transition={{ 
29            duration: 6, 
30            repeat: Infinity, 
31            ease: "linear",
32            times: [0, 0.25, 0.5, 0.75, 1]
33          }}
34        />
35
36        {/* Trail Effect */}
37        <motion.div
38          className="absolute top-0 left-0 w-2 h-2 rounded-full opacity-50 blur-[2px]"
39          style={{
40            backgroundColor: color,
41            boxShadow: `0 0 10px ${color}`
42          }}
43          animate={{ 
44            x: ["0%", "calc(100cqw - 8px)", "calc(100cqw - 8px)", "0%", "0%"],
45            y: ["0%", "0%", "calc(100cqh - 8px)", "calc(100cqh - 8px)", "0%"]
46          }}
47          transition={{ 
48            duration: 6, 
49            repeat: Infinity, 
50            ease: "linear",
51            times: [0, 0.25, 0.5, 0.75, 1],
52            delay: 0.1
53          }}
54        />
55
56      </div>
57
58      <div className="relative z-10 w-full h-full flex flex-col items-center justify-center p-8 text-center" style={{ containerType: "size" }}>
59        {children || (
60          <h2 className="text-3xl font-bold text-white tracking-widest uppercase" style={{ textShadow: `0 0 20px ${color}` }}>
61            Dot Snake
62          </h2>
63        )}
64      </div>
65    </div>
66  );
67}
68