Skip to content

Interactive Forms · Warm Editorial

Ink Underline Contact Form

A minimal contact form with floating labels and an underline that draws from the caret side on focus, plus a send button that flies its arrow away.

  • Framer Motion
  • Form
  • Floating Label
  • Focus

The full prompt

Show the prompt that defines the layout, motion and design language
Build a "Ink Underline Contact Form" React component.

CONCEPT: A letter-style contact form with three fields (name, email, message). Labels float on focus or when filled, and a cobalt underline draws across under the focused field.

LAYOUT & CONTENT:
- Fields sit on 1px charcoal baselines, no boxes. Labels in small grotesk; floating state shrinks to 10px mono uppercase.
- Submit: charcoal pill 'Send letter' with arrow. Success replaces the form with 'Thank you. We reply within a day.' in italic serif.

INTERACTIONS & MOTION:
- Label: animate y (0 → -18) and scale (1 → 0.8) when focused or non-empty, spring stiffness 500 damping 35.
- Underline: absolutely positioned 2px cobalt line scaleX 0 → 1 origin-left on focus.
- Submit: on click the arrow translates x 40 and fades, then form crossfades to success state (AnimatePresence mode='wait'). Validate email with a simple regex and shake the field (x keyframes [0,-6,6,-4,4,0]) if invalid.

DESIGN SYSTEM (non-negotiable):
- Palette: paper background #FAF9F6, deep charcoal #121212 for text and 1px borders, ONE warm accent: cobalt #1D4ED8 or terracotta #D9534F. Secondary surface #F2EFE8.
- Typography: Swiss / editorial. A tight grotesk for UI (Instrument Sans, Inter Tight or similar) with negative tracking on display sizes; an italic serif (Instrument Serif) used sparingly for one emphasized word.
- NO dark-mode neon, NO glow, NO glassmorphism, NO backdrop blur, NO purple-to-blue gradients, NO emoji icons. Solid fills, hairline rules, honest shadows (hard offset or none).
- Motion: Framer Motion with spring physics (type: "spring", stiffness 300-500, damping 20-35). Animate transform and opacity only. Respect prefers-reduced-motion via useReducedMotion().
- Icons: lucide-react, 1.5px stroke.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring (2px cobalt, 3px offset), 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".

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.