Freev1.1.0 · updated 2026-10-25

Morphing Action Button

One outline that tightens from a button into a loading ring, draws a check, then opens into a success label. A continuous response instead of three swapped components.

Web · vanilla JStestedWeb · React / Next.jsadaptableWeb · Vue / Nuxtadaptable

Live preview

Good for

submit button
checkout confirmation
save action

Install as a skill

Tune the preview above, then press Copy install prompt and paste it into your agent. It reads the install guide and runs the MotionPantry CLI.
Approve the connection in your browser the first time. The skill lands in your agent’s skills folder as motionpantry-morphing-action.
Ask your agent: Use the motionpantry-morphing-action skill to add Morphing Action Button to my submit button.

Or run it yourself:

# Claude Code
npx --yes motionpantry@latest install morphing-action --agent claude-code

# Codex, Cursor, Gemini CLI or OpenCode
npx --yes motionpantry@latest install morphing-action

Copying the install prompt needs a free account, for free and Pro skills alike.

Design intent

Look

A dark pill button reading "Get started". Its outline tightens into a small loading ring, a check draws itself, and the same outline opens again into a #b6f36a pill that reads "All set". The viewer sees one action evolve, not three components swapping.

Rhythm

One cycle lasts 4800 ms: about a quarter at rest, a quick contraction, a short spin, the check, a held success state, then a smooth return to the start. Easing is a soft smootherstep everywhere; nothing bounces.

Must keep

One continuous outline. Width and corner radius change smoothly; no hard cuts and no overlapping labels.
Order: the spinner appears first, the check draws after it, and only then does the success label open.
Dark resting button and a single accent color for success. Success text switches between black and white so it stays readable on the chosen color.
Compact and restrained: no particles, glow, confetti or sound.
With reduced motion, show still frames of each state instead of animating.

Free to change

Labels, success color, background and cycle length (within the parameters), and the size of the whole graphic.

Acceptance checks

Key states

Ready: a dark pill reading "Get started" with a small arrow, centered.
Loading: the pill has tightened into a circle with a spinning ring; no label is visible.
Success: the pill has opened again in #b6f36a with a drawn check and "All set" in readable black or white.

Checks

The cycle loops every 4800 ms and the end blends back into the start with no jump.
Labels never overlap or overflow the pill, including the longest allowed label (16 characters).
At 390 px wide the graphic fits without horizontal scrolling.
With prefers-reduced-motion: reduce, nothing animates; each state is a still frame.
In a real form, "success" only appears after the request succeeds.
destroy() stops the loop and removes everything it added.

Changelog

v1.1.02026-10-25First release on MotionPantry in the v2 skill format.