Back to the library
Cover lens scan, overshoot
Variant: Overshoot
The masked-key scanner with a spring-like overshoot. The lens slides about 6% past each end group, then settles back onto it. Use it in friendlier products where a little give makes the scan feel physical. The overshoot is small enough to stay inside the card's padding, even at phone width. Because the lens and the revealed text share the same curve, the characters stay in place during the overshoot and only the frame wobbles.
scanrevealspringsecurity
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>Cover lens scan — 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.066: ~14px past the end group at phone width, inside the 16px card padding. */
--ease-accent: cubic-bezier(0.34, 1.45, 0.64, 1); /* the snippet's ONE characterful curve, if it has one */
}
* { box-sizing: border-box; }
body {
margin: 0;
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(420px, 92vw);
padding: clamp(16px, 5vw, 24px);
background: var(--paper);
border-radius: calc(14px * var(--round));
box-shadow: 0 1px 2px color-mix(in oklch, var(--slate) 6%, transparent),
0 10px 28px -14px color-mix(in oklch, var(--slate) 22%, transparent);
}
.head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: clamp(12px, 3.5vw, 16px);
}
.label { font-size: clamp(13px, 3.6vw, 14px); font-weight: 600; }
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--clay-d);
}
.tag::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--clay);
}
.track {
position: relative;
height: clamp(44px, 12vw, 52px);
border-radius: calc(8px * var(--round));
background: color-mix(in oklch, var(--oat) 40%, var(--paper));
}
.groups {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: center;
justify-items: center;
height: 100%;
font-size: clamp(14px, 4.2vw, 17px);
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
}
.mask {
color: color-mix(in oklch, var(--slate) 38%, transparent);
letter-spacing: 0.14em;
}
/* Lens is 25% of the track, so 300% of its own width lands it on the last group.
The inner copy is 400% of the lens (= track width) and counter-moves by 75%
of itself — the same keyframes and curve make the two cancel on every frame,
so the real characters stay pinned while the window slides over them. */
.lens {
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 100%;
overflow: hidden;
border-radius: calc(8px * var(--round));
background: var(--paper);
box-shadow: inset 0 0 0 1.5px var(--clay),
0 6px 14px -6px color-mix(in oklch, var(--clay-d) 45%, transparent);
animation: lens var(--t) var(--ease-accent) infinite;
will-change: transform;
}
.lens-inner {
position: absolute;
top: 0;
left: 0;
width: 400%;
color: var(--clay-d);
font-weight: 600;
animation: lens-counter var(--t) var(--ease-accent) infinite;
will-change: transform;
}
.reveal-full {
display: none;
position: absolute;
inset: 0;
border-radius: calc(8px * var(--round));
background: color-mix(in oklch, var(--oat) 40%, var(--paper));
color: var(--clay-d);
font-weight: 600;
opacity: 0;
}
.foot {
margin: clamp(10px, 3vw, 14px) 0 0;
font-size: clamp(12px, 3.4vw, 13px);
color: color-mix(in oklch, var(--slate) 60%, transparent);
}
@keyframes lens {
0%, 8% { transform: translateX(0); }
46%, 58% { transform: translateX(300%); }
96%, 100% { transform: translateX(0); }
}
@keyframes lens-counter {
0%, 8% { transform: translateX(0); }
46%, 58% { transform: translateX(-75%); }
96%, 100% { transform: translateX(0); }
}
@keyframes peek {
0%, 20% { opacity: 0; }
45%, 60% { opacity: 1; }
85%, 100% { opacity: 0; }
}
@media (max-width: 380px) {
.card { padding: 16px; }
.groups { font-size: 14px; letter-spacing: 0.04em; }
}
@media (prefers-reduced-motion: reduce) {
.lens { display: none; }
.reveal-full {
display: grid;
animation: peek calc(var(--t) * 2) ease infinite;
}
}
</style>
</head>
<body>
<div class="card">
<div class="head">
<span class="label">Production key</span>
<span class="tag">Scanning</span>
</div>
<div class="track">
<div class="groups mask" aria-hidden="true"><span>••••</span><span>••••</span><span>••••</span><span>••••</span></div>
<div class="lens" aria-hidden="true">
<div class="groups lens-inner"><span>9f2c</span><span>a71e</span><span>0b4d</span><span>e8c3</span></div>
</div>
<div class="groups reveal-full" aria-hidden="true"><span>9f2c</span><span>a71e</span><span>0b4d</span><span>e8c3</span></div>
</div>
<p class="foot">Checking for exposed credentials</p>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.