Project Gallery
Filter a two-column portfolio and open each project in a dialog with keyboard navigation.
- Dependencies
- gsap
- Size
- 506 lines
- Controls
- 9 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/project-gallery.json1 · Dependencies
npm install gsap2 · Copy the source
components/onycx/project-gallery.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the project-gallery.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| projects | GalleryProject[] | — | { title, category, image, imageAlt?, note?, href? }; filters are built from the categories in order of first appearance. |
| eyebrow / note | string | — | Eyebrow row with a 5px dot and the small note at the right. |
| heading / intro | string | — | Uppercase heading (newlines break; *asterisks* set the serif accent at .88em) and the muted intro. |
| allLabel / countLabel | string | "All spaces" / "perspectives" | Reset filter and the noun after the live count. |
| pillSuffix / dialogSuffix / linkLabel | string | "Visualization" / "Concept visualization" / "Explore this concept" | Text after the category on card pills and in the dialog eyebrow, and the dialog link label. |
| footnote | string | — | Centred note under the grid; empty hides it. |
| background / ink / muted / accent | string | "#f4f6f6" / "#182831" / "#56646c" / "#00638e" | Palette; the active filter fills with ink and shows a 4px dot; accent is the focus ring. |
| overlap | boolean | true | Section rises y 65 → 0 with top radii 10 → 48px from its top at the viewport bottom to 28% (scrub 1.2); it also sits 30px over the previous section. |
| reveal | boolean | true | Heading and intro fade up 28px over 1.1s power2.out at top 94% (once). |