Motion Studio
Pick a recipe, tweak the parameters, and see the compiled output for your target framework. The code panel updates live as you adjust.
Recipes
live viewport · 900px
syntax valid
Production outputreact
<motion.button
data-motionwind-motion=""
className="rounded-xl bg-[var(--color-accent)] px-6 py-3 font-semibold text-[var(--color-accent-fg)]"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
transition={{ type: "spring", stiffness: 420, damping: 24 }}
> Ship the interaction
</motion.button>