Hero Section With Animated Integrations

A dark integrations hero: app logos ride a half-ring like a conveyor while comets race along its edges.

npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Features

App logos ride the ring like a conveyor, bobbing in and out of the band and fading at its ends
Comets race along both edges of the band, and a dashed line flows through it
The pitch sits inside the arc; on phones the arc stacks above it
A two-tone Mona Sans headline, white fading to grey
Everything holds still for reduced motion; app names are listed for screen readers

Best for: Integration platforms, APIs and AI tools that sell how much they connect to.

npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Then copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.

Prop	Type	Default	Description
title	string	-	The headline, in white.
accent	string	-	The headline's second half, in grey.
description	string	-	The line under the headline.
primaryCta	{ label: string; href: string }	-	The white button.
secondaryCta	{ label: string; href: string }	-	Optional frosted button.
facts	string[]	-	Short facts under the buttons.
apps	ArcApp[]	-	Apps along the arc: label, icon and its colour.
nav	{ brand: { name; icon }; links: Cta[]; cta: Cta }	-	Optional built-in navbar in this hero's style.
className	string	-	Extra classes for the section.

Is the Hero Section With Animated Integrations free to use?

Yes. Hero Section With Animated Integrations is free to copy into your own projects. Open the Code tab and paste the files into your app.

Does Hero Section With Animated Integrations work with Next.js and React?

Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).

Can I use Hero Section With Animated Integrations in JavaScript instead of TypeScript?

Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.

What does Hero Section With Animated Integrations need installed?

motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.

Is Hero Section With Animated Integrations accessible?

Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.