Back to the library
Verdict thumb, linear
Variant: Linear
The same Hold/Sell thumb at constant velocity. This sibling is the plain baseline: next to the eased versions, it shows how much character the other curves add. The constant speed makes the thumb start and stop abruptly, so on a tap-driven control it reads as mechanical. Use it only when the thumb follows something that is itself linear, such as a drag position or a scrubbed timeline.
segmented-controltogglestate-changelinear
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" />
<title>Verdict thumb — linear</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));
--_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);
}
/* Padding equals the worst-case overshoot of the springy sibling, so all four share geometry. */
.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) linear infinite;
}
/* The inked copy spans the whole rail and counter-translates on the same curve,
so white text is revealed only where the thumb sits — no colour animation needed. */
.thumb .labels {
inset: 0 auto 0 0;
width: 200%;
color: var(--paper);
animation: counter var(--t) linear 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; }
}
@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.