Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mwaqar29/react-text-animate
A react component library with a collection of modern, high quality and smooth text animations built using framer motion.
https://github.com/mwaqar29/react-text-animate
framer-motion scroll-animations text-animations
Last synced: 2 months ago
JSON representation
A react component library with a collection of modern, high quality and smooth text animations built using framer motion.
- Host: GitHub
- URL: https://github.com/mwaqar29/react-text-animate
- Owner: mwaqar29
- License: mit
- Created: 2024-08-16T10:07:40.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-01T18:50:24.000Z (4 months ago)
- Last Synced: 2024-09-29T00:17:14.400Z (3 months ago)
- Topics: framer-motion, scroll-animations, text-animations
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-text-animate
- Size: 1.34 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
✨ React Text Animate ✨
Elevate your React/Next.js projects with a stunning collection of sleek, modern, and silky-smooth text animation components powered by Framer Motion. Effortlessly add a touch of elegance and bring your UI to life, adding dynamic flair and visual appeal that will leave your users impressed!
Built with 🛠️
## 🗂️ Table of Contents
- [📍 Overview](#-overview)
- [🎁 Features](#-features)
- [📂 Repository Structure](#-repository-structure)
- [🚀 Quick Start](#-quick-start)
- [⚙️ Installation](#️-installation)
- [💻 Usage](#-usage)
- [🧭 Project Roadmap](#-project-roadmap)
- [🤝 Contributing](#-contributing)
- [📒 Changelog](#-changelog)
- [📄 License](#-license)
- [👊 Acknowledgments](#-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
```sh
└── 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
```sh
npm i react-text-animate
```
- yarn
```sh
yarn add react-text-animate
```
- pnpm
```sh
pnpm add react-text-animate
```
### 💻 Usage
**Note**: Check out the live demo of this package along with many more usage examples on [CodeSandbox](https://codesandbox.io/p/sandbox/react-text-animate-demo-4mrhxr).
Out of the box, you can use one of the components as shown in the example below:
```jsx
import { TextEffectOne } from 'react-text-animate'
const App = () => {
return
}
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 `` component that was used above:
> [!NOTE]
> The only **required** prop is `text`. Rest all are optional.
> Most of the props for the `` 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 ``) may have more props than those listed in the table below.
#### 🧩 Component: ``
| Prop | Type | Default | Description |
| ------------------------- | --------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `wrapperElement` | keyof JSX.IntrinsicElements | `p` | JSX-equivalent of HTML Element wrapping the entire component
For 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: ``
| 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: ``
The props for this component and further components mentioned below include some from both `` and ``.
_**Note**: This component animates on **hover**! And works best with text that contains only **uppercase** characters._
#### 🧩 Component: ``
| 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](#-contributing) section.
## 📒 Changelog
### 🔥 What's new!
### [2.1.1](https://github.com/mwaqar29/react-text-animate/compare/2.1.0...2.1.1) (2024-09-01)
#### Bug Fixes
- **text-effect-4:** cursor responsiveness issues fixed; other minor issues handled ([002b7ad](https://github.com/mwaqar29/react-text-animate/commit/002b7adb3e117f06452eab8d15f6785d75f332ce))
### [2.1.0](https://github.com/mwaqar29/react-text-animate/compare/2.0.2...2.1.0) (2024-08-31)
#### Features
- **components:** added grapheme spliter which adds emoji & foreign lang support ([b1e0a39](https://github.com/mwaqar29/react-text-animate/commit/b1e0a392904bab12b3d8a2118ef801899e9b9e13))
- **text-effect-1:** added new prop 'wordByWord' ([4b06a71](https://github.com/mwaqar29/react-text-animate/commit/4b06a7164e6739acd660d44be58de382fa408585))
- **text-effect-4:** added new component text-effect-4! ([e203fb1](https://github.com/mwaqar29/react-text-animate/commit/e203fb16ef8c1a50fbcdfe81068efa85ef74124a))
> **Note**: Please read [CHANGELOG.md](https://github.com/mwaqar29/react-text-animate/blob/main/CHANGELOG.md) for complete list of changes.
## 🤝 Contributing
> [!IMPORTANT]
> Please read [CONTRIBUTING.md](https://github.com/mwaqar29/react-text-animate/blob/main/CONTRIBUTING.md) & [CODE_OF_CONDUCT.md](https://github.com/mwaqar29/react-text-animate/blob/main/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](https://github.com/mwaqar29/react-text-animate/issues)**: Submit bugs found or log feature requests for the `react-text-animate` project.
- **[Submit Pull Requests](https://github.com/mwaqar29/react-text-animate/blob/main/CONTRIBUTING.md)**: Review open PRs and contribute by submitting your own new animated text component PRs.
Thanks 👊 to all contributors!
## 📄 License
This project is protected under the [MIT](https://choosealicense.com/licenses/mit/) License. For more details, refer to the [LICENSE](https://github.com/mwaqar29/react-text-animate/blob/main/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.
- [Tom Is Loading, Hover Dev LLC](https://github.com/TomIsLoading)
- [Manu Arora, Aceternity UI](https://github.com/manuarora700)
[**Return to 'Overview' ⬆️**](#-overview)
Thanks for reading!
Love this project ? Don't forget to ⭐ me!
