Text Focus Pull
Words hold their final position and only lose their blur, so a paragraph resolves without a single line of copy moving.
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";
import type { Variants } from "motion/react";
/**
* Vibary · Text Focus Pull
*
* A paragraph that is already in place and only comes into focus. EveryAbout this pattern
For body copy that has to arrive with some ceremony and cannot afford to move while it does it. A paragraph that slides, staggers or grows is a paragraph the eye has to re-find twice; here every word is already exactly where it will be read, and the only thing that changes is how sharp it is. The blur is lifted word by word across the sentence, which gives the sweep a direction without giving it any travel, and the whole thing rides an eased tween rather than a spring — a spring on a blur sharpens past focus and softens back, and there is no such thing as too sharp to be wrong. Two details make it cheap enough to use on real copy. The filter is removed outright once the last word lands rather than left animating at zero, because blur puts every word on its own composited layer and a paragraph that resolved ten seconds ago should not still be paying for forty of them. And the split is decorative, so the paragraph carries the whole sentence as its accessible label with the word spans hidden — a screen reader reads a sentence, not a word list.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
The body paragraph resolves out of a haze while the heading above it stays put.
- AI assistant
The finished summary comes into focus in place once the model stops writing.
Related patterns
- Lazy Section RevealA below-the-fold section fades and lifts the first time it comes into view, and never again after that.
- 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.
- Image Blur UpA tiny blurred stand-in holds the frame and sharpens into the full picture, with nothing below it moving.