Back to the library
Cover lens scan, linear
Variant: Linear
The same masked-key scanner, but the lens moves at a constant speed and stops dead at each end. Pick it when the scan should feel mechanical, like a machine reading a line, and you want to signal continuous work rather than a deliberate look at each group. Linear spends the same time on every group, so the middle two get as much exposure as the ends, which the eased curves deliberately avoid.
scanrevealloadersecurity
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 — 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));
}
* { 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) linear 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) linear 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.