React-text-animate NPM

🗂️ Table of Contents

📍 Overview

The react-text-animate library offers a seamless blend of ease & functionality, providing declarative, plug-and-play animated text components alongside a range of customization options. Built entirely with TypeScript and powered by Framer Motion, the library delivers production-ready animations with buttery-smooth performance at 60fps. The animated text components also feature built-in viewport detection that activates animations as the component scrolls into view, while also offering customization options to enhance their versatility. With robust code quality maintained by ESLint and Prettier, and an optimized, compact bundle size achieved through Rollup's tree shaking and dead code elimination, this library is both efficient and reliable.

🎁 Features

🧩 Simple and Declarative: Plug-and-play components that are easy to use yet customizable.
🔭 Built-in Viewport Detection: Activates animations as the component scrolls into view.
📘 TypeScript-Powered: Components are built purely with TypeScript for type safety and reliability.
🌀 Fueled by Framer Motion: Production-ready, 60fps animations that are smooth and performant.
✅ High-Quality Code: ESLint and Prettier integration ensures clean, robust code.
♿️ Screen Reader Accessible: The text within the components is fully readable by screen readers.
⚡ Optimized Bundle Size: Rollup's tree shaking and dead code elimination keep the bundle lightweight and efficient.

📂 Repository Structure

└── react-text-animate/
    ├── .husky/
    ├── src/
    │   ├── assets/
    │   ├── components/
    │   │   ├── text-effect-3/
    │   │   │   ├── index.tsx
    │   │   │   └── index.css
    │   │   └── ...
    │   ├── index.ts
    │   └── styles.css
    ├── package.json
    ├── rollup.config.ts
    └── ...

🚀 Quick Start

Requirements:

A React/Next.js application.

!NOTE This package requires your project to use React v18.0 or higher to function properly.

⚙️ Installation

Install the react-text-animate library in your React/Next.js application using one of the the below commands (as per the package manager installed in your system).

npm
```
npm i react-text-animate
```
yarn
```
yarn add react-text-animate
```
pnpm
```
pnpm add react-text-animate
```

💻 Usage

Note: Check out the live demo of this package along with many more usage examples on CodeSandbox.

Out of the box, you can use one of the components as shown in the example below:

import { TextEffectOne } from 'react-text-animate'

const App = () => {
  return <TextEffectOne text="TYPOGRAPHY" />
}

export default App

And here is the result! 🎉

Text Effect One Result

Yes, getting started is that simple! However, don't let the simplicity make you think there's nothing more to it. Each component offers a range of customization options. Feel free to experiment with these settings until you achieve your desired result. Get creative by adjusting colors, letter spacing, font style and font weight, and try different font families using the className and style props! Below are the props available for the <TextEffectOne /> component that was used above:

!NOTE The only required prop is text. Rest all are optional. Most of the props for the <TextEffectOne /> component are common to all other animated text components. Only the additional props for other components will be listed to avoid redundancy. So a component (except <TextEffectOne />) may have more props than those listed in the table below.

🧩 Component: `<TextEffectOne />`

Prop	Type	Default	Description
`wrapperElement`	keyof JSX.IntrinsicElements	`p`	JSX-equivalent of HTML Element wrapping the entire componentFor e.g. `div`, `span`, `strong`, etc.
`text`	string \| string[]	`undefined`	The actual text to animate. For e.g. `"ELEGANT"`, `["Multline", "Line 2"]`, etc.
`className`	string	`undefined`	HTML class name applied to the wrapper element to style the text. Tip: Use `tailwind` utility classes for styling!
`style`	CSSProperties	`undefined`	JSX inline style object. For e.g. `{ fontStyle: 'italic' }`.
`rotation`	number	`0`	Rotation Angle of letters (or words, when `wordByWord` prop is `true`). For e.g. `67.5`, `-45`, etc (in degrees).
`staggerDuration`	number	`0.1`	Delay between the animation of each individual letter (in seconds).
`fromTop`	boolean	`false`	Animate letters from top to bottom.
`fromLast`	boolean	`false`	Animate letters from right to left.
`wordByWord`	boolean	`false`	Animate letters word-by-word instead of character-by-character.
`initialDelay`	number	`0`	Delay before starting the animation (in seconds).
`animateOnce`	boolean	`false`	When the text component scrolls out of view and then back into view, the animation is triggered again. This prop can be used to turn this behaviour off.
`elementVisibilityAmount`	number	`0.5`	The amount of an element that needs to enter the viewport for the animation to be triggered. This is defined as a number between 0 and 1.
`lineHeight`	number	`0.8` for text with only uppercase letters, else `1.2`	Specifies the line height to prevent lowercase characters with descenders (like 'g', 'j', 'p', 'q', 'y') from being cut off in some fonts. Adjust this property to fit the font as needed.

🧩 Component: `<TextEffectTwo />`

Prop	Type	Default	Description
`text`	string	`undefined`	The actual text to animate. For e.g. `"Hey yo!"`.
`filter`	boolean	`true`	Toggles the blur effect in the animation.
`animationDuration`	number	`0.1`	Time taken for the entire animation to complete (in seconds).

🧩 Component: `<TextEffectThree />`

The props for this component and further components mentioned below include some from both <TextEffectOne /> and <TextEffectTwo />. Note: This component animates on hover! And works best with text that contains only uppercase characters.

🧩 Component: `<TextEffectFour />`

Prop	Type	Default	Description
`cursorConfig`	CursorConfig	`undefined`	The styling of the cursor along with some other properties (that are listed in the below table). Use it to create different types of cursors & override the defaults. Note: Initially, this prop is `undefined`, but default styling is applied to ensure the cursor is visible on the screen.
`fromCenter`	boolean	`false`	Start the animation from the center.

Interface: `CursorConfig`

Name	Type	Default	Description
`type`	hidden \| vertical \| horizontal	`vertical`	Types of cursors to choose from.
`blinkRate`	number	`0.35`	Sets the cursor blink speed/interval (in seconds). Lower values increase blink frequency; higher values decreases it
`width`	string	`1px`	Cursor width. For e.g. `4px`, `1rem`, etc.
`color`	string	`currentColor`	Cursor color. For e.g. `cyan`, `green`, `#c4c4c4`, etc
`marginLeft`	string	`0px`	Left Margin of the cursor (to add some more spacing)

🧭 Project Roadmap

We'll keep adding more animated text components in future! Keep checking back every weekend for updates on new components and enhancements. Additionally, if you want to contribute any, do check out the Contributing section.

📒 Changelog

🔥 What's new!

2.1.1 (2024-09-01)

Bug Fixes

text-effect-4: cursor responsiveness issues fixed; other minor issues handled (002b7ad)

2.1.0 (2024-08-31)

Features

components: added grapheme spliter which adds emoji & foreign lang support (b1e0a39)
text-effect-1: added new prop 'wordByWord' (4b06a71)
text-effect-4: added new component text-effect-4! (e203fb1)

Note: Please read CHANGELOG.md for complete list of changes.

🤝 Contributing

!IMPORTANT Please read CONTRIBUTING.md & CODE_OF_CONDUCT.md for details on our code of conduct, and the process for submitting pull requests to us. I also strongly recommend that you check if you are using the latest version of the project. If you are not up-to-date, see if updating fixes your issue first. Also, check for open issues and pull requests to see if someone else is working on something similar.

Contributions are welcome! Here are several ways you can contribute:

Report Issues: Submit bugs found or log feature requests for the react-text-animate project.
Submit Pull Requests: Review open PRs and contribute by submitting your own new animated text component PRs.

📄 License

This project is protected under the MIT License. For more details, refer to the LICENSE file.

👊 Acknowledgments

Some of these animations are inspired by the work of brilliant and generous individuals. I want to extend my heartfelt thanks to them for their invaluable contributions to the community.

Return to 'Overview' ⬆️