Coming Soon
A locked preview of an unreleased area, crossed once by a gloss and dated by a badge that lands last.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Coming Soon
*
* An area that exists but is not open yet. The layout behind is real
* enough to recognise and dim enough not to read, a single gloss travelsAbout this pattern
An area that exists in the navigation but is not open yet. The layout behind the card is real enough to recognise and dim enough not to read, so the reader learns roughly what is coming; a single gloss travels across it once and stops, because a surface that keeps gleaming is asking for attention it cannot repay yet. The badge, headline and date arrive in order, and asking to be notified swaps the button label inside a fixed slot so nothing about the card moves. Reduced motion drops the gloss entirely and keeps the sequence.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Issue tracker
An upcoming area appears in the sidebar as a dimmed card with a short note about timing.
Related patterns
- Permission NeededThe shape of the content stays visible out of focus while a lock closes over it and offers a way to ask.
- All Caught UpA bell settles, a small badge completes its mark in one stroke, and the list confirms you are current.
- Archive EmptyOne fade and a lid settling three pixels onto a box — the least motion a state can have and still arrive.