React Random Reveal

React component/hook to add a little thrill before revealing the truth. This effect is achieved via a character animation that shows random characters before revealing the text you want to emphasize. The library provides full control over the reveal run: its duration and easing can be freely adjusted.

• Animate random letters, numbers, words or even emojis
• Performance optimized with single requestAnimationFrame loop to animate the random characters (no setInterval used)
• Built with TypeScript

Installation

yarn add react-random-reveal

or

npm install react-random-reveal

Demos

Text Demo	Emoji Demo	Words Demo

Basic usage

As a component:

import { RandomReveal } from 'react-random-reveal'

const AddSuspenseComponent = () => (
  <RandomReveal
    isPlaying
    duration={4.6}
    revealDuration={0.5}
    characters="hello world"
  />
)

As a hook:

import { useRandomReveal } from 'react-random-reveal'

const AddSuspenseComponent = () => {
  const characters = useRandomReveal({
    isPlaying: true,
    duration: 4.6,
    revealDuration: 0.5,
    characters: 'hello world'
  })
  
  return characters
}

Props