r3f-animation

Malicious tool definition detected

Tool: SKILL.md [1/3] Description: --- name: r3f-animation description: React Three Fiber animation - useFrame, useAnimations, spring physics, keyframes.

Tool: SKILL.md [2/3] Description: return springs.map((spring, i) => ( <animated.mesh key={i} position={spring.position} scale={spring.scale} onClick={() => handleClick(i)} > <boxGeometry /> <meshStandardMaterial color="orange" /> </animated.mesh> )) } ``` ### Gesture Integration ```tsx import { useSpring, animated } from '@react-spring/three' import { useDrag } from '@use-gesture/react' function DraggableBox() { const [spring, api] = useSpring(() => ({ position: [0, 0, 0], config: { mass: 1, ten

Tool: SKILL.md [3/3] Description: setSpeed: (speed) => set({ speed }) })) function AnimatedMesh() { const meshRef = useRef() const { isAnimating, speed } = useStore() useFrame((state, delta) => { if (isAnimating) { meshRef.current.rotation.y += delta * speed } }) return ( <mesh ref={meshRef}> <boxGeometry /> <meshStandardMaterial color="orange" /> </mesh> ) } // UI Component function Controls() { const { toggleAnimation, setSpeed } = useStore() return ( <div> <button onClick={toggleAnimation}>To