Three taglines rotate every 3.5s with a subtle 700ms opacity crossfade:
1. Inspect any request. Mock any response. (default)
2. Your HTTP bin, on your machine.
3. Send. Capture. Mock. No signup.
Implementation notes:
- Client component, default tagline in initial SSR HTML for SEO/no-JS
- ARIA: aria-live=polite on container, aria-hidden on inactive items,
aria-atomic=true; prefers-reduced-motion suppresses both the timer
and the fade (via motion-reduce:transition-none + early-return guard)
- No CLS: container has fixed h-7 md:h-8 height; absolute children
crossfade in place
- Hierarchy: tagline below H1 (mb-6), above hero sub (mb-6 from tagline
container, mb-10 from sub to CTAs)
Tailwind v4 fixes that were needed to make this visible:
- app/globals.css: switch to @import 'tailwindcss' with explicit
@source globs (auto-detection misses components when Turbopack
workspace root is ambiguous)
- app/globals.css: drop redundant reset;
Tailwind v4 Preflight handles it, and an unlayered selector
beats @layer utilities so it was silently killing mb-*, mx-*, etc.
- app/globals.css: wrap in @layer base
so text-white / text-zinc-* utilities can override it
- next.config.ts: pin turbopack.root to project dir so the build
works regardless of shell cwd (was running into the paperclip
workspace root during agent sessions)
bcb4f1688e