Skip to content

Kinetic Typography Banners · Retro 70s

Groovy Sunset Banner

A 70s banner with stacked sunset stripes that roll in like a record label while a fat Shrikhand word bobs to a groove.

  • Framer Motion
  • Retro
  • 70s
  • Kinetic Type

The full prompt

Show the prompt that defines the layout, motion and design language
Build a "Groovy Sunset Banner" React component.

CONCEPT: A promo banner straight off a 1974 album sleeve: rounded sunset stripes rise behind the word 'Groovy' which sways on a loop.

LAYOUT & CONTENT:
- Five concentric half-arc stripes (orange, mustard, chocolate, cream...) anchored to the bottom center.
- Word 'Groovy' in Shrikhand at ~5rem, chocolate with a cream 4px outline offset shadow; tagline 'Weekend sale: 70% far out'.

INTERACTIONS & MOTION:
- Stripes scale from 0 to 1 from the bottom with 90ms stagger, spring stiffness 120 damping 14.
- Letters sway: rotate [-6, 6] and y [0, -8] looping with per-letter delay for a wave.
- Hover the word: whole word scales 1.06 with a squash.

DESIGN SYSTEM — Retro 70s:
- Burnt orange #E2711D, mustard #F2B134, chocolate #4A2C1D, cream #F6E7CB.
- Rounded stripes and sunset arcs; soft, warm, groovy.
- Type: Shrikhand for display, DM Sans for small copy.

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.