Colourway Product Card
One photograph, every colourway: the shot is greyscaled and multiplied into the chosen colour, so a small label with six colours and one product photo gets six product photos.
DOM + CSS0 deps1 file · 10 KB TSXreduced-motion aware
Props
"use client";
import { useRef, useState } from "react";
/**
* ColourwayProductCard — one photograph, every colourway.
*
* A small apparel or homeware label has one good product shot and six
* colours. This card greyscales the shot and multiplies it into the chosen
* colour, so the same photograph becomes the sage one, the rust one and the
* black one — and the plate colour is the card's single saturated field.
* Choosing a colourway crossfades the plate rather than swapping it.
*
* THE SWATCHES ARE A RADIO GROUP. Squares, not circles (a square reads as a
* fabric swatch), each a real radio with the colour's NAME as its accessible
* name, arrow keys to move, one tab stop. A sold-out colourway stays on the
* card, struck through, and swaps the button for "Notify me" — it is a state,
* not a deletion.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this component
Small apparel and homeware labels have a specific problem: one good product photograph and six colourways, five of which have never been shot. The usual answer is a row of coloured circles beside a photo of the wrong colour. This card treats the photograph like a halftone under a one-colour plate: it is greyscaled and multiplied into the chosen colour, so the sage one, the rust one and the ink one are all the same shot, and the plate colour is the card's single saturated field. Choosing a colourway crossfades the plate rather than swapping it. The swatches are squares, which read as fabric rather than buttons, and they are a real radio group: arrow keys move, one tab stop, and the accessible name is the colour's name, never a hex. A sold-out colourway stays on the card, struck through, and the button becomes Notify me, because a colour you cannot see is a lost sale and a colour you cannot buy is a lead. Sizes are optional chips, and adding hands your handler the colourway and the size.
Curator’s note
The multiply trick is old print technique — a one-colour plate over a halftone. It solves the real problem small labels have, which is one good photograph and a colour chart.
