sigilUI

Text Reveal

Reveal a passage of text progressively.

@sigil-ui/componentsReact

Preview

Live preview Interactive

Import

import { TextReveal } from "@sigil-ui/components";

Usage

<TextReveal text="Hover to reveal" />

Props

PropTypeDefaultDescription
textstring—The text to reveal.
byRevealUnitwordReveal by word or character.
intervalnumber60Stagger interval between units in ms.
delaynumber0Base delay in ms.
trigger"scroll" | "mount"——
viewOptionsUseInViewOptions——

Token integration

CSS VariablePurpose
--s-duration-fastDuration fast
--s-ease-outEase out