design-infraReport a problem or share feedback← Catalog
Texts reveal
freetransitions/texts-reveal
A headline + supporting line that rise into view with staggered blur — hero copy, empty states, onboarding steps. Exit is decoupled: a single quiet fade with no Y-return so dismissing doesn't replay the reveal in reverse.
$
npx skills add Jakubantalik/transitions.dev # then ask: "apply the texts-reveal transition"- Source
- transitions.dev
- Kind
- transition
- Categories
- transition, text-effect
- Use as
- recipe — technique you apply to your own markup
- Applies to
- herotext-effectempty-state
- Motion
- on enter · subtle · css · low cost · respects reduced motion
- Tags
- css
- Licence
- Free for unlimited personal/commercial use in your products; no republishing the collection. Pro (React/TS variants) $9/mo or $149 lifetime.
- Live demo
- transitions.dev
- Docs
- transitions.dev
Similar
Compare all 4 →- Scroll word revealmotion/text-scroll-word-revealWords light up as you scroll through a paragraph — the classic manifesto/hero statement reveal. Free example (motion is MIT); copy and adapt the source from the example page.
- anime.js v4animejs/animejsReach for it over Motion when choreography is the point: long multi-element timelines (createTimeline), grid staggers from center, SVG morphTo / createDrawable line drawing / createMotionPath, createDraggable, onScroll, and a free splitText (Motion's is Motion+). Vanilla JS — no React components: run it in useEffect inside createScope({ root }) and call revert() on unmount. For presence, layout and gestures in React, Motion stays the default. See catalog/sources/motion.md.
- Text Generate Effectaceternity/text-generate-effectWord-by-word fade-in for one hero line or an AI answer. Don't use on long paragraphs.