A tilted wall of photographs in columns that drift in opposite directions at different speeds as you scroll, around a pinned title and call to action. Tiles lift and show their caption on hover.
Field notes / 48 photos
npx shadcn@latest add https://hyperblur.dev/r/parallax-floating-gallery.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/parallax-floating-gallery.tsx.
import { ParallaxFloatingGallery } from "@/components/hyperblur/parallax-floating-gallery"
<ParallaxFloatingGallery mode="page" height={600} />| Prop | Type | Default | Description |
|---|---|---|---|
| tiles | { title: string; colors?: [string, string, string]; shape?: "sun" | "dune" | "tide" | "orb"; tall?: boolean }[] | eight coastal scenes | Tiles drawn with gradients. They repeat across the columns. |
| eyebrow | string | "Field notes / 48 photographs" | Small label above the title. |
| title | string | "The coast at the edges of the day" | Pinned headline. |
| cta | string | "Open the gallery" | Button label. Pass an empty string to hide it. |
| onCtaClick | () => void | undefined | Called when the button is pressed. |
| onTileClick | (tile: FloatingTile, index: number) => void | undefined | Called when a tile is pressed. |
| mode | "inner" | "page" | "inner" | inner owns a scroll viewport of the given height; page pins the stage while the nearest scrolling ancestor (or the window) scrolls past it. |
| height | number | 460 | Height of the pinned stage in pixels. |
| progress | number | undefined | Controlled progress from 0 to 1. When set, scrolling and autoplay are ignored. |
| autoPlay | boolean | false | Loops the progress back and forth on its own. In inner mode the pointer takes over and the viewport becomes scrollable while hovered. |
| duration | number | 14000 | Length of one autoplay loop in milliseconds. |
| length | number | 2.6 | Scroll distance as a multiple of the stage height. |
| range | number | 220 | How far, in pixels, the fastest column travels. |
| accent | string | "#2f7bff" | Accent color for focus rings, indicators and highlights. |
| className | string | undefined | Extra classes on the root element. |