Free animated heroes for React
Complete animated hero sections for Next.js landing pages, with readable content, real calls to action and reduced-motion support. Every example works with Next.js and Tailwind, and the source installs directly into your project.
7 components
HeroesGSAPambientdark preferredAurora HeroFree animated hero section for Next.js and React: masked headline reveal over a drifting aurora background, GSAP powered, accessible, reduced motion safe.View component HeroesGSAPambientdark preferredDot Matrix HeroFree animated hero section for Next.js and React: masked word reveal over a dot grid swept by a soft glow, GSAP powered, accessible, reduced motion safe.View component HeroesGSAPambientdark preferredGradient Mesh HeroFree mesh gradient hero for Next.js and React: masked GSAP headline reveal over a drifting gradient mesh background, accessible, reduced motion safe.View component HeroesGSAPambientdark preferredGrid Beams HeroFree animated hero section for Next.js and React: staggered headline and CTA reveal over a grid of traveling light beams, GSAP powered, reduced motion safe.View component HeroesGSAPambientdark preferredMarquee HeroFree hero section with marquee for Next.js and React: GSAP block reveal plus a full width scrolling text strip under the CTAs, reduced motion safe.View component HeroesGSAPambientdark preferredSpotlight HeroFree interactive hero section for Next.js and React: a cursor-following spotlight behind a staggered reveal, GSAP powered, calm and complete on any device.View component HeroesGSAPambientdark preferredStats HeroFree hero section with animated stats for Next.js and React: headline reveal plus GSAP counters that count up on view, SSR safe and reduced motion safe.View component