Half-star precision: the fill follows the finger inside the star, and the figure rolls.
The prompt28,149 characters
Add the "Rating" 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 Rating, 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:
--font-ui
--ink
--ink-2
--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.
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.
--- Rating.tsx ---
import { useEffect, useLayoutEffect, useRef, useState } from "react";
/* ══ Rating ═══════════════════════════════════════════════
Five stars, a figure, and a hand that can run across them.
THE FILL FOLLOWS THE FINGER INSIDE THE STAR. Every other
rating row is five switches: a star is lit or it is not,
and the pointer's only job is to say which switch. Here
the star under the pointer fills exactly up to it — the
fill is a horizontal clip read off the pointer's x — so the
preview is continuous across the whole row, and the value
is the nearest half when you let go. A hand that stops in
the middle of the fourth star gets three and a half, which
is what it asked for.
THE FIGURE IS THE READOUT, AND IT ROLLS. "4.5" beside the
stars, the digits rolling the way the number went, and a
word under the stars that rolls with it — the stars say how
many, the figure says how much, the word says what that
means. Three readings of one number, so they cannot
disagree.
THE FLOURISH IS AT THE STAR THAT MATTERED. On release the
newly lit stars pop in order, the old rule, and the LAST
The rest — the source and its comments — is what you are buying.