Animated Hero Sections for React
Full-screen openers for landing pages. Photo cards floating in 3D depth, a ring of cards you can spin with a drag, plus editorial, scenic and landing layouts. Each one ships its own headline, buttons and copy props, and works in light and dark mode.
11 components · Browse all components
Components
Scenic Hero
Editorial Hero
Landing Hero
Floating Cards Hero
Orbit Hero
Gallery Wall Hero
SDK Hero
Trail Hero
Type Hero
Desk Hero
Orbit Prompt Template
FAQ
- Can I swap the images and copy in a hero?
- Yes. Headline, supporting line, buttons and images are all props, so you replace the defaults without touching the layout or the motion.
- How do I install the components in Heroes?
- With the shadcn CLI. Each component page lists its exact command: free components install from a public URL (npx shadcn add https://useplanes.com/r/<name>.json), Pro components install by name (npx shadcn add @useplanes/<name>) after npx @useplanes/cli init --key <key>.
- Do they work with Next.js App Router and Tailwind CSS v4?
- Yes. Every component is a React 19 client component styled with Tailwind CSS v4, and works in Next.js App Router, Vite, or any React app with Tailwind CSS v4.
- Are the components in Heroes free?
- They are part of Planes Pro, a one-time license that covers every component and future additions. The catalog also has free components in other categories.
- What do they depend on?
- Motion (formerly Framer Motion) is the only runtime animation dependency. The CLI writes the .tsx source into your project, so there is no Planes package to keep updated.