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
Preview
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://paulkeys.org/r/hero-parallax.jsonAdds 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
| Prop | Type | Default |
|---|---|---|
products*Cards, split evenly across three rows | HeroParallaxProduct[] | — |
childrenHero copy shown above the rows | React.ReactNode | — |
driftHow far each row slides sideways over the scroll, in px | number | 480 |
cardClassNameExtra classes for every card, e.g. to resize them | string | — |
containerScrollable 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.