Animation playground

Star203
Preview
900px
Live viewport 900px · Button press

Hover · tap · spring

Timeline
0ms / 300ms
0ms300ms
Properties
Editor and output
Syntax valid
Production outputreact
component.tsxbutton-press
<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>