Tutorial Card Play
The tutorial thumbnail grows into a player, and the controls only arrive once the frame has stopped moving.
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 { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Tutorial Card Play
*
* The thumbnail grows into the player, and the controls only arrive
* once the frame has stopped moving — controls that ride the expansionAbout this pattern
Opening a tutorial without the jolt of a modal. The thumbnail is a shared frame that grows into the player at a matched aspect ratio, so the poster scales uniformly instead of stretching, and the transport controls are deliberately late: a scrub bar that is still travelling cannot be aimed at, so it fades up only after the frame has landed. The poster is drawn in the file from a wash and a handful of rectangles and the playhead is a timer, which keeps the pattern about the transition rather than about media loading — swap in a real element and the choreography is unchanged. The timecode is plain tabular text that counts without ever scaling.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Media player
A recording thumbnail opens into a player in place, with controls settling in after.
Related patterns
- Name Your WorkspaceTyping a name rolls the monogram to its new initial and slides a fresh address under the header it will appear in.
- Persona SelectPicking a role lifts that card while the others step back, and a line below says what the answer changed.
- Tour Step HopThe tour tooltip travels to the next control instead of vanishing and popping up somewhere else.