react-revealing-text

A react text container component that reveals letter by letter as you scroll through the page. I originally saw this in a youtube video but wanted to recreate this effect regardless of the content.

Installation

Install using npm:

npm install --save @viewtech-labs/revealing-text

Install using yarn:

yarn add @viewtech-labs/revealing-text

Usage

// Import the library
import { RevealingText } from "@viewtech-labs/revealing-text";

// return it from your components
return (
  <RevealingText
    className="[&>span]:text-3xl [&>span]:text-gray-50 [&>span]:font-bold"
    startZoneY={1000}
    endZoneY={300}
    opacitySharpness={16}
    minOpacity={0.1}
    text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius,
      eveniet voluptate! Quia at atque voluptas quis distinctio ut
      labore! Error ad sapiente voluptatem fuga rerum tenetur quod.
      Sit, modi minima. Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Eius, eveniet voluptate! Quia at atque
      voluptas quis distinctio ut labore! Error ad sapiente voluptatem
      fuga rerum tenetur quod. Sit, modi minima."
  />
);

See this example working.

API

Below we have all the props that we can use with the <RevealingText> component. There are also some methods that can be used imperatively.

| Name | Type | Default | Description | | -------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | text | number | N\A | Represents the text to be implemented into component, based on the length the reveal will change rate. | | startZoneY | number | 1000 | Subtracting from the offsetY of the component made, startZoneY represents the starting zone line triggering the reveal. | | endZoneY | number | 300 | Subtracting from the offsetY of the component made, startEndY represents the end zone line where all letters are shown. | | opacitySharpness | number | 16 | Reprents the sharpness of the reveal curve using (1/x^y) y being 16 by default, use a lesser for the curve to be a more rounded curve resulting in more letters being revealed. | | minOpacity | number | 0.1 | Represents the min opacity for revealing text, allowing for a shadow to be shown first | | className | number | N/A | Value forwarded to the className of the div container of the letters |

Usage with TypeScript

Interface for Props

interface RevealingTextProps {
  text: string;
  startZoneY: number;
  endZoneY: number;
  opacitySharpness?: number;
  minOpacity: number;
  className: string;
}