| import { motion } from "motion/react"; | |
| export default function AnimatedLogo({ className = "w-8 h-8" }: { className?: string }) { | |
| return ( | |
| <motion.svg | |
| className={className} | |
| viewBox="0 0 100 100" | |
| fill="none" | |
| xmlns="http://www.w3.org/2000/svg" | |
| initial={{ opacity: 0, y: 10 }} | |
| animate={{ opacity: 1, y: 0 }} | |
| transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }} | |
| > | |
| <defs> | |
| <linearGradient id="crypto-grad-1" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" stopColor="#4f46e5" /> {/* Indigo 600 */} | |
| <stop offset="100%" stopColor="#0ea5e9" /> {/* Sky 500 */} | |
| </linearGradient> | |
| <linearGradient id="crypto-grad-2" x1="100%" y1="0%" x2="0%" y2="100%"> | |
| <stop offset="0%" stopColor="#2dd4bf" /> {/* Teal 400 */} | |
| <stop offset="100%" stopColor="#3b82f6" /> {/* Blue 500 */} | |
| </linearGradient> | |
| <filter id="neon-glow" x="-20%" y="-20%" width="140%" height="140%"> | |
| <feGaussianBlur stdDeviation="4" result="blur" /> | |
| <feComposite in="SourceGraphic" in2="blur" operator="over" /> | |
| </filter> | |
| </defs> | |
| {/* Background glowing element */} | |
| <motion.polygon | |
| points="50,5 90,27.5 90,72.5 50,95 10,72.5 10,27.5" | |
| fill="url(#crypto-grad-1)" | |
| fillOpacity="0.1" | |
| stroke="url(#crypto-grad-2)" | |
| strokeWidth="2" | |
| filter="url(#neon-glow)" | |
| initial={{ scale: 0.8, opacity: 0, rotate: -30 }} | |
| animate={{ scale: 1, opacity: 1, rotate: 0 }} | |
| transition={{ duration: 1.2, ease: "easeOut" }} | |
| /> | |
| {/* Abstract Sharp 'S' inside */} | |
| <motion.path | |
| d="M 65 35 L 35 35 L 35 50 L 65 50 L 65 65 L 35 65" | |
| stroke="url(#crypto-grad-2)" | |
| strokeWidth="10" | |
| strokeLinecap="square" | |
| strokeLinejoin="miter" | |
| initial={{ pathLength: 0 }} | |
| animate={{ pathLength: 1 }} | |
| transition={{ duration: 1.5, ease: "easeInOut", delay: 0.4 }} | |
| /> | |
| {/* Accent bridging line */} | |
| <motion.line | |
| x1="20" | |
| y1="50" | |
| x2="80" | |
| y2="50" | |
| stroke="url(#crypto-grad-1)" | |
| strokeWidth="4" | |
| filter="url(#neon-glow)" | |
| initial={{ scaleX: 0, opacity: 0 }} | |
| animate={{ scaleX: 1, opacity: 1 }} | |
| transition={{ duration: 1, ease: "easeOut", delay: 1 }} | |
| /> | |
| </motion.svg> | |
| ); | |
| } | |