Guest Mode Limit
A guest hits the limit and the gate glides up over a soft fade, offering a way in.
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 · Guest Mode Limit
*
* The moment a guest runs out of free reading. The content stays where
* it was and stays visible — a soft fade, not a blackout — while a panelAbout this pattern
A limit that slams shut reads as a punishment; this one reads as an offer. The content stays exactly where it was and stays visible, receding toward the page colour behind a soft gradient rather than a blackout, so the guest can still see what is on the other side. The panel glides up from the bottom edge on a low-stiffness spring that is heavily damped — it is asking for something, so it never snaps and never bounces at the end. The gate is deliberately opaque where it overlaps the list, using the CSS system colors so it lands light in a light app and dark in a dark one without a hardcoded surface.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
An article fading under a panel that offers a way to continue reading.
Related patterns
- Password Reset SentThe request panel gives way to a confirmation, with the envelope settling in and its flap stroking closed.
- Permission Scope ListA consent screen reveals each requested scope in turn and keeps the approve button inert until they have all landed.
- Sign-in Success HandoffThe panel recedes as the product assembles behind it and the avatar travels into the header.