A knob that stretches on the way and is round again on arrival.
The prompt15,764 characters
Add the "Switch" 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 Switch, 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
--font-ui
--ink
--ink-rgb
--pane-edge
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.
--- Switch.tsx ---
import { useEffect, useRef, useState } from "react";
import { motion, useSpring, useTransform, useVelocity } from "framer-motion";
/* ══ Switch ═══════════════════════════════════════════════
A knob that crosses a track, and stretches on the way.
THE STRETCH IS READ OFF THE VELOCITY, not scripted. The
obvious build keyframes a lozenge — wide in the middle of
the trip, round at both ends — and it looks right exactly
once, at the speed it was drawn for. Read off the spring's
own velocity instead, the knob is long while it is fast and
round the moment it is not, whatever interrupts it: press
twice quickly and it turns around mid-track as a shape that
is still honest about which way it is going.
AND IT STRETCHES BACKWARD. A body pulled across a surface
leads with its front and drags its tail, so the extra
length is behind the knob, never ahead of it. Ahead reads
as anticipation, which is a cartoon; behind reads as
inertia, which is a thing. The front edge is where the
spring says the knob is, and the tail is that less however
much velocity there is.
Area is kept. A knob that only got wider would be gaining
The rest — the source and its comments — is what you are buying.