Components

Text Reveal

Scroll-linked paragraph reveal: as the text crosses a band of the viewport, each word brightens from faint to full foreground and sheds a slight blur, so the sentence appears to come into focus as you read.

Scrollandeachwordsharpensoutofafaintblur,sothesentencecomesintofocusasyouread.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add text-reveal

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { TextReveal } from "@lumora/ui/components/text-reveal";
// or from the barrel:
import { TextReveal } from "@lumora/ui";

Props worth knowing

text is the paragraph to reveal; each word brightens and sheds blur as it crosses a band of the viewport. Give the wrapper vertical room so there is scroll to bind to. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.