- Compatibility
- React >=19.0.0 · framer-motion ^12.0.0 · Tailwind >=4.0.0 · Client-only
- Browsers
- chrome >= 100, safari >= 16, firefox >= 100
- Mobile strategy
- simplified
- Reduced motion
- Gated via Framer Motion's `useReducedMotion()`, checked after mount to avoid an SSR/client markup mismatch. When active, the headline word-pop collapses to a plain opacity fade (no translate/scale/rotate/blur) and the subheadline/CTA fade-up drops its y-translate — both keep their staggered delays so content still arrives in the same choreographed order, just without motion. The aurora background's CSS drift animation is disabled via the global `prefers-reduced-motion` media query in hero-aurora.css. glass-nav and mouse-reactive-gradient apply their own reduced-motion guards independently as layered dependencies.
- Performance
- ~4KB gzip for this file; framer-motion itself is a peer dependency most Safari Motion consumers already carry — All entrance animations run once on mount via `animate="visible"` (not scroll-triggered, this is above-the-fold hero content) and settle to static transforms — no ongoing per-frame work once the choreography completes, aside from the CSS-only aurora drift and the inherited mouse-reactive-gradient pointer listeners. Word-pop delays are computed once from the headline word count (no re-render loop). Aurora drift and dot-grid are pure CSS (transform/opacity-safe, GPU-composited). The only layout-affecting cost is the initial word span mounting, which is a fixed, small DOM size proportional to headline word count.
- Accessibility
- Renders a single `<section>` containing the real `<h1>` headline (split into `<span>` words purely for animation — the text content and reading order are unaffected, no aria-hidden duplication). Eyebrow, subheadline, and CTAs are plain text/links, fully readable with motion off. Inherits glass-nav's dialog/focus-trap mobile menu and mouse-reactive-gradient's aria-hidden decorative background layer.
- Known limitations
- Designed as an above-the-fold, first-section hero; the sticky nav and min-h-[100dvh] layout assume it opens the page rather than sitting mid-scroll.
- The word-pop entrance always plays on mount (not scroll-triggered) — reusing this section lower on a long page would replay unless the consumer wraps it in their own whileInView guard.
- Aurora background uses color-mix() and backdrop-filter (via mouse-reactive-gradient), same modern-browser baseline as its dependency.
- License
- MIT