React Hero Section Components
ReactFrame has 18 React hero sections (9 free): social-proof marquee heroes, scroll-driven media reveals, coverflow and gallery heroes, video scroll stories, app download heroes and founder introductions.
How to choose
- SaaS and startups: marquee-hero-section or scroll-zoom-media-reveal.
- Agencies and services: coverflow-services-hero.
- Apps: download-section or download-section-glass.
- Keep one h1 in the hero with your main keyword; several of these render it for you.
All 18 components
- Scroll Zoom Media RevealPremium
- A self-contained scroll-scrubbed media reveal: a small rounded frame expands to full bleed as its internal scroll container is scrolled, then unveils a glassmorphism caption, an optional count-up stat row, and a scroll indicator.
- Hover ComparePremium
- A full-bleed WebGL hero where a mouse/touch trail paints a soft mask that reveals a bottom image beneath a top image, with an optional click shockwave and a synthetic wandering cursor that takes over when idle.
- About Founder SectionPremium
- A two-column About Us hero, heading, description and CTAs on one side, a founder card with quote, bio paragraphs, and a signature (or script-font fallback) on the other.
- Video Scroll StoryPremium
- A self-scrolling, pinned full-bleed video story, each scene crossfades in with its own background color, a staggered word-by-word title reveal, an optional giant ambient scene number, progress dots, a vertical progress bar, and a scroll hint.
- Marquee Hero SectionPremium
- A theme-aware (paper/glass) social-proof hero, centered badge, heading, subheading, and CTA button above a two-row infinite photo marquee with faded edges, hover captions, and opposite/same scroll directions.
- Download SectionPremium
- An app-download hero, badge, heading, description, a scroll-in feature list, star rating, App Store / Google Play buttons, and a hand-built iPhone frame with an animated revenue chart card.
- Hero Scroll GalleryPremium
- A cinematic hero, a content panel with an animated ticker, eyebrow, heading and CTAs beside a tilted three-column photo wall that drifts continuously, columns alternating direction and speed.
- Download Section GlassPremium
- A centered app-download hero, a light/dark theme toggle, glass pill CTA, heading, description, App Store / Google Play buttons with star rating, and a three-phone fan stage with an ambient glow and bottom fade mask.
- Coverflow Services HeroPremium
- A split hero with eyebrow/heading/description/button content on one side and a 3D coverflow slide deck on the other, with staggered text reveal, cursor image parallax, drag/keyboard navigation, a light/dark theme, optional autoplay, and per-text uppercase and color controls.
- Simple Hero SectionFree
- A landing page hero with an announcement pill, a headline whose words blur in one by one with an accent highlight, two buttons, avatar and rating proof, and a product window that rises in, over a grid and a glow that drifts toward the pointer.
- npx shadcn@latest add https://reactframe.com/r/simple-hero-section.json
- Split Screen HeroFree
- A two-sided hero with a shared headline: two full-bleed photos meet at a seam, and the half under the pointer opens up to show its description and button. Stacks on phones.
- npx shadcn@latest add https://reactframe.com/r/split-screen-hero.json
- Video Text Mask HeroFree
- A hero where a video plays through one giant word. Press play and the letters rush past the camera to open up the full film; Close or Escape brings them back.
- npx shadcn@latest add https://reactframe.com/r/video-text-mask-hero.json
- Parallax Layers HeroFree
- A drawn mountain range in depth layers that follow the pointer, with the headline set between the ridges so the near peaks pass in front of it. Takes your own artwork too.
- npx shadcn@latest add https://reactframe.com/r/parallax-layers-hero.json
- Spotlight Cursor HeroFree
- A hero in a dark room: the pointer carries a soft light that lights up the headline and uncovers notes hidden around it. Left alone, the light wanders by itself.
- npx shadcn@latest add https://reactframe.com/r/spotlight-cursor-hero.json
- Typewriter Search HeroFree
- A search-first hero whose box types out example searches by itself, then hands over to real search with live suggestions, highlighted matches and full keyboard support.
- npx shadcn@latest add https://reactframe.com/r/typewriter-search-hero.json
- Phone Fan HeroFree
- An app launch hero: five phones open out from a stack into a fan, and the one you point at rises while its neighbours step aside. Comes with drawn screens, or use screenshots.
- npx shadcn@latest add https://reactframe.com/r/phone-fan-hero.json
- Tile Flip HeroFree
- A photo hero cut into a grid of tiles that flip in a wave to reveal the next picture. Click any tile and the wave starts from there. Autoplay can be paused.
- npx shadcn@latest add https://reactframe.com/r/tile-flip-hero.json
- Bento HeroFree
- A black and white bento of rounded tiles around a serif headline. Scroll and the centre photo grows to fill the hero while the other tiles slide away, revealing a heading, counting stats and a glass button.
- npx shadcn@latest add https://reactframe.com/r/bento-hero.json
Questions
- Is there a free hero section?
- The dedicated hero blocks are premium. For a free hero, put your own heading and CTA over a free animated background such as noise-background.
- Are these components free?
- 9 of the 18 are free (Simple Hero Section, Split Screen Hero, Video Text Mask Hero, Parallax Layers Hero, Spotlight Cursor Hero, Typewriter Search Hero, Phone Fan Hero, Tile Flip Hero, Bento Hero); the others are premium and included in All-Access.
- How do I install them?
- Free components install with the shadcn CLI, for example: npx shadcn@latest add @reactframe/<slug>. You get the full React + Tailwind source in your project, with Motion as the only animation dependency.
Related collections
Want a whole page built from these? Ask your AI to build it with ReactFrame.