Three taglines rotate every 3.5s with a subtle 700ms opacity crossfade
between the H1 and the hero sub on the hatch.surf landing page:
1. Inspect any request. Mock any response. (default, in initial HTML)
2. Your HTTP bin, on your machine.
3. Send. Capture. Mock. No signup.
Implementation:
- site/index.html: <div class='hero-tagline' aria-live=polite> with three
<p class='hero-tagline-item'> children stacked; default #1 has
is-active class and no aria-hidden (for SEO + no-JS users)
- site/style.css: .hero-tagline uses position:relative with fixed
height: 1.7em (no CLS during rotation); absolute children crossfade
via transition: opacity 700ms var(--ease-out); font: JetBrains Mono
weight 500 in var(--text-secondary); clamp(0.85rem, 2.2vw, 1rem)
so mobile (375px+) fits the longest tagline on one line
- site/main.js: initRotatingTagline() in the existing IIFE; setInterval
every 3500ms swaps is-active and aria-hidden between siblings;
early-returns if prefers-reduced-motion is set, so the default
tagline stays visible without animation
- Spacing: H1 mb-sp-6, tagline mb-sp-6, sub mb-sp-8 keeps the
existing 24px/24px/32px rhythm unchanged below the headline
Note: site/index.html (not the Next.js app under app/ + components/)
is what hatch.surf/nginx actually serves. The Next.js work from
the earlier failed run was reverted.
- Updated index.html with new Three.js canvas and anime.js data attributes
- Updated style.css with dark theme design system
- Added main.js with Three.js particle network and scroll animations
- All files from ELF-195 deliverables
Co-Authored-By: Paperclip <noreply@paperclip.ing>
