Effect 16 - Sequential Fade Text

Pro

A reusable inline text effect that reveals each word one letter at a time with fade-in, then fades the full word out before moving to the next.

Prev Next

Theme

Upgrade to Pro

Effect 16

Motion that feels effortless

A reusable inline fade-text effect that reveals letters one at a time, lets the full word settle, then fades the whole word out before starting the next.

Perfect for rotating copy

Great for headlines

Compact sequence

Loading code...

Starwind Dependencies

This component requires Starwind Pro.

Get lifetime access to all premium components, updates, and priority support.

Upgrade to Pro

Failed to load code. Please try again.

Code

Usage

<Effect16
  letter-delay={85}
  fade-duration={260}
  pause-duration={1350}
  gap-duration={180}
  start-delay={0}
  loop={true}
/>

Props

prop	type	default	description
`words`	`string[]`	`[]`	Words or phrases revealed by the sequential fade effect.
`letterDelay`	`number`	`90`	Delay in milliseconds between each letter reveal.
`fadeDuration`	`number`	`240`	Duration in milliseconds for each letter fade and full-word fade.
`pauseDuration`	`number`	`1400`	Pause in milliseconds after a word has fully appeared.
`gapDuration`	`number`	`180`	Delay in milliseconds between fading one word out and revealing the next.
`startDelay`	`number`	`0`	Delay in milliseconds before the first word begins.
`loop`	`boolean`	`true`	Whether the fade sequence continues cycling after the final word.