Sold Out State
The photo drains of colour and the buy action hands over to a notify control in the same slot.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Sold Out State
*
* Stock runs out while the shopper is looking at the item. The photo
* drains of colour, the availability dot goes quiet, and the buy actionAbout this pattern
An item becoming unavailable while someone is looking at it. Saturation carries the change on its own — no crossed-out overlay, no red wash — so the picture simply stops reading as an offer. The action swaps inside a fixed-height slot and the status line crossfades inside a fixed-height row, which means the card keeps its exact shape and nothing below it jumps. Bad news delivered with a bounce reads as a taunt, so every spring here settles once and stops.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Product page
A drop selling out greys the product art and replaces the purchase action with a notify control.
Related patterns
- Cart Item RemoveA removed line collapses its own height and gap while the survivors travel up and the total falls.
- Low Stock IndicatorA bar shortens once from the size of the run to what is left, then stops.
- Shipping Option SelectOne plate travels to the chosen speed while the arrival estimate restates itself and the total follows.