Notifications with a count that rolls down as you read them.
The prompt33,452 characters
Add the "Inbox" component from notboring to my project.
It is licensed for use in my projects — notboring.dev/license. Please:
1. Create the component at a sensible path for this
project, named Inbox, from the source below.
2. Install what it needs: npm i framer-motion
3. Add the CSS to the project's stylesheet.
4. THE PART THAT NEEDS YOUR JUDGMENT. The CSS reads
these custom properties and does not define them:
--card
--danger
--danger-rgb
--font-ui
--ink
--ink-2
--ink-3
--ink-4
--ink-rgb
They are notboring's design tokens. Map each one to
whatever this project already uses for the same
job — its own ink, ground, surface and UI font —
rather than defining them as new globals. If the
project has no equivalent, define it locally on
the component's own root so nothing leaks out.
Anything ending -rgb wants three bare numbers,
because the CSS builds rgba() from it.
5. AVATARS is a stub
— notboring's own pictures are not licensed to
travel. Point it at this project's images, or
leave the placeholder and tell me.
Keep the comments. They say why the numbers are what
they are, and they are most of what makes this worth
copying rather than rewriting.
--- Inbox.tsx ---
import { useEffect, useRef, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
/* ══ Inbox ════════════════════════════════════════════════
Five notifications, and the number that says how many of
them you have not read.
THE COUNT IS DERIVED, AND IT ROLLS. There is no counter in
state: the number in the pill is how many rows are unread
and still here, worked out on every render, so it cannot
disagree with the dots below it — the same rule the cart
follows for its total. And it does not fade to the next
number, it rolls to it, downward, because reading is a
thing going down and the figure should say so.
A ROW IS DISMISSED IN TWO BEATS, AND THE FIRST CAN BE
TAKEN BACK. The cross does not delete the row: its face
gives way to a strip in the same place — "Removed", and
Undo — with a line along its foot that drains over four
seconds. The line is the window, drawn. Undo turns the
strip back into the row; the line running out is what
closes it for real. The count does not wait: a dismissed
notification is gone the moment it is dismissed, until you
say otherwise, so the pill rolls down on the press and
The rest — the source and its comments — is what you are buying.