Continuity Swap
One persistent marker interpolated between two authored positions, with a cut mode beside it that shows exactly what continuity buys.
Circe: Transformation patterns. One thing convincingly becoming another.
Exhibit case
Why it matters
When a selection indicator disappears from one place and reappears in another, the user's eye has to re-acquire it — a small cost, paid on every interaction, that accumulates into an interface feeling choppy for reasons nobody can name. When the same indicator travels, the eye keeps hold of it and the relationship between old state and new state is preserved without any explanation.
The value of this study is the toggle. Switching to cut mode does not just remove a nicety; it removes information. Watching the same interaction with and without interpolation, seconds apart, is the most efficient possible argument for why continuity is structural rather than decorative.
Key techniques
- A single persistent element as the marker — never one element hidden and a second shown. Identity is the whole mechanism.
- Position interpolated from the previous index to the next through eased
t, so the marker is a function of progress rather than a CSS transition racing a state change. easeMass: cubic in-out. Slow departure, decisive middle, soft arrival — appropriate for something with apparent weight moving a distance.780ms, deliberately slower than a UI transition, because the marker crosses a large distance and constant-duration motion over a longer path reads as faster, not equal.- Panel label colour crossfades on its own shorter transition, so the text confirms the state slightly ahead of the marker settling.
aria-currenton the active panel, so the state is real to assistive technology regardless of what the marker is doing.
What to steal
The transferable part.Interpolate one element, never swap two. This is the entire pattern, and it applies to tab underlines, selection rings, active-nav markers, and card-to-detail transitions alike.
Build the cut mode. Any continuity work should ship with a switch that disables it, both as a design argument and as the honest reduced-motion path. You get the fallback for free by building the comparison.
Duration scaled to distance. A marker crossing 600px should not take the same time as one crossing 80px. Even a crude linear relationship between distance and duration is better than a single constant.
What not to copy
Context-specific or costly.Do not interpolate a marker across a scroll boundary or between elements in different scroll containers. The marker's start position is captured at swap time, and any scrolling mid-flight sends it somewhere meaningless. Constrain continuity to a single stable coordinate space.
Do not apply this to lists that reorder. If the target index refers to a different item by the time the interpolation lands, the motion actively misleads — it says "this became that" when nothing did. Interpolate by item identity, or cut.
Inclusion rationale
Included because it isolates a single idea — object permanence in interface motion — and provides its own counter-example in the same frame. The cut toggle makes it teachable in five seconds to someone who does not already believe motion matters, which is a rare property in a motion study.
Technical register
Performance
The marker animates transform only and is pointer-events: none, so it never participates in hit testing and never invalidates layout for the panels beneath it. One rAF loop, one interpolated value, 780ms bounded. Cut mode sets t = 1 directly with no loop at all, so the fallback path costs nothing.
Mobile
The two panels stay side by side at 375px because the marker's meaning depends on horizontal travel — stacking them would make the motion vertical and the geometry misleading. Labels use the display scale at text-3xl so the panels remain legible in half a small viewport. Tap targets are the full panel area, not the label.
Accessibility
aria-current marks the active panel, so selection is conveyed structurally and the marker is decorative in the strict sense — it is aria-hidden and carries no unique information. Cut mode is exactly the reduced-motion path: state changes instantly, nothing is lost, and the global reduced-motion rule already collapses the transition durations. Label colour change is paired with aria-current rather than standing alone, so no state is colour-only.
Study next