Clipboard Toasts Stack
Repeat copies push a short stack of confirmations that shuffle down and dim instead of piling up.
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, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Clipboard Toasts Stack
*
* Copy something twice and the second confirmation should not land on
* top of the first. Each new one arrives at the head of a short stack,About this pattern
One confirmation is easy; the third one in four seconds is where most implementations fall apart, landing on top of each other or fighting over the same corner. Here each new card arrives at the head of a short stack, pushes the earlier ones down and dims them by depth, and anything past the limit falls off the end rather than accumulating out of view. The cards travel position-only as the stack reflows, so their text is never stretched by the shuffle, and the column reserves every slot up front so the corner keeps its size whether one card is showing or three. Cards expire on their own clock, which means the stack also closes itself back up.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Issue tracker
Successive notices stack and collapse instead of overlapping.
Related patterns
- Copy ConfirmationA copy button trades its icon for a drawn tick and its label for "Copied", then quietly changes back.
- Read Receipt TickOne tick becomes two, then the pair tints — sent, delivered, read.
- Save Indicator SettleA turning ring under "Saving" resolves into a drawn tick under "Saved", then the chip recedes.