Vibeset

Rubber selector

To switch between two and four views of the same content. The thumb marking the option travels to the new one, stretching in the direction of travel while it moves fast and shrinking in height to keep its volume. The movement is a spring, not a transition, because a transition does not know how fast it is going and the stretch comes from that speed; also, a spring redirects mid-flight if you change option before arriving, keeping its velocity. Stretch is speed over a cap, so a resting thumb is its normal size. The loop only runs while something moves. Dragging and pressing are the same: under four pixels is a click, more is a drag and on release the nearest option is picked. It is a real radiogroup with arrow keys.

And the React Bits original: Rubber Segment

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Rubber Segment, and this is what we saw in theirs in case you prefer to use the original.

When to use it

To switch between two and four views of the same content (list and grid, month and week), in an interface that is already playful.

Watch out for

It is a pill-shaped segmented control: if your interface uses text tabs with an underline, it is a different language and mixing them shows.

Accessibility

Ten aria signals, three labels, keyboard and reduced motion. It takes an aria-label for the group.