Gallery Hero
A portfolio hero with copy beside a 3D marquee of work: tilted columns scroll in opposite directions over a dot field and warm glow, and pause on hover.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/gallery-heroProps
| Prop | Type | Default | Description |
|---|---|---|---|
title* | React.ReactNode | - | The main headline. |
images* | GalleryImage[] | - | Images shared out across the columns, in order. Short columns repeat to fill. |
eyebrow | string | - | Small label above the title. |
description | string | - | Supporting text under the title. |
children | React.ReactNode | - | Calls to action. |
note | React.ReactNode | - | Small print or proof under the actions. |
columns | 2 | 3 | 3 | Number of image columns (two on phones either way). |
duration | number | 40 | Seconds for a column to scroll through once. |
tilt | boolean | true | Tilt the gallery back for depth. |
glowColors | [string, string] | ["#f59e0b", "#ec4899"] | Two colours for the glow behind the gallery. |
className | string | - | Extra classes for the section. |
