Back to the library
Focus — roving in a menu
Variant: Roving menu
Arrow keys down a menu, and the frame worth studying is the wrap. A hop between neighbours is 140ms, about the shortest travel the eye still resolves as travel — but the same highlight covering four rows in one move reads as a slip of the hand rather than a deliberate return to the top, so the wrap cuts instead: out in 90ms, back in in 123ms, with 34ms of nothing lit. That gap is the tuning: long enough to register as a cut, short enough that focus is never actually missing. The five row labels ride one keyframe track separated by negative delays of a fifth of the clock, which is also why the loop carries exactly five ArrowDown presses — at five events the keycap’s sub-clock is an exact fifth of the master one and there is no drift to correct at the seam. The rail is a child of the highlight rather than a left border on it, because a 2px border inside a 6px radius bends around the corner and stops looking like a rail.
focuskeyboardlistcontrolloop
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>Focus — roving in a menu</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;
--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. */
--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 — 5.6s carrying five ArrowDown presses, so every press is 20% of
it and the keycap can run on an exact fifth of the master clock
instead of a second timeline that has to be kept in step by hand. */
--cycle: 5.6s;
--t: calc(var(--cycle) / var(--speed));
--ease-accent: cubic-bezier(0.32, 0.72, 0, 1);
--_row: 24px;
--_gap: 2px;
--_step: calc(var(--_row) + var(--_gap));
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--ivory);
font-family:
system-ui,
-apple-system,
'Segoe UI',
Roboto,
sans-serif;
color: var(--slate);
}
.scene {
display: grid;
justify-items: center;
gap: 13px;
}
.menu {
position: relative;
width: clamp(180px, 66vw, 226px);
padding: 5px;
display: grid;
gap: var(--_gap);
border-radius: calc(9px * var(--round));
background: var(--paper);
border: 1px solid color-mix(in srgb, var(--slate) 11%, transparent);
box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--slate) 40%, transparent);
}
.item {
position: relative;
z-index: 1;
display: flex;
align-items: center;
height: var(--_row);
padding: 0 10px 0 13px;
font-size: 11px;
letter-spacing: -0.005em;
opacity: 0.5;
}
.item .meta {
margin-left: auto;
font-size: 10.5px;
color: color-mix(in srgb, var(--slate) 40%, transparent);
}
.danger {
color: var(--rust);
}
.i1 {
animation: lit var(--t) infinite;
}
.i2 {
animation: lit var(--t) infinite;
animation-delay: calc(var(--t) * -0.8);
}
.i3 {
animation: lit var(--t) infinite;
animation-delay: calc(var(--t) * -0.6);
}
.i4 {
animation: lit var(--t) infinite;
animation-delay: calc(var(--t) * -0.4);
}
.i5 {
animation: lit var(--t) infinite;
animation-delay: calc(var(--t) * -0.2);
}
/* One highlight for five rows, same as the form: focus is one thing, so
it is one element. The rail is a child rather than a left border
because a 2px border inside a 6px radius bends around the corner and
stops looking like a rail. */
.hl {
position: absolute;
z-index: 0;
left: 5px;
right: 5px;
top: 5px;
height: var(--_row);
border-radius: calc(6px * var(--round));
background: color-mix(in srgb, var(--clay) 11%, transparent);
animation: rove var(--t) infinite;
}
.hl::before {
content: '';
position: absolute;
left: 3px;
top: 5px;
bottom: 5px;
width: 2px;
border-radius: 999px;
background: var(--clay);
}
.key {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 9px;
border-radius: calc(6px * var(--round));
background: var(--paper);
border: 1px solid color-mix(in srgb, var(--slate) 14%, transparent);
box-shadow: 0 1px 0 color-mix(in srgb, var(--slate) 10%, transparent);
font-size: 11px;
color: color-mix(in srgb, var(--slate) 55%, transparent);
/* An exact fifth of the master clock — five presses, five tiles, no
drift to correct at the loop seam. */
animation: tap calc(var(--t) / 5) infinite;
}
.key b {
font-weight: 600;
color: color-mix(in srgb, var(--slate) 80%, transparent);
}
/* A hop between neighbours is 140ms, about the shortest travel the eye
still resolves as travel. The wrap is not a hop: the highlight covering
four rows in one move would be read as a slip of the hand rather than a
deliberate return to the top, so it cuts. Out in 90ms, back in in
123ms, and only 34ms with nothing lit — long enough to be a cut, short
enough that focus is never actually missing. */
@keyframes rove {
0%,
12% {
transform: translateY(0);
opacity: 1;
animation-timing-function: var(--ease-accent);
}
14.5%,
32% {
transform: translateY(var(--_step));
opacity: 1;
animation-timing-function: var(--ease-accent);
}
34.5%,
52% {
transform: translateY(calc(var(--_step) * 2));
opacity: 1;
animation-timing-function: var(--ease-accent);
}
54.5%,
72% {
transform: translateY(calc(var(--_step) * 3));
opacity: 1;
animation-timing-function: var(--ease-accent);
}
74.5%,
92% {
transform: translateY(calc(var(--_step) * 4));
opacity: 1;
animation-timing-function: ease;
}
93.6% {
transform: translateY(calc(var(--_step) * 4));
opacity: 0;
animation-timing-function: steps(1, end);
}
94.2% {
transform: translateY(0);
opacity: 0;
animation-timing-function: ease;
}
96.4%,
100% {
transform: translateY(0);
opacity: 1;
}
}
/* Five rows on one keyframe track, separated by negative delays of a fifth
of the clock each. The first row is the odd one out only because its lit
window straddles the loop seam, which is exactly what a negative delay
is for. */
@keyframes lit {
0%,
12% {
opacity: 1;
animation-timing-function: ease;
}
14.5%,
92% {
opacity: 0.5;
animation-timing-function: ease;
}
96.4%,
100% {
opacity: 1;
}
}
@keyframes tap {
0%,
54% {
transform: translateY(0);
background: var(--paper);
animation-timing-function: ease;
}
57% {
transform: translateY(1px);
background: color-mix(in srgb, var(--clay) 15%, var(--paper));
animation-timing-function: ease;
}
69%,
100% {
transform: translateY(0);
background: var(--paper);
}
}
@media (prefers-reduced-motion: reduce) {
/* The highlight stops sliding and starts cutting to each row — which is
what an unanimated menu does anyway — and the wrap becomes
indistinguishable from a hop, so it loses its fade and rejoins the
same track. The row opacities keep easing: they are the state, not
the movement. */
.hl {
animation-name: rove-step;
}
.hl,
.item,
.key {
animation-duration: calc(var(--t) * 1.6);
}
.key {
animation-duration: calc(var(--t) * 1.6 / 5);
}
@keyframes rove-step {
0%,
12% {
transform: translateY(0);
animation-timing-function: steps(1, end);
}
14.5%,
32% {
transform: translateY(var(--_step));
animation-timing-function: steps(1, end);
}
34.5%,
52% {
transform: translateY(calc(var(--_step) * 2));
animation-timing-function: steps(1, end);
}
54.5%,
72% {
transform: translateY(calc(var(--_step) * 3));
animation-timing-function: steps(1, end);
}
74.5%,
92% {
transform: translateY(calc(var(--_step) * 4));
animation-timing-function: steps(1, end);
}
94.2%,
100% {
transform: translateY(0);
}
}
}
</style>
</head>
<body>
<div
class="scene"
role="img"
aria-label="A menu where one highlight hops row to row on ArrowDown, then cuts rather than flies when it wraps from the last item back to the first"
>
<div class="menu">
<div class="item i1">
<span>Duplicate</span>
<span class="meta">⌘D</span>
</div>
<div class="item i2">
<span>Rename</span>
</div>
<div class="item i3">
<span>Move to…</span>
</div>
<div class="item i4">
<span>Export</span>
<span class="meta">CSV</span>
</div>
<div class="item i5 danger">
<span>Delete</span>
</div>
<span class="hl"></span>
</div>
<span class="key"><b>↓</b> next item</span>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.