Landing Page Sections
Orbit Image Gallery Hero Section
A hero section where 12 to 18 image cards sit in a circular orbit around a centered headline and CTA row. Each card hovers up and flips 180 degrees on interaction. Perfect for image-heavy product landing pages (avatar generators, portrait studios, photo tools) where the imagery is the story.
Live preview
No extra dependencies. React 18+ and Tailwind CSS v3+ assumed. Save as OrbitGalleryHero.tsx.
Or rebuild it with a prompt
Paste the prompt into the tool you already use. Each version is written specifically for that tool, matched to the same design constraints so the output stays consistent.
Build components/OrbitGalleryHero.tsx. A hero section, min-h-screen, bg-white. In the background: an absolute layer with an image gallery arranged in a circle. Each card is 62x78px, positioned via translate(sin(angle)*radius, -cos(angle)*radius) rotate(angle) from the center. Cards use CSS transform-style: preserve-3d to enable a rotateY(180deg) flip on hover, with a translateY(-12px) bounce (cubic-bezier(0.34,1.56,0.64,1)). Two faces per card (front and back), both showing the same image (or different images if provided). Foreground: pointer-events-none flex column, centered vertically and horizontally, with a headline (text-[16-17px] font-semibold tracking-tight text-black leading-snug max-w-[280px]), a subtitle (text-[11px] text-[#737373] leading-relaxed max-w-[280px]), and two CTA buttons (white outline + solid blue #2B65F6). Wrap CTA buttons in a pointer-events-auto div. Props: title?, subtitle?, primaryCta?, secondaryCta?, images?, radius? (default 290), cardWidth? (62), cardHeight? (78). Respect prefers-reduced-motion (disable hover flip and bounce). Single default export. Font-sans throughout.
How to use this Orbit Image Gallery Hero Section as a prompt
- Paste the prompt into Claude Code, Cursor, or Google Stitch to generate an Orbit Image Gallery Hero Section with a circle of React cards rotating around a centered headline.
- Best for portfolio landing pages, agency hero sections, and product galleries that need a memorable centerpiece.
- Ask Codex or Lovable to change the card count from six to any number, or wire the orbit speed to a scroll trigger.
How to use this Orbit Image Gallery Hero Section as code
- Drop the React + Tailwind file into `components/hero/` and pass an images array plus a centered headline prop.
- Uses framer-motion for the orbit rotation and card flip on hover. Reduced-motion users see a static grid instead.
- Works with Next.js App Router, Remix, Astro islands, and any React 18+ setup.
Other React landing page section components like the Orbit Image Gallery Hero Section
More landing page section components with matching AI prompts for Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch.
Landing Page Sections
Apple-Style Product Hero Section
Apple-style product hero section for landing pages, product launches, and marketing sites, with a display headline, one subtitle, and two text links. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Landing Page Sections
Parallax CTA Banner
Parallax CTA banner with a background image moving at 0.4x scroll speed and a headline that scales up as the section enters the viewport, for landing page conversion sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Landing Page Sections
Gradient Scroll Footer
Gradient scroll footer where the warm sunset gradient deepens as the reader scrolls into it, for editorial landing pages and parallax narrative sites. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Related prompts for landing page sections
Frequently asked questions about the Orbit Image Gallery Hero Section
How do I add a Orbit Image Gallery Hero Section to my website?+
Copy the source code from the "Copy code" button above and save it as a .tsx file in your components folder. The Orbit Image Gallery Hero Section is built with React and Tailwind CSS — add those as dependencies if they are not already in your project. Import and render the component wherever you need it. Every prop is optional and typed.
Can I use the Orbit Image Gallery Hero Section with Claude Code, Cursor, or Lovable?+
Yes. Each prompt tab above is tuned specifically for Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch. Paste the prompt into whichever AI coding tool you are using and it will generate a Orbit Image Gallery Hero Section matched to your existing file structure, design tokens, and brand color. Claude Code and Cursor work best when your project is already open — they slot the component directly into your codebase. Lovable and Replit are fastest for a standalone preview.
How do I customise the hero design and colors?+
The Orbit Image Gallery Hero Section uses Tailwind utility classes throughout, so every color, spacing value, and font weight is one class away from changing. Replace any color class with your brand token (for example, swap `bg-black` for `bg-[#your-hex]`). To change the animation timing, update the `duration-` or `delay-` classes, or pass new values into the Framer Motion `transition` prop if the component uses it. For a full brand restyle, paste the component into Claude Code or Cursor and describe your design system.
Is the Orbit Image Gallery Hero Section free to use in commercial projects?+
Yes. Every component in the AI Library, including the Orbit Image Gallery Hero Section, is free to copy, adapt, and ship in commercial projects, client work, SaaS products, open-source repos, and internal tools. No attribution required, no license fee, no royalty.
What gallery frameworks does the Orbit Image Gallery Hero Section support?+
The Orbit Image Gallery Hero Section is a plain React 18 client component written in React + Tailwind. It runs on Next.js (App Router and Pages Router), Vite, Remix, Gatsby, and any other framework that supports React 18 and Tailwind CSS v3. Keep the "use client" directive at the top of the file when you paste it into a Next.js App Router project.
Does the Orbit Image Gallery Hero Section work with TypeScript?+
Yes. The component is written in TypeScript with fully typed props and exported interfaces. Paste it into a TypeScript project and it compiles without modification. If you need a plain JavaScript version, ask Claude Code or Cursor to strip the type annotations.
Can I combine the Orbit Image Gallery Hero Section with other AI Library sections?+
Yes. Every component in the AI Library is standalone with no shared global state, no conflicting resets, and no namespace collisions. Drop the Orbit Image Gallery Hero Section alongside any other section component. They are compatible with shadcn/ui, Radix UI, MUI, and any other component library you are already using.