Snake Engine Controller

1npm install framer-motion clsx tailwind-merge

1"use client";
2
3import { useState } from "react";
4import { motion } from "framer-motion";
5import { cn } from "@/lib/utils";
6
7export default function SnakeEngineController() {
8  const [speed, setSpeed] = useState(4);
9  const [color, setColor] = useState("#3b82f6"); // Blue
10
11  const colors = [
12    { name: "Blue", value: "#3b82f6" },
13    { name: "Purple", value: "#a855f7" },
14    { name: "Emerald", value: "#10b981" },
15    { name: "Rose", value: "#f43f5e" },
16    { name: "Amber", value: "#f59e0b" },
17  ];
18
19  return (
20    <div className="relative w-full h-[500px] flex items-center justify-center rounded-2xl bg-[#0a0a0c] border border-white/5 overflow-hidden">
21      
22      {/* Background Snake using states */}
23      <div className="absolute inset-2 rounded-xl overflow-hidden pointer-events-none">
24        {/* Snake Top */}
25        <motion.div
26          className="absolute top-0 left-0 h-[3px] w-[40%]"
27          style={{ background: `linear-gradient(90deg, transparent, ${color}, transparent)`, boxShadow: `0 0 20px ${color}` }}
28          animate={{ x: ["-100%", "300%"] }}
29          transition={{ duration: speed, repeat: Infinity, ease: "linear" }}
30        />
31        {/* Snake Right */}
32        <motion.div
33          className="absolute top-0 right-0 w-[3px] h-[40%]"
34          style={{ background: `linear-gradient(180deg, transparent, ${color}, transparent)`, boxShadow: `0 0 20px ${color}` }}
35          animate={{ y: ["-100%", "300%"] }}
36          transition={{ duration: speed, repeat: Infinity, ease: "linear", delay: speed * 0.25 }}
37        />
38        {/* Snake Bottom */}
39        <motion.div
40          className="absolute bottom-0 right-0 h-[3px] w-[40%]"
41          style={{ background: `linear-gradient(270deg, transparent, ${color}, transparent)`, boxShadow: `0 0 20px ${color}` }}
42          animate={{ x: ["300%", "-100%"] }}
43          transition={{ duration: speed, repeat: Infinity, ease: "linear", delay: speed * 0.5 }}
44        />
45        {/* Snake Left */}
46        <motion.div
47          className="absolute bottom-0 left-0 w-[3px] h-[40%]"
48          style={{ background: `linear-gradient(360deg, transparent, ${color}, transparent)`, boxShadow: `0 0 20px ${color}` }}
49          animate={{ y: ["300%", "-100%"] }}
50          transition={{ duration: speed, repeat: Infinity, ease: "linear", delay: speed * 0.75 }}
51        />
52      </div>
53
54      {/* Control Panel */}
55      <div className="relative z-10 glass-panel p-8 rounded-2xl w-[90%] max-w-sm space-y-8">
56        <div className="text-center">
57          <h3 className="text-2xl font-bold text-white mb-1">Snake Engine</h3>
58          <p className="text-sm text-gray-400">Interactive Controller</p>
59        </div>
60
61        <div className="space-y-4">
62          <div className="space-y-2">
63            <div className="flex justify-between text-sm text-gray-300">
64              <span>Speed Factor</span>
65              <span>{speed}s</span>
66            </div>
67            <input 
68              type="range" 
69              min="1" 
70              max="10" 
71              step="0.5"
72              value={speed} 
73              onChange={(e) => setSpeed(Number(e.target.value))}
74              className="w-full accent-white bg-white/10 h-2 rounded-full appearance-none cursor-pointer"
75            />
76            <div className="flex justify-between text-xs text-gray-500">
77              <span>Fast</span>
78              <span>Slow</span>
79            </div>
80          </div>
81
82          <div className="space-y-2 pt-4 border-t border-white/10">
83            <span className="text-sm text-gray-300 block">Core Energy Color</span>
84            <div className="flex gap-2">
85              {colors.map((c) => (
86                <button
87                  key={c.name}
88                  onClick={() => setColor(c.value)}
89                  className={cn(
90                    "w-8 h-8 rounded-full border-2 transition-transform hover:scale-110",
91                    color === c.value ? "border-white" : "border-transparent"
92                  )}
93                  style={{ backgroundColor: c.value, boxShadow: color === c.value ? `0 0 15px ${c.value}` : 'none' }}
94                  title={c.name}
95                />
96              ))}
97            </div>
98          </div>
99        </div>
100      </div>
101    </div>
102  );
103}
104