import React, { useState, useEffect, useRef } from 'react'; import { Canvas, useFrame } from '@react-three/fiber'; import { ScrollControls, useScroll, Text } from '@react-three/drei'; import gsap from 'gsap'; export const CreativeDeveloper = ({ data }) => { const containerRef = useRef(null); const scroll = useScroll(); const [isHovered, setHovered] = useState(false); useEffect(() => { const ctx = gsap.context(() => { gsap.to('.hero-title', { opacity: 1, y: 0, duration: 1.5, ease: 'power4.out', stagger: 0.1 }); }); return () => ctx.revert(); }, []); useFrame((state) => { state.camera.position.z = Math.sin(scroll.offset * Math.PI) * 10; }); return ( <Canvas camera={{ position: [0, 0, 5], fov: 75 }}> <ScrollControls pages={3} damping={0.1}> <group ref={containerRef} onPointerOver={() => setHovered(true)}> <Text fontSize={8} color={isHovered ? '#ff2a5f' : '#ffffff'}> DÉVELOPPEUR CRÉATIF </Text> <CustomShaderMaterial time={state.clock.elapsedTime} /> </group> </ScrollControls> </Canvas> ); }; export default CreativeDeveloper;