A copy glyph that folds into a check.
The prompt13,892 characters
Add the "Copy" 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 Copy, from the source below.
2. It needs nothing beyond 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-2
--ink-3
--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.
--- Copy.tsx ---
import { useEffect, useRef, useState } from "react";
/* ══ Copy ═════════════════════════════════════════════════
A line to copy, and the button that copies it.
THE GLYPH FOLDS INTO THE CHECK. The obvious build fades
a copy icon out and a check in, and it is a swap however
well the crossfade is tuned — two symbols exchanging
places in a box. Here the two squares of the copy glyph
are the material the check is made of: the back one
slides onto the front, both close down to a point at the
middle, and the check is drawn OUT of that point. One
motion, read off one number, so there is no frame where
the button shows two ideas at once.
THE SHAPE ITSELF IS FoldCheck, just below: it takes that
number and nothing else, so the same gesture can sit in
any button that copies anything. This block owns the clock;
the shape owns the arithmetic.
The command to the left steps aside for the word "Copied"
while the check is up, and returns with it. The word is
the receipt; the check is the gesture. Both go after a
moment, because a button that stays "Copied" is a button
The rest — the source and its comments — is what the plan opens.