Social Login Buttons
The separator rules draw outward from their label, then the provider buttons rise in one after the next.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Social Login Buttons
*
* The separator rules draw outward from their label, then the provider
* buttons rise into place one after the next.
*About this pattern
The block of alternatives under a sign-in field, sequenced so it reads as a set of choices rather than a wall. The two rules either side of the label scale from the edge nearest the word, which makes the pair read as one line being drawn outward through it — a beat that gives the eye a reason to look down before the options land. The buttons then rise a short distance and fade, staggered, and nothing scales: every one of them is a labelled row, and text that overshoots its size is the cheapest-looking thing in interface motion. The glyphs shipped here are deliberately neutral placeholder shapes, so the pattern is about the motion and not about anyone's mark.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sign-in screen
A short field, a labelled separator, then a stack of provider rows.
Related patterns
- Permission Scope ListA consent screen reveals each requested scope in turn and keeps the approve button inert until they have all landed.
- OTP Code EntrySix boxes: the waiting box lifts, digits settle in, and a wrong code answers with one short nudge.
- Sign-in Form EntranceHeading, fields and button rise into place in one quick sequence as the screen opens.