87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { motion } from 'framer-motion';
|
||
|
|
import { useEffect, useMemo, useState } from 'react';
|
||
|
|
import {
|
||
|
|
SiCplusplus,
|
||
|
|
SiCss3,
|
||
|
|
SiGo,
|
||
|
|
SiHtml5,
|
||
|
|
SiJavascript,
|
||
|
|
SiPhp,
|
||
|
|
SiPython,
|
||
|
|
SiRuby,
|
||
|
|
SiRust,
|
||
|
|
SiSwift,
|
||
|
|
SiTypescript,
|
||
|
|
} from 'react-icons/si';
|
||
|
|
|
||
|
|
export function AnimatedBackground() {
|
||
|
|
const [isClient, setIsClient] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setIsClient(true);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const iconColorMap = useMemo(
|
||
|
|
() => [
|
||
|
|
{ Icon: SiJavascript, color: '#F7DF1E' },
|
||
|
|
{ Icon: SiTypescript, color: '#3178C6' },
|
||
|
|
{ Icon: SiPython, color: '#3776AB' },
|
||
|
|
{ Icon: SiCplusplus, color: '#00599C' },
|
||
|
|
{ Icon: SiRuby, color: '#CC342D' },
|
||
|
|
{ Icon: SiSwift, color: '#F05138' },
|
||
|
|
{ Icon: SiRust, color: '#000000' },
|
||
|
|
{ Icon: SiGo, color: '#00ADD8' },
|
||
|
|
{ Icon: SiPhp, color: '#777BB4' },
|
||
|
|
{ Icon: SiHtml5, color: '#E34F26' },
|
||
|
|
{ Icon: SiCss3, color: '#1572B6' },
|
||
|
|
],
|
||
|
|
[]
|
||
|
|
);
|
||
|
|
|
||
|
|
const getRandom = (min: number, max: number) =>
|
||
|
|
Math.random() * (max - min) + min;
|
||
|
|
|
||
|
|
const floatingIcons = useMemo(() => {
|
||
|
|
if (!isClient) return [];
|
||
|
|
|
||
|
|
return Array.from({ length: 40 }).map((_, i) => {
|
||
|
|
const { Icon, color } = iconColorMap[i % iconColorMap.length];
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
key={i}
|
||
|
|
className="pointer-events-none absolute"
|
||
|
|
style={{
|
||
|
|
top: `${getRandom(0, 100)}%`,
|
||
|
|
left: `${getRandom(0, 100)}%`,
|
||
|
|
fontSize: `${getRandom(16, 32)}px`,
|
||
|
|
color: color,
|
||
|
|
opacity: getRandom(0.1, 0.2),
|
||
|
|
rotate: getRandom(-180, 180),
|
||
|
|
}}
|
||
|
|
animate={{
|
||
|
|
y: [0, getRandom(-100, 100), 0],
|
||
|
|
x: [0, getRandom(-50, 50), 0],
|
||
|
|
rotate: getRandom(-180, 180),
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: getRandom(15, 25),
|
||
|
|
repeat: Infinity,
|
||
|
|
repeatType: 'loop',
|
||
|
|
ease: 'easeInOut',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Icon className="h-full w-full" />
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
}, [isClient, iconColorMap]);
|
||
|
|
|
||
|
|
if (!isClient) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 z-0 overflow-hidden">{floatingIcons}</div>
|
||
|
|
);
|
||
|
|
}
|