Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →video-production-buddy/framer-motion
Use when implementing Disney's 12 animation principles with Framer Motion in React applications
Passed 19 of 22 test cases with the skill, and 15 of 22 without it.
and 1 more in the full report
4 fixed15 passed either way3 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
Build an interactive React card button where hovering over the main container triggers a subtle rotation wiggle on an embedded interior icon.
| Checked | Without skill | With skill |
|---|---|---|
| Uses whileHover on parent with inner motion component rotating keyframes | Missed | Passed |
The instructions your model reads when the skill loads.
Implement all 12 Disney animation principles using Framer Motion's declarative React API.
<motion.div
animate={{ scaleX: [1, 1.2, 1], scaleY: [1, 0.8, 1] }}
transition={{ duration: 0.3, times: [0, 0.5, 1] }}
/>
<motion.div
variants={{
idle: { y: 0, scaleY: 1 },
anticipate: { y: 10, scaleY: 0.9 },
jump: { y: -200 }
}}
initial="idle"
animate={["anticipate", "jump"]}
transition={{ duration: 0.5, times: [0, 0.2, 1] }}
/>
<motion.div animate={{ filter: "blur(3px)", opacity: 0.6 }} /> {/* bg */}
<motion.div animate={{ scale: 1.1, zIndex: 10 }} /> {/* hero */}
<motion.div
animate={{
test cases passed, vs 15 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.