blur-text

name	blur-text
description	Words resolve from a soft blur, one after another — a calm, premium headline entrance. One headline per view; not body copy. Under prefers-reduced-motion it appears instantly and sharp.
triggers	["blur text","blur in headline","模糊入场","虚化聚焦文字"]
od	{"mode":"prototype","surface":"web","platform":"desktop","category":"animation-motion","upstream":"https://reactbits.dev/text-animations/blur-text","preview":{"type":"html"},"design_system":{"requires":false}}

blur-text

A headline that resolves from blur, word by word. Dependency-free, reduced-motion safe.

How to apply

Copy css+js; <h1 data-blur-text>Your headline</h1>.