80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import { AnimatePresence, motion } from 'framer-motion';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
const brandConfig = {
|
|
Mixpanel: '#7A59FF',
|
|
'Google Analytics': '#E37400',
|
|
Amplitude: '#00CF98',
|
|
} as const;
|
|
|
|
const words = Object.keys(brandConfig);
|
|
|
|
function useWordCycle(words: string[], interval: number, mounted: boolean) {
|
|
const [index, setIndex] = useState(0);
|
|
const [isInitial, setIsInitial] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!mounted) {
|
|
return;
|
|
}
|
|
|
|
if (isInitial) {
|
|
setIndex(Math.floor(Math.random() * words.length));
|
|
setIsInitial(false);
|
|
return;
|
|
}
|
|
|
|
const timer = setInterval(() => {
|
|
setIndex((current) => (current + 1) % words.length);
|
|
}, interval);
|
|
return () => clearInterval(timer);
|
|
}, [words, interval, isInitial, mounted]);
|
|
|
|
return words[index];
|
|
}
|
|
|
|
export function Competition() {
|
|
const [mounted, setMounted] = useState(false);
|
|
const word = useWordCycle(words, 2100, mounted);
|
|
const color = brandConfig[word as keyof typeof brandConfig];
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (!mounted) {
|
|
return (
|
|
<span className="block truncate leading-tight -mt-1" style={{ color }}>
|
|
{word}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<AnimatePresence mode="wait" initial={false}>
|
|
<motion.div
|
|
key={word}
|
|
className="block truncate leading-tight -mt-1"
|
|
style={{ color }}
|
|
>
|
|
{word?.split('').map((char, index) => (
|
|
<motion.span
|
|
key={`${word}-${char}-${index.toString()}`}
|
|
initial={{ y: 10, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
exit={{ y: -10, opacity: 0 }}
|
|
transition={{
|
|
duration: 0.15,
|
|
delay: index * 0.015,
|
|
ease: 'easeOut',
|
|
}}
|
|
style={{ display: 'inline-block', whiteSpace: 'pre' }}
|
|
>
|
|
{char}
|
|
</motion.span>
|
|
))}
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
);
|
|
}
|