Trophy Shelf Add
A new award settles into the first slot while the awards already there slide over to make room.
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 · Trophy Shelf Add
*
* A new award arriving on a shelf that already has things on it. The
* award settles into the leftmost slot and the awards already thereAbout this pattern
Adding to a collection, staged as a placement rather than a list update. The new award drops a short distance into the leftmost slot on an over-damped spring while every award already on the shelf animates sideways to the position it now occupies. The neighbours moving is the load-bearing half: without it the shelf simply redraws with one more thing on it, and the viewer has no way to tell what is new. The shelf line under the row deliberately does not react — the surface stays still so the object placed on it reads as the thing that moved. Marks are inline SVG, so there are no image assets to ship with the copied file.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Achievements
Award tiles inserted into a profile row with the existing tiles reflowing.
Related patterns
- Certificate IssueThe border strokes itself around the sheet, the seal settles on, and the name is written last.
- Rank PromotionThe old tier ring fades while the new tier's ring strokes itself around the badge.
- Year in Review StatA headline figure counts up over two deliberate seconds, then the line that explains it arrives.