Spaces:
Runtime error
Runtime error
| import React from 'react'; | |
| import { motion } from 'framer-motion'; | |
| const MATH_SYMBOLS = ['∑', '∫', 'π', '∞', '√', 'Δ', 'Ω', 'θ', 'α', 'β', 'μ', 'λ', '±', '≠', '≈', '∇', '∂</', '∈', '∉']; | |
| export default function BackgroundGraphics() { | |
| const [elements, setElements] = React.useState([]); | |
| React.useEffect(() => { | |
| // Generate random positions only on client side to avoid hydration mismatch | |
| const newElements = Array.from({ length: 25 }).map((_, i) => ({ | |
| id: i, | |
| symbol: MATH_SYMBOLS[Math.floor(Math.random() * MATH_SYMBOLS.length)], | |
| left: `${Math.random() * 100}%`, | |
| top: `${Math.random() * 100}%`, | |
| fontSize: `${Math.random() * 30 + 20}px`, | |
| duration: Math.random() * 20 + 20, | |
| delay: Math.random() * -20, | |
| opacity: Math.random() * 0.05 + 0.03, // Very subtle opacity | |
| })); | |
| setElements(newElements); | |
| }, []); | |
| return ( | |
| <div className="fixed inset-0 pointer-events-none overflow-hidden z-0"> | |
| {elements.map((el) => ( | |
| <motion.div | |
| key={el.id} | |
| className="absolute text-slate-500 dark:text-slate-400 font-serif select-none" | |
| style={{ | |
| left: el.left, | |
| top: el.top, | |
| fontSize: el.fontSize, | |
| opacity: el.opacity, | |
| }} | |
| animate={{ | |
| y: [0, -100, 0], | |
| x: [0, 50, 0], | |
| rotate: [0, 360], | |
| }} | |
| transition={{ | |
| duration: el.duration, | |
| repeat: Infinity, | |
| ease: "linear", | |
| delay: el.delay, | |
| }} | |
| > | |
| {el.symbol} | |
| </motion.div> | |
| ))} | |
| {/* Gradients to blend the background smoothly */} | |
| <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-white/50 dark:to-slate-950/50" /> | |
| <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-brand/5 rounded-full blur-[120px] mix-blend-multiply dark:mix-blend-lighten" /> | |
| <div className="absolute bottom-0 left-0 w-[600px] h-[600px] bg-indigo-500/5 rounded-full blur-[150px] mix-blend-multiply dark:mix-blend-lighten" /> | |
| </div> | |
| ); | |
| } | |