Product Image Zoom
The product magnifies inside its own frame with the transform origin chasing the pointer.
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 type { PointerEvent as ReactPointerEvent } from "react";
import {
motion,
useMotionTemplate,
useMotionValue,
useSpring,
useReducedMotion,About this pattern
Magnification is only useful if it magnifies the right thing. The frame grows the product on a spring while the transform origin follows the pointer on a second, tighter spring, so the detail under the cursor is the detail that opens up and the frame never has to be re-aimed. Origin is expressed in percentages, which keeps it correct at any frame size, and the whole thing is one transform — no layout work per frame. Reduced motion keeps the magnification, because that is the information, and drops the chase.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Product page
Pointing at a garment photo magnifies it inside the same frame rather than opening a modal.
Related patterns
- Plan Card SpotlightThe light rides the border instead of washing the fill, so the card can say it is the one you are on without getting between you and the price.
- Payment Card FlipA saved card turns on its vertical axis to put the security code where it actually lives.
- Paywall RevealArticle text dissolves into the page under a gradient while the upgrade offer rises beneath it.