Follow Button Swap
Follow becomes Following in place — the button never changes width.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useState, type CSSProperties } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Follow Button Swap
*
* Follow becomes Following in place. Both labels live in the same grid
* cell, so the button is permanently as wide as the longer one and theAbout this pattern
The failure mode of a follow control is layout, not motion: the label gets longer, the button grows, and every row after it shifts under the finger that just tapped. Here both labels occupy the same grid cell, so the button is always as wide as the longer of the two and nothing around it moves. The solid fill hands over to an outline, the old label leaves upward while the new one arrives from below at a constant size, and a check draws in behind it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Profile page
State change reads through fill and label, never through size.