FadingLettersFx

Updated: April 23, 2025

FadingLettersFx creates beautiful letter-by-letter animations with precise timing control. Each letter animates independently with customizable delays, creating organic and engaging text reveals.

FadingLettersFx

WelcometoOnceUI

<FadingLettersFx
  align="center"
  text="Welcome to Once UI"
  animationState="entering"
  variant="display-strong-l" />

Animation States

The component supports three distinct animation states: entering, visible, and exiting.

Animation States

EnteringAnimation

VisibleState

ExitingAnimation

<Column gap="16">
  <FadingLettersFx text="Entering Animation" animationState="entering" variant="heading-strong-m" />
  <FadingLettersFx text="Visible State" animationState="visible" variant="heading-strong-m" />
  <FadingLettersFx text="Exiting Animation" animationState="exiting" variant="heading-strong-m" />
</Column>

Entering

Letters fade in sequentially with a blur-to-focus effect and scale transformation. Each letter has a calculated delay based on its position in the word and message.

Visible

Letters remain static without animation. Use this state when no animation is active.

Exiting

Letters fade out with blur and scale effects. Each letter has a random exit delay for an organic dissolution effect.

Staggering

Use the messageIdx prop to create staggered animations across multiple messages. Each increment adds 2500ms of base delay.

Staggering

Firstmessageappears

Secondmessageappears

Thirdmessageappears

<Column gap="12">
  <FadingLettersFx text="First message appears" animationState="entering" messageIdx={0} variant="body-default-l" />
  <FadingLettersFx text="Second message appears" animationState="entering" messageIdx={1} variant="body-default-l" />
  <FadingLettersFx text="Third message appears" animationState="entering" messageIdx={2} variant="body-default-l" />
</Column>

Custom Styling

FadingLettersFx extends the Once UI Text component, so you can use all Text props including variants, colors, and custom styles.

Custom Styling

Customstyledtext

<FadingLettersFx
  text="Custom styled text"
  animationState="entering"
  variant="display-strong-s"
  onBackground="brand-weak" />

Timing Configuration

The animation timing follows a precise formula:

Message Base Delay: messageIdx × 2500ms
Word Delay: wordIdx × 200ms
Letter Delay: letterIdx × 40ms
Total Entry Delay: Message Base + Word Delay + Letter Delay
Exit Delay: Random between 0-400ms per letter

API reference

Prop	Type	Default
textrequired The string to animate, letter by letter.	string	—
animationStaterequired Which phase to play: entering, visible or exiting. The parent drives it.	enteringvisibleexiting	—
messageIdx Which message this is in a sequence, used to offset the stagger.	number	0
…and every FlexProps prop	inherited	—
…and every TextProps prop	inherited	—
variant	TextVariant	body-default-m
onBackground	ColorToken	neutral-strong
children	React.ReactNode	—

Usage Tips

Use messageIdx for sequential message animations
Combine with other effects for complex animations
Perfect for hero sections, loading states, and transitions
Works with all Once UI Text variants and styling
Consider prefers-reduced-motion for accessibility in production

EffectsTiltFx

EffectsBlobFx

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club