Skip to content

Bento Feature Grids · Neo-Brutalist

Brutalist Pricing Toggle

Loud pricing cards with 3px borders and hard shadows; a chunky monthly/yearly switch slams the prices to new values.

  • Framer Motion
  • Brutalist
  • Pricing
  • Toggle

The full prompt

Show the prompt that defines the layout, motion and design language
Build a "Brutalist Pricing Toggle" React component.

CONCEPT: A pricing section that feels printed with a rubber stamp: two plans, a giant billing switch, prices that drop into place.

LAYOUT & CONTENT:
- Header 'PRICING THAT DOESN'T HIDE' in Archivo Black.
- Switch: two segments MONTHLY / YEARLY (-20%), the active one filled black.
- Two cards: Starter $19 / $15 and Studio $49 / $39, feature list with ✕/✓ in Space Mono, black CTA bars.

INTERACTIONS & MOTION:
- Price change: old number drops out y +100%, new one slams in from y -100% with spring stiffness 700 damping 20.
- Cards: whileHover translate -4,-4 and shadow grows to 10px 10px 0 #000; whileTap flatten to 0 shadow.

DESIGN SYSTEM — Neo-Brutalist:
- Acid yellow #FFE600 and white surfaces, pure black #000 text, 3px black borders everywhere.
- Hard 6px 6px 0 #000 shadows, zero blur, zero gradients, square corners.
- Type: Archivo Black for display, Space Mono for labels and prices.

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.