Skip to content
Cojeev UI

Text reveal

Typography

Readable word, grapheme, phrase or measured-line arrivals with soft focus, fold and organic scale choices.

React · copy into your project · light and dark themes

Try it

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal
npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/text-reveal.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes button, native-select, label, typography. Install its parts together:

Terminal
npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/text-reveal.json https://luv-jeri.github.io/cojeev-ui/r/button.json https://luv-jeri.github.io/cojeev-ui/r/native-select.json https://luv-jeri.github.io/cojeev-ui/r/label.json https://luv-jeri.github.io/cojeev-ui/r/typography.json

Using text reveal

  • Choose rise, fade, soften, fold, bloom, scale or settle. Bloom includes a small overshoot; scale gently grows; settle moves a slightly enlarged phrase into place.

  • Choose split="word", "grapheme", "text" or "line". Line mode measures real browser wrapping, including hard breaks, and remeasures after resizing or font loading. It renders a block; use it for headings and short passages.

  • Change replayKey to replay deliberately. Duration is bounded to 0–1500ms and the total stagger delay is distributed evenly within 600ms, including long text.

  • Text Reveal is an entrance effect and stays readable after playback or interruption. Use the Presence components when content also needs an exit lifecycle.

  • Line mode measures up to 4000 graphemes. Longer prose stays fully readable in its normal layout without line animation. Resizing settles the text rather than replaying it; replayKey starts a new arrival.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

TextRevealProps

PropTypeRequired
textstringYes
as"span" | "p" | "h1" | "h2" | "h3"No
replayKey

Change this value to deliberately replay the reveal.

string | numberNo
variant"rise" | "fade" | "soften" | "fold" | "bloom" | "scale" | "settle"No
split

Lines use the browser's actual wrapping; graphemes keep emoji and marks intact.

"word" | "grapheme" | "text" | "line"No
stagger

Milliseconds between units. The total delay is capped for long text.

numberNo
direction"up" | "down"No
durationnumberNo

Accessibility

  • The complete text is exposed once; animated visual fragments are hidden from assistive technology.

  • Reduced motion, Motion Off and Flow Off show the still state. Leaving the viewport during playback settles text; returning does not replay the same content.

  • Use word, whole-phrase or measured-line grouping for scripts whose letters join across grapheme boundaries.

States and appearance

restrevealingreduced motion

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.