Circle Snake Background

1npm install framer-motion clsx tailwind-merge

1"use client";
2
3import { motion } from "framer-motion";
4
5export default function CircleSnakeBackground({ 
6  children, 
7  color = "#10b981", // Emerald 500
8  backgroundColor = "#000000" 
9}) {
10  return (
11    <div 
12      className="relative w-full h-full min-h-[400px] flex items-center justify-center overflow-hidden rounded-2xl"
13      style={{ backgroundColor }}
14    >
15      <div className="absolute inset-0 flex items-center justify-center">
16        {/* Circle Track */}
17        <div className="relative w-64 h-64 rounded-full border border-white/5 flex items-center justify-center">
18          
19          {/* Rotating Snake */}
20          <motion.div
21            className="absolute inset-0 rounded-full"
22            style={{
23              background: `conic-gradient(from 0deg, transparent 0%, transparent 60%, ${color} 100%)`,
24              maskImage: 'radial-gradient(transparent 65%, black 65%)',
25              WebkitMaskImage: 'radial-gradient(transparent 65%, black 65%)'
26            }}
27            animate={{ rotate: 360 }}
28            transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
29          />
30
31          <div className="absolute inset-2 rounded-full bg-black flex items-center justify-center p-4 text-center z-10 shadow-[inset_0_0_20px_rgba(0,0,0,1)]">
32            {children || (
33              <h2 className="text-2xl font-bold text-white tracking-widest uppercase" style={{ textShadow: `0 0 10px ${color}` }}>
34                Circle Snake
35              </h2>
36            )}
37          </div>
38        </div>
39      </div>
40    </div>
41  );
42}
43