1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
"use client"
import BgGrad from "./bg-grad"
import { motion } from "motion/react"
interface NovaOrbProps {
size?: number
className?: string
}
function NovaOrb({ size = 200, className = "" }: NovaOrbProps) {
return (
<div
className={`flex items-center justify-center ${className} blur-[6px]`}
style={{ width: `${size}px`, height: `${size}px` }}
>
<div
className="rounded-full relative overflow-hidden"
style={{
width: size,
height: size,
boxShadow: `${(1 * size) / 30}px ${(2 * size) / 30}px ${(4 * size) / 30}px 0 #0A0E14 inset, 0 ${(18.462 * size) / 30}px ${(5.192 * size) / 30}px 0 rgba(41, 95, 255, 0.00), 0 ${(12.115 * size) / 30}px ${(4.615 * size) / 30}px 0 rgba(41, 95, 255, 0.01), 0 ${(6.923 * size) / 30}px ${(4.038 * size) / 30}px 0 rgba(41, 95, 255, 0.05), 0 ${(2.885 * size) / 30}px ${(2.885 * size) / 30}px 0 rgba(41, 95, 255, 0.09), 0 ${(0.577 * size) / 30}px ${(1.731 * size) / 30}px 0 rgba(41, 95, 255, 0.10)`,
}}
>
<div className="rotate-[30.76deg] z-[-1] absolute top-[-30%] left-[-60%]">
<motion.div
animate={{ rotate: 360 }}
transition={{
duration: 12,
ease: "linear",
repeat: Number.POSITIVE_INFINITY,
}}
>
<BgGrad size={size * 1.8} />
</motion.div>
</div>
</div>
</div>
)
}
export default NovaOrb
|