Template Gallery Pick
The chosen thumbnail grows in place into a preview of the workspace it would create.
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 } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Template Gallery Pick
*
* Choosing a template expands its thumbnail into a preview of the
* workspace it will create. The artwork is one shared element thatAbout this pattern
A starting-point chooser where picking and previewing are the same gesture. The thumbnail's frame is a shared element: Motion measures it in the strip and again in the preview and grows it between the two, so what is being described is visibly what was tapped. Thumbnail and preview are cut to the same aspect ratio, which keeps the scale uniform — a frame that changes shape mid-flight distorts everything drawn inside it. Only the wash and the artwork ride the expansion; the name, the summary and the buttons fade up afterwards at their final size, because text carried by a layout animation is text nobody can read while it moves. The artwork is inline SVG, so a gallery of templates costs no image requests.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
A template tile opens into a full preview of the pages it would add.
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.
- Tutorial Card PlayThe tutorial thumbnail grows into a player, and the controls only arrive once the frame has stopped moving.
- Value Prop CarouselIntro slides advance on their own, with the artwork crossfading a beat behind the copy.