Swatch Bloom

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/swatch-bloom.tsx.

Install the pastetaste component "Swatch Bloom" (swatch-bloom) into this Next.js project and use it.

What it is: A shelf of coloured product cards whose images trail and roll with the swipe. Tap one and its colour blooms into a curved hero, the product lifts out and lands upright, details rise in; Back folds it home.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/swatch-bloom.json
   (it writes components/pastetaste/swatch-bloom.tsx; install any npm packages it reports: motion@^12.23.0).
2. Import it: import { SwatchBloom } from "@/components/pastetaste/swatch-bloom" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- items: SwatchBloomItem[] — Cards on the shelf: id, title, price, color, image, plus optional ink, alt, shape ('cutout' | 'round'), crop, tilt, meta, description, options and extra.
- more: SwatchBloomItem[] — Rows under the shelf. They open the same detail view, blooming from their round thumbnail.
- overline / title / header / footer: ReactNode — Mono line top left, the screen heading, anything under the heading (a subtitle, your own filters) and anything after the rows (a note). All fade with the list.
- moreLabel: string = 'More' — Mono label above the rows; the row count is printed on the right.
- label: string = 'Featured' — Accessible name of the shelf (it is announced as a carousel).
- actionLabel / addedLabel: string = 'Add to bag' / 'Added' — Text of the detail button and the confirmation it rolls to after a tap.
- onAdd: (item, choices, total) => void — Called by the detail button with the item, the chosen option labels by group name and the total price.
- count / bag: number / boolean = 0 / true — Starting number of the bag counter top right, and whether to show it. Each add bumps it.
- open / onOpenChange: string | null / (id) => void — Controlled open item; null closes. onOpenChange fires on every open and close, controlled or not.
- formatPrice / currency / locale: (n) => string / string / string = Intl / 'EUR' / 'en-IE' — How prices are written. Whole numbers drop the decimals by default.
- drift: number = 0.22 — Most an image trails behind a swipe, as a fraction of the card width; it settles back into place when the shelf stops. 0 turns it off.
- spin: number = 18 — Degrees an image turns per card of scroll, so plates and products roll as they pass.
- duration: number = 0.66 — Seconds the bloom takes to open; closing takes 84% of it.
- className / style: string / CSSProperties — On the root. Set --pt-ground, --pt-ink, --pt-muted, --pt-line and --pt-radius here to restyle.

Live preview: https://pastetaste.com/c/swatch-bloom
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 14