Tactile Micro-Interaction Buttons · Claymorphism
Clay Inflate Buttons
Puffy pastel clay buttons with inner highlights that deflate when pressed and re-inflate with a wobble.
- Framer Motion
- Claymorphism
- Soft UI
- Buttons
The full prompt
Show the prompt that defines the layout, motion and design language
Build a "Clay Inflate Buttons" React component.
CONCEPT: A set of chunky clay-like buttons and an icon toggle that look inflated, deflate on press and wobble back.
LAYOUT & CONTENT:
- Three buttons: lilac 'Get started', peach 'Learn more', mint icon-only heart toggle.
- Each: radius 999, outer soft drop shadow, inset white highlight top-left, inset darker shade bottom-right.
INTERACTIONS & MOTION:
- whileTap: scale 0.92 and shadows shrink (deflate).
- On release spring back with low damping (stiffness 400, damping 9) for a wobble.
- Heart toggle: icon scales 0 → 1.3 → 1 when turning on.
DESIGN SYSTEM — Claymorphism:
- Pastel lilac #CDB8FF, peach #FFC9A9, mint #B8F0D8 on #F3EEFF.
- Inflated rounded shapes: big radius, outer soft shadow plus inner highlight and inner shade (inset shadows).
- Type: Fredoka 600; everything feels squishy.
CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring"). Animate transform and opacity only. Respect prefers-reduced-motion via useReducedMotion().
- Icons: lucide-react where icons are needed.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes.
OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.How to use this prompt
- 1. CopyUse “Copy Claude Prompt” above. It includes the layout, the spring values and the design rules.
- 2. Paste into ClaudeAdd your own brand name, copy and colors at the top of the prompt if you like.
- 3. Drop it inYou get one file with React, Tailwind and Framer Motion. Install framer-motion and lucide-react.