Velora UI

Hero Parallax

Hero copy over three card rows that slide apart as a tilted block flattens.

  • 2.1 KB gzipped
  • Deps: motion/react
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0

Product studio

We design and ship software people love

Fifteen launches this year, from analytics suites to brand systems. Scroll to browse the work.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/hero-parallax.json

Adds components/velora/hero-parallax.tsx, installs motion.

Examples

Agency portfolio

Twelve smaller cards with a shorter drift for a studio's project showcase.

Nordlicht Studio · Interiors & architecture

Spaces that feel considered

Twelve recent homes and workplaces across Oslo, Riga and Copenhagen.

Props

PropTypeDefault
products*

Cards, split evenly across three rows

HeroParallaxProduct[]—
children

Hero copy shown above the rows

React.ReactNode—
drift

How far each row slides sideways over the scroll, in px

number480
cardClassName

Extra classes for every card, e.g. to resize them

string—
container

Scrollable element to track instead of the window

React.RefObject<HTMLElement | null>—

Also accepts every <div> attribute, forwarded to the root element.

HeroParallaxProduct

interface HeroParallaxProduct {
  /** Caption on the card; also the link's accessible name */
  title: string;
  /** Image URL, shown with empty alt text since the title labels it */
  image: string;
  /** Turns the card into a link */
  href?: string;
}

Accessibility

Reduced motion
The block renders flat with no tilt, slide or fade, and the rows wrap so every card is visible without scrolling sideways.
Keyboard
Cards with an href are links in the Tab order with a visible focus ring; a focused card that has drifted past the edge slides its row back into view.
Screen readers
Cards are announced as three lists; each card's accessible name is its visible title, and the image uses empty alt text.