Back to the library
Vault unlock confirm
Variant: Single beat
A padlock confirmation: the shackle lifts, the body turns olive, a check replaces the keyhole and the label changes from Locked to Unlocked, all in one 256ms beat. Use it after a credential or hardware-key check succeeds and a protected item opens. Every part starts at the same time and lands together, so the unlock reads as one clean result. A security step doesn't need to look like hard work to feel trustworthy.
unlockconfirmationstate-changesecuritypadlock
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>Vault unlock confirm — single beat</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 */
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* include only if used */
}
* { 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(300px, 86vw);
display: flex;
align-items: center;
gap: clamp(12px, 4vw, 16px);
padding: clamp(14px, 4.5vw, 20px);
background: var(--paper);
border: 1px solid var(--oat);
border-radius: calc(14px * var(--round));
}
.lock {
width: clamp(40px, 12vw, 52px);
height: auto;
flex: none;
overflow: visible;
}
.shackle {
fill: none;
stroke: var(--slate);
stroke-width: 4;
stroke-linecap: round;
animation: shackle var(--t) infinite;
}
.body { fill: var(--slate); }
.tint { fill: var(--olive); opacity: 0; animation: tint var(--t) infinite; }
.keyhole { fill: var(--paper); animation: keyhole var(--t) infinite; }
.check {
fill: none;
stroke: var(--paper);
stroke-width: 3.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
opacity: 0;
animation: check var(--t) infinite;
}
.text { display: grid; gap: 3px; min-width: 0; }
.label {
display: grid;
font-size: clamp(15px, 4.4vw, 17px);
font-weight: 600;
letter-spacing: -0.01em;
}
.label span { grid-area: 1 / 1; }
.label .off { animation: label-out var(--t) infinite; }
.label .on { opacity: 0; animation: label-in var(--t) infinite; }
.caption { font-size: clamp(12px, 3.4vw, 13px); opacity: 0.6; }
/* One beat: every part leaves 20% and lands at 28% (256ms at 1x). The old label clears a little early so the two words never blur together. */
@keyframes shackle {
0%, 20% { transform: translateY(0); animation-timing-function: var(--ease-in-out); }
28%, 82% { transform: translateY(-7px); animation-timing-function: var(--ease-in-out); }
87%, 100% { transform: translateY(0); }
}
@keyframes tint {
0%, 20% { opacity: 0; animation-timing-function: var(--ease-out); }
28%, 82% { opacity: 1; animation-timing-function: var(--ease-out); }
87%, 100% { opacity: 0; }
}
@keyframes keyhole {
0%, 20% { opacity: 1; animation-timing-function: var(--ease-out); }
26%, 82% { opacity: 0; animation-timing-function: var(--ease-out); }
87%, 100% { opacity: 1; }
}
@keyframes check {
0%, 20% { stroke-dashoffset: 1; opacity: 0; animation-timing-function: var(--ease-out); }
28%, 82% { stroke-dashoffset: 0; opacity: 1; animation-timing-function: var(--ease-out); }
87% { stroke-dashoffset: 0; opacity: 0; }
100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes label-out {
0%, 20% { opacity: 1; transform: translateY(0); animation-timing-function: var(--ease-out); }
26%, 82% { opacity: 0; transform: translateY(-4px); animation-timing-function: var(--ease-out); }
87%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes label-in {
0%, 20% { opacity: 0; transform: translateY(4px); animation-timing-function: var(--ease-out); }
28%, 82% { opacity: 1; transform: translateY(0); animation-timing-function: var(--ease-out); }
87% { opacity: 0; transform: translateY(0); }
100% { opacity: 0; transform: translateY(4px); }
}
@media (max-width: 380px) {
.card { gap: 12px; padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
.shackle { animation: none; }
.tint, .keyhole, .check, .label .off, .label .on {
animation-duration: calc(var(--cycle) * 2 / var(--speed));
}
/* !important beats the animation layer: the colour and opacity crossfades still loop, but nothing draws or slides. */
.check { stroke-dashoffset: 0 !important; }
.label .off, .label .on { transform: none !important; }
}
</style>
</head>
<body>
<div class="card">
<svg class="lock" viewBox="0 0 48 48" aria-hidden="true">
<path class="shackle" d="M17 23V16a7 7 0 0 1 14 0v12" />
<rect class="body" x="9" y="22" width="30" height="21" rx="5" />
<rect class="tint" x="9" y="22" width="30" height="21" rx="5" />
<path class="keyhole" d="M24 28.5a2.75 2.75 0 0 1 1.4 5.1V37h-2.8v-3.4A2.75 2.75 0 0 1 24 28.5z" />
<path class="check" pathLength="1" d="M17.5 32.5l4.5 4.5 8.5-8.5" />
</svg>
<div class="text">
<div class="label"><span class="off">Locked</span><span class="on">Unlocked</span></div>
<div class="caption">Release signing key</div>
</div>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.