A mosaic of shop categories with gradient scenes and product silhouettes. Tiles wipe in on scroll and zoom their image on hover while an arrow and tagline slide in.
Shop by category
Six collections from independent makers in Copenhagen, Kyoto and Oaxaca. Free returns for 60 days.
npx shadcn@latest add https://hyperblur.dev/r/shop-category-mosaic.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/shop-category-mosaic.tsx.
import { ShopCategoryMosaic } from "@/components/hyperblur/shop-category-mosaic"
<ShopCategoryMosaic title="Shop the collections" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Shop by category" | Small label above the title. |
| title | string | "Made for slow mornings at home" | Section heading. |
| subtitle | string | "Six collections from independent makers..." | Supporting text. |
| categories | { name: string; count: number; href: string; tagline?: string; image?: string; palette?: [string, string, string]; object?: "bottle" | "chair" | "lamp" | "shoe" | "bag" | "plant" }[] | 6 sample categories | Tiles in mosaic order; the first is the large one. Pass `image` for a photo, otherwise `palette` and `object` draw the scene. |
| cta | { label: string; href: string } | { label: "View all 700 products", href: "#" } | Button in the header. |
| accent | string | "#fb923c" | Accent for the eyebrow and focus rings. |
| onCategoryClick | (category: ShopMosaicCategory, index: number) => void | Called when a tile is clicked, before navigation. |