Box Snake Background

1npm install framer-motion clsx tailwind-merge

1"use client";
2
3import { motion } from "framer-motion";
4
5export default function BoxSnakeBackground({ 
6  children, 
7  color = "#6366f1", // Indigo 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      {/* The glowing box border */}
16      <div className="absolute inset-4 rounded-xl border border-white/5 overflow-hidden">
17        
18        {/* Snake Top */}
19        <motion.div
20          className="absolute top-0 left-0 h-[2px] w-[30%]"
21          style={{
22            background: `linear-gradient(90deg, transparent, ${color}, transparent)`,
23            boxShadow: `0 0 10px ${color}, 0 0 20px ${color}`
24          }}
25          animate={{ x: ["-100%", "400%"] }}
26          transition={{ duration: 4, repeat: Infinity, ease: "linear" }}
27        />
28        
29        {/* Snake Right */}
30        <motion.div
31          className="absolute top-0 right-0 w-[2px] h-[30%]"
32          style={{
33            background: `linear-gradient(180deg, transparent, ${color}, transparent)`,
34            boxShadow: `0 0 10px ${color}, 0 0 20px ${color}`
35          }}
36          animate={{ y: ["-100%", "400%"] }}
37          transition={{ duration: 4, repeat: Infinity, ease: "linear", delay: 1 }}
38        />
39        
40        {/* Snake Bottom */}
41        <motion.div
42          className="absolute bottom-0 right-0 h-[2px] w-[30%]"
43          style={{
44            background: `linear-gradient(270deg, transparent, ${color}, transparent)`,
45            boxShadow: `0 0 10px ${color}, 0 0 20px ${color}`
46          }}
47          animate={{ x: ["400%", "-100%"] }}
48          transition={{ duration: 4, repeat: Infinity, ease: "linear", delay: 2 }}
49        />
50        
51        {/* Snake Left */}
52        <motion.div
53          className="absolute bottom-0 left-0 w-[2px] h-[30%]"
54          style={{
55            background: `linear-gradient(360deg, transparent, ${color}, transparent)`,
56            boxShadow: `0 0 10px ${color}, 0 0 20px ${color}`
57          }}
58          animate={{ y: ["400%", "-100%"] }}
59          transition={{ duration: 4, repeat: Infinity, ease: "linear", delay: 3 }}
60        />
61      </div>
62
63      <div className="relative z-10 w-full h-full flex flex-col items-center justify-center p-8 text-center">
64        {children || (
65          <h2 className="text-3xl font-bold text-white tracking-widest uppercase" style={{ textShadow: `0 0 20px ${color}` }}>
66            Box Snake
67          </h2>
68        )}
69      </div>
70    </div>
71  );
72}
73