Paywall Reveal
Article text dissolves into the page under a gradient while the upgrade offer rises beneath 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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Paywall Reveal
*
* The article keeps reading right up to the edge: the text dissolves
* into the page under a gradient while the upgrade card rises beneath
* it. Nothing is stamped over the value, and nothing is hidden behind aAbout this pattern
The moment a metered article runs out. The body is laid out in full and clipped optically by a gradient that resolves to the page background, so the last sentence fades instead of hitting a lid — the reader can see the shape of what continues, which is what makes the offer legible rather than coercive. The offer then rises from below on a single settle, its rule drawing in from the left. Nothing pulses, nothing counts down and nothing covers the value above the ask; the restraint is the design decision, not a stylistic one.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
Member-only stories fade the body into the page with the membership offer directly beneath.
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.
- Product Image ZoomThe product magnifies inside its own frame with the transform origin chasing the pointer.