# new-design-gallery: I shipped a catalog UX, not another tabbed lander kit

Source: https://www.michaelchurley.com/blog/new-design-gallery-embla-catalog-not-landers  
Published: 2026-06-22  
Author: Michael C. Hurley  
Tags: new-design-gallery, design-gallery, nextjs, embla, tailwind, catppuccin, vitest, vercel, portfolio, martech, catalog

![Design Gallery home with Embla strip and category filters](/blog/new-design-gallery-embla-catalog-not-landers/screenshots/gallery-home.png)

## Who

I needed a catalog — filter, scroll, lightbox, share a slug — not another tabbed full-lander kit.

Frontenders on Next 16 + Embla. Operators comparing this private catalog to public mockup-gallery. Not twelveux. Not the WebGL playground.

## What

Package `new-design-gallery` **0.1.0**. Next 16. React 19. Tailwind 4.

`DesignGallery`: Embla carousel + category filters + Radix lightbox + Phosphor share (`navigator.share` → clipboard). Eleven metadata cards in `designs.ts` — hospitality, contractors (incl. King's Roofing NC), professionals, SaaS. All thumbs `placeholder.co/800x600`. Detail routes via `generateStaticParams`. Golden-ratio + Catppuccin CSS. Vitest **39** cases; length assert still says **10** after the 11th card.

![Embla carousel strip](/blog/new-design-gallery-embla-catalog-not-landers/screenshots/embla-carousel.png)

## Where

Live: https://new-design-gallery.vercel.app — title Design Gallery.

Repo: https://github.com/michaelmonetized/new-design-gallery (private).

Sibling contrast: HurleyUS/mockup-gallery · mockup-gallery-nu.vercel.app (ten full landers / tabs).

![Contractors filter](/blog/new-design-gallery-embla-catalog-not-landers/screenshots/contractors-filter.png)

## When

**2026-03-28, 10:52 PM ET.** `a968bd6` — carousel, filters, lightbox, share, 39 tests.

**2026-06-22, 4:55 PM ET.** `9558f07` — AGENTS/uncap/CSS + King's Roofing NC.

**2026-06-22, 5:57 PM ET.** HEAD `95553df` — empty nightly. Three commits. Still 0.1.0.

## Why

Catalog UX vs lander kit. Same March 28 era, different product. Placeholder thumbs until real art. Test drift is the scar.

What belongs on card eleven — another contractor, or a real screenshot?

![Detail Mountain Lodge](/blog/new-design-gallery-embla-catalog-not-landers/screenshots/detail-mountain-lodge.png)
