Carousel Preload Slide
The upcoming frame resolves from placeholder to artwork a beat before the track moves to it.
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 { useCallback, useEffect, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Carousel Preload Slide
*
* The slide after the current one is fetched while you are still looking
* at this one, so its placeholder has already resolved into artwork byAbout this pattern
A carousel is the one place where you always know what will be needed next, and a carousel that still slides onto an empty frame is simply not using that. Here the request for the following frame goes out roughly a second before the move, so its placeholder has already resolved into artwork by the time the track arrives — the swap happens in the corner of your eye rather than in front of you. Artwork settles from a hair over full size as it fades in, which it can afford to do because it carries no text; the captions travel with the track at a constant size. Both springs sit above critical damping, since a carousel that overshoots looks like it missed the frame it was aiming for.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Media player
Row artwork just off screen is fetched before the row is paged across.
Related patterns
- Headline Word RiseEach word travels up out of the clip of its own line, so the headline reads as typeset rather than assembled from pieces.
- Image Blur UpA tiny blurred stand-in holds the frame and sharpens into the full picture, with nothing below it moving.
- Page Transition FadeThe outgoing view sinks a few pixels as it fades while the incoming one rises to meet it.