Back to the library
Cover lens scan, snap
Variant: Snap
The masked-key scanner with a strong ease-out. The lens jumps off each end almost at once, then slows gently into the far group. Choose it when the scan should feel alert and responsive, as if the lens has already spotted its target. Because the speed is front-loaded, almost all of the travel time goes to the slow approach, so the far group is the clearest reveal of the pass.
scanrevealsecurityquick
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>Cover lens scan — Snap</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));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* include only if used */
}
* { 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-out) 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-out) 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.