Notification Arrive
The bell tips once and the badge appears — restrained, because this fires all day.
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 · Notification Arrive
*
* One tip, one small return swing, then stillness. Arrival motion is
* judged on its hundredth run: a bell that jingles is charming once andAbout this pattern
Arrival motion is judged on its hundredth run, not its first. A bell that jingles is charming once and grating by lunchtime, so this is a single tip with one small return swing and nothing after it: the badge does the lasting work, and the tip only says the badge is new. Tapping the bell clears the badge on a short scale-out. Nothing here loops, and nothing repeats — that restraint is the whole design.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Notification center
A dot on the header bell is the entire announcement.