Jasper Staats

import { motion } from 'framer-motion'; import { useState, useEffect } from 'react'; const CreativeCode = () => { const [animation, setAnimation] = useState(false); useEffect(() => { // Initialize creative elements const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // Set up dimensions canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Animation loop const animate = () => { // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw particles particles.forEach(particle => { particle.update(); particle.draw(ctx); }); // Request next frame requestAnimationFrame(animate); }; // Start animation animate(); return () => { // Cleanup animation }; }, []); return ( <motion.div className="creative-canvas" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.8 }} > {/* Canvas will be injected here */} </motion.div> ); }; export default CreativeCode;