sitcod3 commited on
Commit
a2a51a1
·
verified ·
1 Parent(s): 05ae504

Upload src\components\AnimatedLogo.tsx with huggingface_hub

Browse files
Files changed (1) hide show
  1. src//components//AnimatedLogo.tsx +69 -0
src//components//AnimatedLogo.tsx ADDED
@@ -0,0 +1,69 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { motion } from "motion/react";
2
+
3
+ export default function AnimatedLogo({ className = "w-8 h-8" }: { className?: string }) {
4
+ return (
5
+ <motion.svg
6
+ className={className}
7
+ viewBox="0 0 100 100"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ initial={{ opacity: 0, y: 10 }}
11
+ animate={{ opacity: 1, y: 0 }}
12
+ transition={{ duration: 0.8, ease: [0.32, 0.72, 0, 1] }}
13
+ >
14
+ <defs>
15
+ <linearGradient id="crypto-grad-1" x1="0%" y1="0%" x2="100%" y2="100%">
16
+ <stop offset="0%" stopColor="var(--nt-deep-teal-600)" /> {/* Verdigris 600 */}
17
+ <stop offset="100%" stopColor="var(--nt-terracotta-600)" /> {/* Kiln Ember 600 */}
18
+ </linearGradient>
19
+ <linearGradient id="crypto-grad-2" x1="100%" y1="0%" x2="0%" y2="100%">
20
+ <stop offset="0%" stopColor="var(--nt-deep-teal-700)" /> {/* Verdigris 700 */}
21
+ <stop offset="100%" stopColor="var(--nt-terracotta-700)" /> {/* Kiln Ember 700 */}
22
+ </linearGradient>
23
+ <filter id="neon-glow" x="-20%" y="-20%" width="140%" height="140%">
24
+ <feGaussianBlur stdDeviation="4" result="blur" />
25
+ <feComposite in="SourceGraphic" in2="blur" operator="over" />
26
+ </filter>
27
+ </defs>
28
+
29
+ {/* Background glowing element */}
30
+ <motion.polygon
31
+ points="50,5 90,27.5 90,72.5 50,95 10,72.5 10,27.5"
32
+ fill="url(#crypto-grad-1)"
33
+ fillOpacity="0.1"
34
+ stroke="url(#crypto-grad-2)"
35
+ strokeWidth="2"
36
+ filter="url(#neon-glow)"
37
+ initial={{ scale: 0.8, opacity: 0, rotate: -30 }}
38
+ animate={{ scale: 1, opacity: 1, rotate: 0 }}
39
+ transition={{ duration: 1.2, ease: [0.32, 0.72, 0, 1] }}
40
+ />
41
+
42
+ {/* Abstract Sharp 'S' inside */}
43
+ <motion.path
44
+ d="M 65 35 L 35 35 L 35 50 L 65 50 L 65 65 L 35 65"
45
+ stroke="url(#crypto-grad-2)"
46
+ strokeWidth="10"
47
+ strokeLinecap="square"
48
+ strokeLinejoin="miter"
49
+ initial={{ pathLength: 0 }}
50
+ animate={{ pathLength: 1 }}
51
+ transition={{ duration: 1.5, ease: [0.32, 0.72, 0, 1], delay: 0.4 }}
52
+ />
53
+
54
+ {/* Accent bridging line */}
55
+ <motion.line
56
+ x1="20"
57
+ y1="50"
58
+ x2="80"
59
+ y2="50"
60
+ stroke="url(#crypto-grad-1)"
61
+ strokeWidth="4"
62
+ filter="url(#neon-glow)"
63
+ initial={{ scaleX: 0, opacity: 0 }}
64
+ animate={{ scaleX: 1, opacity: 1 }}
65
+ transition={{ duration: 1, ease: [0.32, 0.72, 0, 1], delay: 1 }}
66
+ />
67
+ </motion.svg>
68
+ );
69
+ }