Skip to content

Rounded 90s buttons with black outlines; hovering wiggles the squiggle decoration and pressing pops dots out of the button.

  • Framer Motion
  • Memphis
  • Playful
  • Buttons

The full prompt

Show the prompt that defines the layout, motion and design language
Build a "Memphis Squiggle Buttons" React component.

CONCEPT: Three playful call-to-action buttons on a dotted background, each with its own Memphis decoration that reacts to the pointer.

LAYOUT & CONTENT:
- Buttons: 'Let's play' (pink), 'Join the club' (teal), 'Surprise me' (yellow), all with 3px black outline and 4px black offset shadow, Fredoka 700.
- Background: white with a scattered dot pattern and a violet zig-zag in a corner.

INTERACTIONS & MOTION:
- Hover: the attached squiggle SVG rotates ±12° on a looping spring wiggle.
- Tap: button squashes (scaleY 0.85, scaleX 1.08) and 6 dots fly out radially then fade.
- Squiggle paths draw in on mount with pathLength.

DESIGN SYSTEM — Memphis 90s:
- Hot pink #FF5FA2, teal #1CC6B6, sunflower #FFD23F, violet #7B5CFF on white, black outlines.
- Squiggles, dots and zig-zags as decoration; playful tilted shapes.
- Type: Fredoka (600–700) rounded and friendly.

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. 1. CopyUse “Copy Claude Prompt” above. It includes the layout, the spring values and the design rules.
  2. 2. Paste into ClaudeAdd your own brand name, copy and colors at the top of the prompt if you like.
  3. 3. Drop it inYou get one file with React, Tailwind and Framer Motion. Install framer-motion and lucide-react.