Animated Hero Components

Dev Design Library indexes 39 Animated hero components from 20 open-source UI libraries, with the most coming from Velora UI, Aceternity UI, Shadcn Space, Pin UI and Kokonut UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the hero components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Hero components belong to the Sections group.

• Hero Video DialogMagic UI · ReactA hero video dialog component.
• Hero Liquid MetalCult UI · ReactSplit-layout hero section with responsive LiquidMetal shader visuals, CTA, and tech stack badges
• M
  Magnetkit WebLibraries.dev · ReactLanding page of a magnetic UI kit: particles and elements pulled toward the cursor.
• Background PathsKokonut UI · ReactA ribbon of lines in one color that keeps flowing at any size and parts around the cursor.
• Aurora HeroVengeance UI · ReactFluted glass dynamic hero with interactive switch
• Hero 01 - Agency Hero SectionShadcn Space · ReactClean agency hero section designed for SaaS and startup websites, featuring bold headline, gradient background, trust…
• Hero Cover RevealPixel Perfect · ReactA scroll-driven hero cover reveal — the hero pins in place while the next section slides up and covers it, scrubbed by…
• Dither Prism HeroComponentry · ReactStunning WebGL hero with advanced dithering, prismatic refraction, holographic iridescence, and center-focused energy.
• Hero Sevencnblocks · SvelteHero with gradient background and stats
• Hero Video DialogAnimations (Svelte) · SvelteA video dialog component with animated entrance effects, thumbnail support, and customizable animation styles.
• Radial IntroWatermelon UI · React
• Hero Onesv-efferd · SvelteA full hero composition with sticky header, editorial spotlight, and a marquee trust band.
• Hero sectionArc Library · ReactThree full screen SaaS heroes: a live dashboard rising from the bottom edge over a drifting mesh, a workflow graph…
• Hero 01FLX UI · ReactA centered serif hero with a soft gradient wash, pill CTA, and a floating integration cloud.
• Aurora heroVelora UI · ReactCentered hero with a drifting aurora, dotted backdrop, announcement pill and staggered copy.
• Luna HeroPin UI · React
• Interactive Grid HeroSpaceUI · ReactInteractive proximity-reactive square cell grid canvas that softly rounds and insets cells within a focused radius…
• Interactive Grid HeroSkecher UI · ReactA full-page field of square cells that locally soften and round around a fine pointer.
• Cinematic Stacked GalleryReactFrame · ReactA fullscreen hero gallery where inactive slides collapse into a stacked deck of thumbnails; clicking one crossfades it…
• Hero HighlightAceternity UI · React
• Shape HeroKokonut UI · ReactA landing hero where shapes drop in, pile up under the headline and can be grabbed and thrown.
• Hero 02 - Real Estate Hero SectionShadcn Space · ReactLuxury real estate hero section crafted for property listings, featuring immersive imagery, location highlight, key…
• Hero GeometricComponentry · ReactGeometric shapes and patterns for hero sections.
• Globe split heroVelora UI · ReactSplit hero with copy, CTAs and live stats beside an interactive dotted globe with arcs.
• Orbit HeroPin UI · React
• Hero ParallaxAceternity UI · React
• Hero 03 - Digital Agency Hero SectionShadcn Space · ReactHigh-impact digital agency hero section with cinematic background video, bold typography, brand driven headline, and…
• Developer tool heroVelora UI · ReactMinimal hero on a retro grid with a typed headline accent, an install terminal and two CTAs.
• Partylabs HeroPin UI · React
• Images SliderAceternity UI · React
• Hero ParallaxVelora UI · ReactHero copy over three card rows that slide apart as a tilted block flattens.
• LampAceternity UI · React
• Product screenshot heroVelora UI · ReactCentered headline above a dashboard in a browser frame with a border beam and a logo row.
• Macbook ScrollAceternity UI · React
• Wavy heroVelora UI · ReactBold centered hero over flowing waves, with a rotating headline word and avatar social proof.
• Parallax Hero ImagesAceternity UI · React
• Image SliderVelora UI · ReactFull-bleed image slider with crossfade-zoom, autoplay, dots, arrows and swipe.
• LampVelora UI · ReactA glowing lamp-line header that expands into view.
• Macbook ScrollVelora UI · ReactA CSS-drawn laptop pins in place and opens its lid as the screenshot scales up.

Libraries with Animated hero components

• Velora UI
• Aceternity UI
• Shadcn Space
• Pin UI
• Kokonut UI

Related categories

• Hero Components
• React Hero Components
• Tailwind CSS Hero Components
• Svelte Hero Components
• shadcn/ui Hero Components
• Animated Section Components
• Animated Footer Components
• Animated Logo Cloud Components
• Animated Feature Section Components
• Animated FAQ Section Components
• Animated Testimonials Section Components
• Animated CTA Section Components
• Animated Integrations Section Components
• Animated Stats Section Components