Value Prop Carousel
Intro slides advance on their own, with the artwork crossfading a beat behind the copy.
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 · Value Prop Carousel
*
* Intro slides that advance on their own. The words change first and the
* artwork crossfades a beat behind them, so the reader is never asked toAbout this pattern
The three screens a product shows before asking for anything. The words change first and the artwork follows a beat later, because two changes landing at the same instant read as a cut while a beat apart reads as one thought following another. The frame holds a fixed height for both the art and the copy, so slides of different lengths cannot resize the card mid-dissolve. Each indicator bar fills linearly across the dwell — it is a clock, not decoration, so it keeps running under reduced motion — and the sequence stops on the last slide rather than looping, because an intro that never ends is one nobody finishes reading.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
Illustrated intro pages that advance themselves with a timed indicator.
Related patterns
- Welcome Hero EntranceThe first screen assembles in beats: the mark settles, then the headline, the supporting line, and finally the action.
- Template Gallery PickThe chosen thumbnail grows in place into a preview of the workspace it would create.
- Import Data ConnectA line draws itself between two service marks, records run along it, and the destination takes a check when the import lands.