npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

Readme

🗂️ 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' ⬆️