Digits that roll the way the number went.
The prompt13,085 characters
Add the "Stepper" 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 Stepper, from the source below.
2. Install what it needs: npm i framer-motion lucide-react
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
--font-ui
--ink
--ink-3
--ink-5
--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. IF YOU CHANGE IT, GO ALL THE WAY. This block is
built for every state its object can really be
in — empty, one, full, refused, undone, pressed
twice, interrupted halfway — and not only the one
the demo opens on. Adapt it and the same standard
holds: work out that list before you write, and
build the whole of it. Never settle for the
minimum that makes the screenshot right. A
component somebody has to come back and finish is
the thing this was written to replace.
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.
--- Stepper.tsx ---
import { useEffect, useRef, useState } from "react";
import { AnimatePresence, animate, motion, useMotionValue } from "framer-motion";
import { Minus, Plus } from "lucide-react";
/* ══ Stepper ══════════════════════════════════════════════
Minus, a number, plus. The number is the part that moves.
THE DIGITS ROLL THE WAY THE NUMBER WENT. A counter that
simply rewrites its figure has told you the new value and
nothing else; one whose old figure leaves upward while the
new one arrives from below has also told you it went UP,
and the reverse for down. The direction is the extra
information a stepper has that a text field does not, so
it is the thing to show. The line box clips both figures,
so the roll happens inside the number's own height rather
than across the pill.
A DEAD END PUSHES BACK. At the bottom of the range the
minus dims, and pressing it anyway nudges the number two
pixels the way it could not go and lets it back. That is
the refusal you can feel: not a beep, not a shake, just
the value showing you it tried.
HOLD TO REPEAT, AND IT GETS FASTER. A press that is held
The rest — the source and its comments — is what the plan opens.