Motionwind Studio

Type motionwind classes and watch them run, alongside the motion.* code they compile to.

<motion.button
  data-motionwind-motion=""
  className="rounded-xl bg-fd-primary px-6 py-3 text-fd-primary-foreground font-semibold"
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
  transition={{ type: "spring" }}
>  Click me
</motion.button>

Full Studio

The embedded editor above is a compact version. Motionwind Studio adds a visual spring editor, timeline, reduced-motion preview, responsive stages, reviewed recipes, share links, and exports for React, Vue, JavaScript, and React Native. It lives on the marketing site at Motionwind Studio.

Using it in your own docs

The <Playground> component is available in MDX:

<Playground
  initial="animate-hover:scale-110 animate-spring"
  tag="div"
  text="Hover me"
/>

It parses classes at runtime with the mw.* component and renders the compiled code with generateMotionCode from motionwind-react/tooling.