Image marquee

Light hero with a column of drifting image cards.

Usage

import { HeroMarquee } from '@/components/blocks/hero-section-15'


<HeroMarquee />


<HeroMarquee
  title="Your trips, beautifully kept."
  description="Drop in photos from any camera and get a clean, shareable album in minutes."
  cta={{ label: 'Make an album', href: '/signup' }}
  secondaryCta={null}
  images={[
    { src: '/photos/coast.webp', alt: 'A quiet coastline at dawn', width: 1200, height: 900 },
    { src: '/photos/market.webp', alt: 'A busy morning market', width: 1200, height: 900 },
  ]}
  speed={0.8}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/hero-section-15

npx shadcn@latest add @pastaui-pro/hero-section-15

yarn dlx shadcn@latest add @pastaui-pro/hero-section-15

bunx --bun shadcn@latest add @pastaui-pro/hero-section-15

Source

Props

Image marquee props
Prop	Type	Default	Description
brand / brandHref	string	= Pasta UI / #	Brand name and link next to the logo mark, top left of the card.
navLinks	{ label: string; href: string }[]	= Gallery, Studio, Pricing, Journal	Links beside the brand. Below sm they hide and the first link shows as a small pill on the right.
title	string	= 'Ideas, pictured in seconds.'	The headline, set at 48px and 64px from sm up.
description	string	= Pasta UI turns a single sentence into studio-grade images…	Supporting copy under the title.
cta	{ label: string; href: string }	= Start creating	Blue primary button with an arrow.
secondaryCta	{ label: string; href: string } \| null	= Browse the gallery	Quiet bordered button beside the primary CTA. null hides it.
images	{ src: string; alt: string; width: number; height: number }[]	= Eight sample images	Cards in the moving column, shown at a fixed 3:2 aspect with object-cover and lazy loading. Short lists repeat so the loop never shows a gap. To change the defaults, edit the heroMarqueeImages array near the top of the file.
speed	number	= 1	Multiplier for how fast the column moves. 0 freezes it.
pauseOnHover	boolean	= true	Pause the loop while the pointer is over the column.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Override the --pp-* theme variables inline.