{"id":15160951,"url":"https://github.com/mwaqar29/react-text-animate","last_synced_at":"2026-02-07T21:02:04.585Z","repository":{"id":253382141,"uuid":"843345929","full_name":"mwaqar29/react-text-animate","owner":"mwaqar29","description":"A react component library with a collection of modern, high quality and smooth text animations built using framer motion.","archived":false,"fork":false,"pushed_at":"2024-09-01T18:50:24.000Z","size":1409,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-10T20:55:10.465Z","etag":null,"topics":["framer-motion","scroll-animations","text-animations"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-text-animate","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mwaqar29.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-16T10:07:40.000Z","updated_at":"2024-09-01T18:50:28.000Z","dependencies_parsed_at":"2024-08-16T11:04:28.265Z","dependency_job_id":"9daf0e79-57e7-4868-9d8e-9499d71a2c76","html_url":"https://github.com/mwaqar29/react-text-animate","commit_stats":null,"previous_names":["mwaqar29/react-text-animate"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/mwaqar29/react-text-animate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwaqar29%2Freact-text-animate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwaqar29%2Freact-text-animate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwaqar29%2Freact-text-animate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwaqar29%2Freact-text-animate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mwaqar29","download_url":"https://codeload.github.com/mwaqar29/react-text-animate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwaqar29%2Freact-text-animate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29208176,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T20:33:12.493Z","status":"ssl_error","status_checked_at":"2026-02-07T20:30:47.381Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framer-motion","scroll-animations","text-animations"],"created_at":"2024-09-26T23:42:35.180Z","updated_at":"2026-02-07T21:02:04.570Z","avatar_url":"https://github.com/mwaqar29.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n \u003ch1 align=\"center\"\u003eāœØ React Text Animate āœØ\u003c/h1\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003cem\u003e\n 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!\n \u003c/em\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003c!-- NPM package version --\u003e\n \u003ca href=\"https://www.npmjs.com/package/react-text-animate\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t \u003cimg src=\"https://img.shields.io/npm/v/react-text-animate?logo=npm\u0026color=cb3837\u0026style=for-the-badge\" alt=\"license\"\u003e\n \u003c/a\u003e\n\n \u003c!-- Minified Bundle Size --\u003e\n \u003cimg src=\"https://img.shields.io/npm/unpacked-size/react-text-animate/latest?style=for-the-badge\u0026color=yellow\" alt=\"Minzipped Size\"\u003e\n\n \u003c!-- Latest GitHub Release--\u003e\n \u003ca href=\"https://github.com/mwaqar29/react-text-animate/releases\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n \u003cimg alt=\"GitHub Release\" src=\"https://img.shields.io/github/v/release/mwaqar29/react-text-animate?style=for-the-badge\u0026logo=github\u0026label=Release\u0026color=plum\"\u003e\n \u003c/a\u003e\n\n \u003c!-- Last Commit --\u003e\n \u003cimg src=\"https://img.shields.io/github/last-commit/mwaqar29/react-text-animate?logo=git\u0026logoColor=white\u0026style=for-the-badge\" alt=\"last-commit\"\u003e\n\n \u003c!-- Repo Top Language--\u003e\n \u003cimg src=\"https://img.shields.io/github/languages/top/mwaqar29/react-text-animate?style=for-the-badge\" alt=\"repo-top-language\"\u003e\n\n \u003c!-- License--\u003e\n \u003ca href=\"#-license\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n \u003cimg src=\"https://img.shields.io/github/license/mwaqar29/react-text-animate?logo=opensourceinitiative\u0026logoColor=white\u0026style=for-the-badge\" alt=\"license\"\u003e\n \u003c/a\u003e\n\n \u003c!-- Code of Conduct--\u003e\n \u003ca href=\"https://github.com/mwaqar29/react-text-animate/blob/main/CODE_OF_CONDUCT.md\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/code_of-conduct-hotpink?style=for-the-badge\" alt=\"code-of-conduct\"\u003e\n \u003c/a\u003e\n\n \u003c!-- Contributions Welcome--\u003e\n \u003ca href=\"#-contributing\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/contributions-welcome-8A2BE2?style=for-the-badge\" alt=\"contributions-welcome\"\u003e\n \u003c/a\u003e\n\n \u003c!-- Commitzen Friendly--\u003e\n \u003ca href=\"http://commitizen.github.io/cz-cli/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=for-the-badge\" alt=\"Commitizen friendly\" /\u003e\n \u003c/a\u003e\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e\n \u003cem\u003eBuilt with šŸ› ļø\u003c/em\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/react/react-original.svg\" height=\"42\" width=\"42\" /\u003e\n \u003cimg src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/typescript/typescript-original.svg\" height=\"42\" width=\"42\" /\u003e\n \u003cimg src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/rollup/rollup-original.svg\" height=\"42\" width=\"42\" /\u003e\n \u003cimg src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/framermotion/framermotion-original.svg\" height=\"42\" width=\"42\" /\u003e\n \u003cimg src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/eslint/eslint-original.svg\" height=\"42\" width=\"42\" /\u003e\n \u003cimg src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/html5/html5-original.svg\" height=\"42\" width=\"42\" /\u003e\n \u003cimg src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/css3/css3-original.svg\" height=\"42\" width=\"42\" /\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003c!-- Codesandbox Link --\u003e\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://4mrhxr.csb.app/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/codesandbox-live-d6fb41?style=for-the-badge\u0026labelColor=black\u0026logo=codesandbox\" alt=\"Codesandbox Live Demo Link\" /\u003e\n \u003c/a\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n## šŸ—‚ļø Table of Contents\n\n- [šŸ“ Overview](#-overview)\n- [šŸŽ Features](#-features)\n- [šŸ“‚ Repository Structure](#-repository-structure)\n- [šŸš€ Quick Start](#-quick-start)\n - [āš™ļø Installation](#ļø-installation)\n - [šŸ’» Usage](#-usage)\n- [šŸ§­ Project Roadmap](#-project-roadmap)\n- [šŸ¤ Contributing](#-contributing)\n- [šŸ“’ Changelog](#-changelog)\n- [šŸ“„ License](#-license)\n- [šŸ‘Š Acknowledgments](#-acknowledgments)\n\n## šŸ“ Overview\n\nThe `react-text-animate` library offers a seamless blend of ease \u0026 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.\n\n## šŸŽ Features\n\n- šŸ§© **Simple and Declarative**: Plug-and-play components that are easy to use yet customizable.\n- šŸ”­ **Built-in Viewport Detection**: Activates animations as the component scrolls into view.\n- šŸ“˜ **TypeScript-Powered:** Components are built purely with TypeScript for type safety and reliability.\n- šŸŒ€ **Fueled by Framer Motion**: Production-ready, 60fps animations that are smooth and performant.\n- āœ… **High-Quality Code**: ESLint and Prettier integration ensures clean, robust code.\n- ā™æļø **Screen Reader Accessible**: The text within the components is fully readable by screen readers.\n- āš” **Optimized Bundle Size**: Rollup's tree shaking and dead code elimination keep the bundle lightweight and efficient.\n\n## šŸ“‚ Repository Structure\n\n```sh\nā””ā”€ā”€ react-text-animate/\n ā”œā”€ā”€ .husky/\n ā”œā”€ā”€ src/\n ā”‚ ā”œā”€ā”€ assets/\n ā”‚ ā”œā”€ā”€ components/\n ā”‚ ā”‚ ā”œā”€ā”€ text-effect-3/\n ā”‚ ā”‚ ā”‚ ā”œā”€ā”€ index.tsx\n ā”‚ ā”‚ ā”‚ ā””ā”€ā”€ index.css\n ā”‚ ā”‚ ā””ā”€ā”€ ...\n ā”‚ ā”œā”€ā”€ index.ts\n ā”‚ ā””ā”€ā”€ styles.css\n ā”œā”€ā”€ package.json\n ā”œā”€ā”€ rollup.config.ts\n ā””ā”€ā”€ ...\n```\n\n## šŸš€ Quick Start\n\n**Requirements:**\n\nA React/Next.js application.\n\n\u003e [!NOTE]\n\u003e This package requires your project to use **React v18.0** or higher to function properly.\n\n### āš™ļø Installation\n\nInstall 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).\n\n- npm\n ```sh\n npm i react-text-animate\n ```\n- yarn\n ```sh\n yarn add react-text-animate\n ```\n- pnpm\n ```sh\n pnpm add react-text-animate\n ```\n\n### šŸ’» Usage\n\n**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).\n\nOut of the box, you can use one of the components as shown in the example below:\n\n```jsx\nimport { TextEffectOne } from 'react-text-animate'\n\nconst App = () =\u003e {\n return \u003cTextEffectOne text=\"TYPOGRAPHY\" /\u003e\n}\n\nexport default App\n```\n\nAnd here is the result! šŸŽ‰\n\n![Text Effect One Result](https://github.com/mwaqar29/react-text-animate/blob/main/src/assets/images/example/text-effect-1-result.gif)\n\nYes, 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 `\u003cTextEffectOne /\u003e` component that was used above:\n\n\u003e [!NOTE]\n\u003e The only **required** prop is `text`. Rest all are optional.\n\u003e Most of the props for the `\u003cTextEffectOne /\u003e` 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 `\u003cTextEffectOne /\u003e`) may have more props than those listed in the table below.\n\n#### šŸ§© Component: `\u003cTextEffectOne /\u003e`\n\n| Prop | Type | Default | Description |\n| ------------------------- | --------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `wrapperElement` | keyof JSX.IntrinsicElements | `p` | JSX-equivalent of HTML Element wrapping the entire component\u003cbr/\u003eFor e.g. `div`, `span`, `strong`, etc. |\n| `text` | string \\| string[] | `undefined` | The actual text to animate. For e.g. `\"ELEGANT\"`, `[\"Multline\", \"Line 2\"]`, etc. |\n| `className` | string | `undefined` | HTML class name applied to the wrapper element to style the text. **Tip**: Use `tailwind` utility classes for styling! |\n| `style` | CSSProperties | `undefined` | JSX inline style object. For e.g. `{ fontStyle: 'italic' }`. |\n| `rotation` | number | `0` | Rotation Angle of letters (or words, when `wordByWord` prop is `true`). For e.g. `67.5`, `-45`, etc (in degrees). |\n| `staggerDuration` | number | `0.1` | Delay between the animation of each individual letter (in seconds). |\n| `fromTop` | boolean | `false` | Animate letters from top to bottom. |\n| `fromLast` | boolean | `false` | Animate letters from right to left. |\n| `wordByWord` | boolean | `false` | Animate letters word-by-word instead of character-by-character. |\n| `initialDelay` | number | `0` | Delay before starting the animation (in seconds). |\n| `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. |\n| `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. |\n| `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. |\n\n#### šŸ§© Component: `\u003cTextEffectTwo /\u003e`\n\n| Prop | Type | Default | Description |\n| ------------------- | ------- | ----------- | ------------------------------------------------------------- |\n| `text` | string | `undefined` | The actual text to animate. For e.g. `\"Hey yo!\"`. |\n| `filter` | boolean | `true` | Toggles the blur effect in the animation. |\n| `animationDuration` | number | `0.1` | Time taken for the entire animation to complete (in seconds). |\n\n#### šŸ§© Component: `\u003cTextEffectThree /\u003e`\n\nThe props for this component and further components mentioned below include some from both `\u003cTextEffectOne /\u003e` and `\u003cTextEffectTwo /\u003e`.\u003cbr/\u003e\n_**Note**: This component animates on **hover**! And works best with text that contains only **uppercase** characters._\n\n#### šŸ§© Component: `\u003cTextEffectFour /\u003e`\n\n| Prop | Type | Default | Description |\n| -------------- | ------------ | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `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 \u0026 override the defaults. **Note**: Initially, this prop is `undefined`, but default styling is applied to ensure the cursor is visible on the screen. |\n| `fromCenter` | boolean | `false` | Start the animation from the center. |\n\n##### Interface: `CursorConfig`\n\n| Name | Type | Default | Description |\n| ------------ | -------------------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------- |\n| `type` | hidden \\| vertical \\| horizontal | `vertical` | Types of cursors to choose from. |\n| `blinkRate` | number | `0.35` | Sets the cursor blink speed/interval (in seconds). Lower values increase blink frequency; higher values decreases it |\n| `width` | string | `1px` | Cursor width. For e.g. `4px`, `1rem`, etc. |\n| `color` | string | `currentColor` | Cursor color. For e.g. `cyan`, `green`, `#c4c4c4`, etc |\n| `marginLeft` | string | `0px` | Left Margin of the cursor (to add some more spacing) |\n\n## šŸ§­ Project Roadmap\n\nWe'll keep adding more animated text components in future! Keep checking back every weekend for updates on new components and enhancements.\nAdditionally, if you want to contribute any, do check out the [Contributing](#-contributing) section.\n\n## šŸ“’ Changelog\n\n### šŸ”„ What's new!\n\n### [2.1.1](https://github.com/mwaqar29/react-text-animate/compare/2.1.0...2.1.1) (2024-09-01)\n\n#### Bug Fixes\n\n- **text-effect-4:** cursor responsiveness issues fixed; other minor issues handled ([002b7ad](https://github.com/mwaqar29/react-text-animate/commit/002b7adb3e117f06452eab8d15f6785d75f332ce))\n\n### [2.1.0](https://github.com/mwaqar29/react-text-animate/compare/2.0.2...2.1.0) (2024-08-31)\n\n#### Features\n\n- **components:** added grapheme spliter which adds emoji \u0026 foreign lang support ([b1e0a39](https://github.com/mwaqar29/react-text-animate/commit/b1e0a392904bab12b3d8a2118ef801899e9b9e13))\n- **text-effect-1:** added new prop 'wordByWord' ([4b06a71](https://github.com/mwaqar29/react-text-animate/commit/4b06a7164e6739acd660d44be58de382fa408585))\n- **text-effect-4:** added new component text-effect-4! ([e203fb1](https://github.com/mwaqar29/react-text-animate/commit/e203fb16ef8c1a50fbcdfe81068efa85ef74124a))\n\n\u003e **Note**: Please read [CHANGELOG.md](https://github.com/mwaqar29/react-text-animate/blob/main/CHANGELOG.md) for complete list of changes.\n\n## šŸ¤ Contributing\n\n\u003e [!IMPORTANT]\n\u003e Please read [CONTRIBUTING.md](https://github.com/mwaqar29/react-text-animate/blob/main/CONTRIBUTING.md) \u0026 [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.\n\u003e 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.\n\nContributions are welcome! Here are several ways you can contribute:\n\n- **[Report Issues](https://github.com/mwaqar29/react-text-animate/issues)**: Submit bugs found or log feature requests for the `react-text-animate` project.\n- **[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.\n\n\u003cbr/\u003e\n\u003ch6 align=\"center\"\u003eThanks šŸ‘Š to all contributors!\u003c/h6\u003e\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://github.com/mwaqar29/react-text-animate/graphs/contributors\"\u003e\n \u003cimg src=\"https://contrib.rocks/image?repo=mwaqar29/react-text-animate\"\u003e\n \u003c/a\u003e\n\u003c/p\u003e\n\n## šŸ“„ License\n\nThis 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.\n\n## šŸ‘Š Acknowledgments\n\nSome 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.\n\n- [Tom Is Loading, Hover Dev LLC](https://github.com/TomIsLoading)\n- [Manu Arora, Aceternity UI](https://github.com/manuarora700)\n\n[**Return to 'Overview' ā¬†ļø**](#-overview)\n\n\u003cp align=\"center\"\u003e\n Thanks for reading!\u003cbr/\u003e\n \u003cem\u003eLove this project ? Don't forget to\u003c/em\u003e ā­ \u003cem\u003eme!\u003c/em\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/MADE_WITH-%E2%9D%A4-D0021B?style=for-the-badge\u0026labelColor=D22238\" alt=\"Made with ā¤\"\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmwaqar29%2Freact-text-animate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmwaqar29%2Freact-text-animate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmwaqar29%2Freact-text-animate/lists"}