Components

Text Reveal

Brightens its words one by one as the element scrolls up through the viewport.

php artisan blatui:add text-reveal

BlatUI components reveal themselves as you scroll accessible, token-driven, and yours to own.

<x-ui.text-reveal class="max-w-xl text-center text-2xl font-semibold tracking-tight text-balance">
    BlatUI components reveal themselves as you scroll — accessible, token-driven, and yours to own.
</x-ui.text-reveal>

API Reference

Props, slots and exposed methods for <x-ui.text-reveal>.

Props

Prop Type Default Description
as string 'p' The wrapper HTML tag to render (sanitized to alphanumerics, falling back to "p").

Slots

Slot Description
default The text to reveal. It is split into words that dim, then brighten one by one as the element scrolls up through the viewport. The full text is server-rendered at full opacity, so no-JS readers and crawlers get everything; it stays fully revealed under prefers-reduced-motion.