LetterFx

Updated: May 11, 2025

LetterFx animates text character-by-character using randomized symbols that resolve into the final message. It supports multiple trigger types and speeds.

LetterFx

Spice up your landing page with special effects

<LetterFx
  speed="medium"
  trigger="instant"
  charset="X$@aHz0y#?*01+">
    Spice up your landing page with special effects
</LetterFx>

API reference

Prop	Type	Default
children	React.ReactNode	—
trigger What starts it. "custom" waits for the function handed to onTrigger.	hoverinstantcustom	hover
speed How fast the letters settle.	fastmediumslow	medium
charset Characters it scrambles through on the way.	string[]	defaultCharset
onTrigger Receives a function that starts it, when trigger is "custom".	(triggerFn: () => void) => void	—
className	string	—
style	React.CSSProperties	—

EffectsHoloFx

EffectsRevealFx

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club