Back to the library
Verdict thumb, overshoot
Variant: Overshoot
The same Hold/Sell thumb on a spring-like curve. It goes about 4% past its target and settles back, as if it were pulled toward each option. Use it when the product has a playful tone and the thumb has room to overshoot. The rail's inner padding (7px) is sized to fit the worst-case overshoot at full width, so the pill never crosses the track outline. The file opts in to the overshoot knob for that reason.
segmented-controltogglestate-changespringovershoot
The source
A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="animation-knobs" content="overshoot: ok" />
<title>Verdict thumb — overshoot</title>
<style>
:root {
/* Neutrals — fixed, never remixed. */
--ivory: #faf9f5;
--paper: #ffffff;
--oat: #e3dacc;
--slate: #141413;
/* Knobs — the remix API. A knob exists iff declared here and used below. */
--hue: 38.8;
--lift: 0;
--chroma: 1;
--round: 1; /* include ONLY if at least one border-radius is wrapped below */
--speed: 1;
/* Accents — derived from the knobs with the family's offsets baked in,
so one hue roll moves them together. Defaults reproduce the original hex
(#d97757 / #b85c3e / #788c5d / #b04a3f). */
--clay: oklch(calc(0.6724 + var(--lift)) calc(0.1308 * var(--chroma)) var(--hue));
--clay-d: oklch(calc(0.5797 + var(--lift)) calc(0.127 * var(--chroma)) var(--hue));
--olive: oklch(calc(0.6118 + var(--lift)) calc(0.0713 * var(--chroma)) calc(var(--hue) + 88.3));
--rust: oklch(calc(0.5408 + var(--lift)) calc(0.1357 * var(--chroma)) calc(var(--hue) - 10.3));
/* Clock — every duration in the document runs off --t. */
--cycle: 3.2s; /* the authored master loop */
--t: calc(var(--cycle) / var(--speed));
/* Peaks near 1.042: about 6px past target on the widest thumb, inside the 7px pad. */
--ease-accent: cubic-bezier(0.34, 1.36, 0.64, 1); /* the snippet's ONE characterful curve, if it has one */
--_pad: 7px;
}
* { box-sizing: border-box; margin: 0; }
body {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--ivory);
color: var(--slate);
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.card {
width: min(340px, 92vw);
background: var(--paper);
border: 1px solid var(--oat);
border-radius: calc(16px * var(--round));
padding: clamp(16px, 5vw, 22px);
display: grid;
gap: clamp(10px, 3vw, 14px);
}
.meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
font-size: clamp(12px, 3.4vw, 13px);
}
.meta b { font-size: clamp(14px, 4vw, 16px); font-weight: 600; letter-spacing: 0.02em; }
.meta span { opacity: 0.6; white-space: nowrap; }
.seg {
position: relative;
height: 46px;
border-radius: 999px;
background: var(--ivory);
border: 1px solid var(--oat);
}
.rail { position: absolute; inset: var(--_pad); }
.labels {
position: absolute;
inset: 0;
display: flex;
font-size: clamp(13px, 3.8vw, 15px);
font-weight: 600;
}
.labels span { flex: 1; display: grid; place-items: center; }
.base { opacity: 0.55; }
.thumb {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
border-radius: 999px;
background: var(--clay);
box-shadow: 0 2px 6px color-mix(in oklch, var(--clay-d) 35%, transparent);
overflow: hidden;
will-change: transform;
animation: slide var(--t) var(--ease-accent) infinite;
}
/* The inked copy counter-translates on the identical curve, so the overshoot cancels
exactly and the white labels stay pinned to the rail while the pill swings. */
.thumb .labels {
inset: 0 auto 0 0;
width: 200%;
color: var(--paper);
animation: counter var(--t) var(--ease-accent) infinite;
}
.thumb.alt { display: none; }
/* 280ms out to Sell, 220ms back to Hold; Hold also keeps the longer dwell. */
@keyframes slide {
0%, 40% { transform: translateX(0); }
48.75%, 70% { transform: translateX(100%); }
76.875%, 100% { transform: translateX(0); }
}
@keyframes counter {
0%, 40% { transform: translateX(0); }
48.75%, 70% { transform: translateX(-50%); }
76.875%, 100% { transform: translateX(0); }
}
@keyframes rm-hold {
0%, 40% { opacity: 1; }
48.75%, 70% { opacity: 0; }
76.875%, 100% { opacity: 1; }
}
@keyframes rm-sell {
0%, 40% { opacity: 0; }
48.75%, 70% { opacity: 1; }
76.875%, 100% { opacity: 0; }
}
@media (max-width: 380px) {
.card { padding: 16px; }
.seg { height: 44px; }
}
/* Opacity can't overshoot meaningfully, so the reduced crossfade uses linear rather than clamping the spring. */
@media (prefers-reduced-motion: reduce) {
.thumb, .thumb .labels { animation: none; }
.thumb.main { animation: rm-hold calc(var(--t) * 2) linear infinite; }
.thumb.alt {
display: block;
transform: translateX(100%);
animation: rm-sell calc(var(--t) * 2) linear infinite;
}
.thumb.alt .labels { transform: translateX(-50%); }
}
</style>
</head>
<body>
<div class="card">
<div class="meta"><b>NVDA</b><span>120 sh · −3.1% today</span></div>
<div class="seg" role="radiogroup" aria-label="Next action">
<div class="rail">
<div class="labels base"><span>Hold</span><span>Sell</span></div>
<div class="thumb main" aria-hidden="true"><div class="labels"><span>Hold</span><span>Sell</span></div></div>
<div class="thumb alt" aria-hidden="true"><div class="labels"><span>Hold</span><span>Sell</span></div></div>
</div>
</div>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.