Interaction

Rubber segment

A segmented control whose thumb reaches across to the new option, lets go of the old one and lands with a small squash; you can also grab it and throw it.

49 / 74

Where it earns its place

Switching between a few views that change what sits below: engagement types, billing periods, plan tiers, chart ranges.

What we changed

Built into an engagement switcher: landing page, website or AI integration swaps the timeline, the price, a ten-week strip and the case-study proof below it.
Kept the two-beat travel (both edges reach across, then the trailing edge catches up and squashes 3 px past its mark) and the throw, with velocity projected to pick the slot it is heading for.
Kept the clip-path thumb over a second copy of the labels, so text inverts exactly at the thumb's edge instead of cross-fading.
Arrow keys now play the same travel as a tap (the original jumped), Home and End work, and reduced motion jumps the thumb and fades the content without movement.
Slots are measured from layout offsets rather than screen rects, and the size, colour and speed props are cut to one control on Kinetiq tokens.