Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →zebbern/r3f-animation
React Three Fiber animation - useFrame, useAnimations, spring physics, keyframes.
Passed 23 of 24 test cases with the skill, and 20 of 24 without it.
and 1 more in the full report
3 fixed20 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
I want an interactive 3D object component in React Three Fiber built with react-spring. The component needs to animate scale and material color dynamically on click events using spring configs, and also demonstrate how to chain two spring animations sequentially so scaling completes before rotation starts. Please provide the full functional React component code.
| Checked | Without skill | With skill |
|---|---|---|
| Uses useChain to sequence the spring animations. | Missed | Passed |
| Uses useSpringRef to create animation references for the chain. | Missed | Passed |
The instructions your model reads when the skill loads.
import { Canvas, useFrame } from '@react-three/fiber'
import { useRef } from 'react'
function RotatingBox() {
const meshRef = useRef()
useFrame((state, delta) => {
meshRef.current.rotation.x += delta
meshRef.current.rotation.y += delta * 0.5
})
return (
<mesh ref={meshRef}>
<boxGeometry />
<meshStandardMaterial color="hotpink" />
</mesh>
)
}
export default function App() {
return (
<Canvas>
<ambientLight />
<RotatingBox />
</Canvas>
)
}
The core animation hook in R3F. Runs every frame.
test cases passed, vs 20 / 24 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.