A copy glyph that folds into a check.
The prompt17,686 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.
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.
Everything in the glyph is arithmetic on that number —
four rectangles' worth of x, y, size and corner, and one
dash offset. No transforms, no keyframes, and nothing that
has to be kept in step with anything else.
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 you are buying.