vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

swarm-ui: plain fade + multi-hop underline sweep, per review

Browse source 
Content entrance was a scale+overshoot pop; mara didn't like it on
review, swapped for a plain fade. The nav underline now hops through
every nav item it passes over on its way to the new active one
(position and colour together) instead of tweening directly between
the two endpoints, matching what she actually meant by "move through
color wheel" — a->c visibly touches b's colour along the way, not a
smooth continuous hue rotation.
This commit is contained in:
iris 2026-08-19 19:21:19 +02:00 • committed by mara
commit a5584d0fcd
2 changed files with 117 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

31
frontend/packages/swarm-ui/src/shell/Shell.css
View file

@ -79,16 +79,19 @@
/* Shared underline, one element instead of one border-bottom per link
— see Shell.tsx's file-top comment. `left`/`top`/`width` are set
inline per-render from a real measurement; only the *transition*
between those values lives here. */
between those values lives here. 140ms matches Shell.tsx's `HOP_MS`
exactly, so one hop's CSS transition finishes right as the next
hop's JS-driven style update lands, instead of the two blending into
an averaged easing curve. */
.shell-nav-indicator {
position: absolute;
height: 2px;
border-radius: 1px;
transition:
left 200ms ease,
top 200ms ease,
width 200ms ease,
background-color 200ms ease;
left 140ms ease,
top 140ms ease,
width 140ms ease,
background-color 140ms ease;
}
@media (prefers-reduced-motion: reduce) {
.shell-nav-indicator {
@ -100,25 +103,27 @@
}
:root[data-motion='allow'] .shell-nav-indicator {
transition:
left 200ms ease,
top 200ms ease,
width 200ms ease,
background-color 200ms ease;
left 140ms ease,
top 140ms ease,
width 140ms ease,
background-color 140ms ease;
}
.shell-body {
max-width: 60em;
margin: 0 auto;
padding: 1.5em 1.25em;
animation: shell-page-enter 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* Plain fade, deliberately — mara's call on review: a scale+overshoot
"pop" (this rule's first cut) read as too much for a first pass.
Keeping it simple leaves room to make this fancier later without
having shipped something to walk back first. */
animation: shell-page-enter 160ms ease;
}
@keyframes shell-page-enter {
from {
opacity: 0;
transform: scale(0.97);
}
to {
opacity: 1;
transform: scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
@ -130,5 +135,5 @@
animation: none;
}
:root[data-motion='allow'] .shell-body {
animation: shell-page-enter 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
animation: shell-page-enter 160ms ease;
}