react-text-animate
v2.1.1
Published
A react component library with a collection of modern, high quality and smooth text animations built using framer motion.
Downloads
102
Maintainers
Readme
🗂️ Table of Contents
- 📍 Overview
- 🎁 Features
- 📂 Repository Structure
- 🚀 Quick Start
- 🧭 Project Roadmap
- 🤝 Contributing
- 📒 Changelog
- 📄 License
- 👊 Acknowledgments
📍 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! 🎉
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.