Lazy Section Reveal
A below-the-fold section fades and lifts the first time it comes into view, and never again after that.
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 { useRef } from "react";
import type { ReactNode, RefObject } from "react";
import { motion, useInView, useReducedMotion } from "motion/react";
import type { Variants } from "motion/react";
/**
* Vibary · Lazy Section Reveal
*About this pattern
The reveal that long pages are built out of, with the discipline that usually gets left off. An observer watches the section and fires once about a third of it is on screen; its children then arrive a few tens of milliseconds apart, fading and lifting a short distance on an over-damped spring. The important half is the restraint: the observer is armed only once, so scrolling back up leaves the section exactly as the reader left it. Replaying on every pass turns a page into a slideshow and re-hides paragraphs that have already been read, which is worse than no reveal at all. Everything here is type, so it travels a little and never scales.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
Feature blocks lift and fade in once as the page is scrolled past them.
Related patterns
- Text Focus PullWords hold their final position and only lose their blur, so a paragraph resolves without a single line of copy moving.
- Headline Word RiseEach word travels up out of the clip of its own line, so the headline reads as typeset rather than assembled from pieces.
- Infinite Scroll FooterA footer spinner fills a slot that was already reserved, and the next page fades in above it.