RevealFx

Updated: May 11, 2025

RevealFx animates content into view using a vertical translateY motion. You can control the speed, delay, and triggering behavior.

RevealFx

The revolution begins

Get ready for the next phase

Join now

<RevealFx>
  The revolution begins
</RevealFx>
<RevealFx delay={200} translateY={0.5}>
  Get ready for the next phase.
</RevealFx>
<RevealFx delay={400} translateY={1}>
  <Button>
    Join now
  </Button>
</RevealFx>

API reference

Prop	Type	Default
children	React.ReactNode	—
speed Named duration, or a number of milliseconds.	slowmediumfastnumber	medium
delay Milliseconds before it starts. Stagger a set with index * 100.	number	0
revealedByDefault Start revealed, for content that is already on screen.	boolean	false
translateY How far it travels. A number is rem, a token is a spacing step.	numberSpacingToken	—
revealed Whether it has played. Latch this off useInViewport for a below-the-fold reveal.	boolean	—
style	React.CSSProperties	—
className	string	—
…and every FlexProps prop	inherited	—

EffectsLetterFx

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club