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-animatio

v1.0.2

Published

A React js and Next js component package for creating text effects also support cdn for other Framer works. Customize your text animation effortlessly with customizable classNames for styling.

Downloads

12

Readme

Animatio

A React and Next js component package for creating dynamic text effects. Effortlessly customize your text animations with configurable classNames for styling and control.

Installation

To install the package in your Next.js or React project, follow these steps:

1. Install the package

 npm i react-text-animatio@latest

2. Initialize the package

npx animatio init

3. Add an animation

npx animatio add <animation name>
# Example
npx animatio add CaptureText

Components

1. CaptureText

Animates each letter as it appears on the screen with a pop effect.

Usage

npx animatio add CaptureText

Example

import CaptureText from "@/components/animatios/CaptureText";

<CaptureText text={["Hello", "World"]} speed={0.7} className="text-blue-500" />;
  • Props:
    • text (required): Array of strings.
    • speed (optional): Animation speed (default: 0.7).
    • className (optional): Custom CSS class names.

Using Cdn

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Capture Text Animation</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1 class="CaptureText"></h1>

    <script src="https://cdn.jsdelivr.net/gh/ahkamboh/animatio@main/cdns%40latest/capturetext.js"></script>
    <script>
      const animatio = new CaptureText(["Capture", "Animation"], 0.7);
    </script>
  </body>
</html>

2. DanceDualText

Creates a dance-like animation where letters move in from different directions.

Usage

npx animatio add DanceDualText

Example

import DanceDualText from "@/components/animatios/DanceDualText";

<DanceDualText
  text={["Animating", "Text"]}
  speed={0.7}
  direction="top"
  className="text-red-400"
/>;
  • Props:
    • text (required): Array of strings.
    • speed (optional): Animation speed (default: 0.7).
    • direction (optional): Choose between 'top' or 'bottom'.

Using Cdn

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DanceDual Text Animation</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1 class="DanceDualText"></h1>

    <script src="https://cdn.jsdelivr.net/gh/ahkamboh/animatio@main/cdns%40latest/dancedualtext.js"></script>
    <script>
      const animatio = new DanceDualText(
        ["Dance Dual", "Animation"],
        0.7,
        "top"
      );
    </script>
  </body>
</html>

3. DanceText

A dance-like animation where letters come in from the top or bottom.

Usage

npx animatio add DanceText

Example

import DanceText from "@/components/animatios/DanceText";

<DanceText
  text={["Creative", "Animations"]}
  speed={0.5}
  direction="bottom"
  className="text-green-500"
/>;
  • Props:
    • text (required): Array of strings.
    • speed (optional): Animation speed (default: 0.5).
    • direction (optional): 'top' or 'bottom'.

Using Cdn

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dance Text Animation</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1 class="DanceText"></h1>

    <script src="https://cdn.jsdelivr.net/gh/ahkamboh/animatio@main/cdns%40latest/dancetext.js"></script>
    <script>
      const animatio = new DanceText(
        ["Dance Text", "Animation"],
        0.5,
        "bottom"
      );
    </script>
  </body>
</html>

4. FlowingText

Creates a smooth flow-in animation for each letter.

Usage

npx animatio add FlowingText

Example

import FlowingText from "@/components/animatios/FlowingText";

<FlowingText
  text={["Smooth", "Flow"]}
  speed={0.7}
  className="text-purple-600"
/>;
  • Props:
    • text (required): Array of strings.
    • speed (optional): Animation speed (default: 0.7).
    • className (optional): Custom styles.

Using Cdn

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flowing Text Animation</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1 class="FlowingText"></h1>

    <script src="https://cdn.jsdelivr.net/gh/ahkamboh/animatio@main/cdns%40latest/flowingtext.js"></script>
    <script>
      const animatio = new FlowingText(["Flowing Text", "Animation"], 0.8);
    </script>
  </body>
</html>

5. GlideText

Letters glide in from the selected direction: top, bottom, left, right, vertical, or horizontal.

Usage

npx animatio add GlideText

Example

import GlideText from "@/components/animatios/GlideText";

<GlideText
  text={["Gliding", "Effect"]}
  speed={1}
  direction="right"
  className="text-blue-800"
/>;
  • Props:
    • text (required): Array of strings.
    • speed (optional): Animation speed (default: 1).
    • direction (optional): 'top', 'bottom', 'left', 'right', 'horizontal', 'vertical'.

Using Cdn

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Glide Text Animation</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1 class="GlideText"></h1>

    <script src="https://cdn.jsdelivr.net/gh/ahkamboh/animatio@main/cdns%40latest/glide_text.js"></script>
    <script>
      const animatio = new GlideText(["Glide", "Animation"], 1, "top");
    </script>
  </body>
</html>

6. LetterPopText

Each letter pops in with scaling and fading effects.

Usage

npx animatio add LetterPopText

Example

import LetterPopText from "@/components/animatios/LetterPopText";

<LetterPopText
  text={["Pop", "Effect"]}
  speed={1}
  className="text-yellow-500"
/>;
  • Props:
    • text (required): Array of strings.
    • speed (optional): Animation speed (default: 1).
    • className (optional): Custom CSS class names.

Using Cdn

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Letter Pop Text Animation</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1 class="LetterPopText"></h1>

    <script src="https://cdn.jsdelivr.net/gh/ahkamboh/animatio@main/cdns%40latest/letterpoptext.js"></script>
    <script>
      const animatio = new LetterPopText(["Letter Pop", "Animation"], 0.8);
    </script>
  </body>
</html>

7. SurgeText

Creates a surge effect where letters rotate in and move from different angles.

Usage

npx animatio add SurgeText

Example

import SurgeText from "@/components/animatios/SurgeText";

<SurgeText text={["Surge", "In"]} speed={0.8} className="text-indigo-600" />;
  • Props:
    • text (required): Array of strings.
    • speed (optional): Animation speed (default: 0.8).
    • className (optional): Custom CSS styles.

Using Cdn

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Surge Text Animation</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1 class="SurgeText"></h1>

    <script src="https://cdn.jsdelivr.net/gh/ahkamboh/animatio@main/cdns%40latest/surgetext.js"></script>
    <script>
      const animatio = new SurgeText(["Surge", "Animation"], 0.8);
    </script>
  </body>
</html>

8. SwapText

A text swapping effect where letters animate by sliding in.

Usage

npx animatio add SwapText

Example

import SwapText from "@/components/animatios/SwapText";

<SwapText text={["Swap", "Text"]} speed={1} className="text-pink-600" />;
  • Props:
    • text (required): Array of strings.
    • speed (optional): Animation speed (default: 1).
    • className (optional): Custom CSS classes.

Using Cdn

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Swap Text Animation</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1 class="SwapText"></h1>

    <script src="https://cdn.jsdelivr.net/gh/ahkamboh/animatio@main/cdns%40latest/swap_text.js"></script>
    <script>
      const animatio = new SwapText(["Swap", "Animation"], 1);
    </script>
  </body>
</html>

9. SwingText

Creates a swinging animation for each letter.

Usage

npx animatio add SwingText

Example

import SwingText from "@/components/animatios/SwingText";

<SwingText text={["Swing", "Text"]} speed={1} className="text-teal-400" />;
  • Props:
    • text (required): Array of strings.
    • speed (optional): Animation speed (default: 1).
    • className (optional): Custom styles.

Using Cdn

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Swing Text Animation</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1 class="SwingText"></h1>

    <script src="https://cdn.jsdelivr.net/gh/ahkamboh/animatio@main/cdns%40latest/swingtext.js"></script>
    <script>
      const animatio = new SwingText(["Swap", "Animation"], 1);
    </script>
  </body>
</html>

10. TwinkleText

Letters twinkle in with a rotating or sliding effect.

Usage

npx animatio add TwinkleText

Example

import TwinkleText from "@/components/animatios/TwinkleText";

<TwinkleText
  text={["Twinkle", "Effect"]}
  speed={0.4}
  direction="left"
  className="text-orange-500"
/>;
  • Props:
    • text (required): Array of strings.
    • speed (optional): Animation speed (default: 0.4).
    • direction (optional): 'left' or 'right'.
    • className (optional): Custom styles.

Using Cdn

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Twinkle Text Animation</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1 class="TwinkleText"></h1>

    <script src="https://cdn.jsdelivr.net/gh/ahkamboh/animatio@main/cdns%40latest/twinkletext.js"></script>
    <script>
      const animatio = new TwinkleText(["Twinkle", "Animation"], 0.4, "left");
    </script>
  </body>
</html>

11. WordPopText

Pops in each word with a scaling effect.

Usage

npx animatio add WordPopText

Example

import WordPopText from "@/components/animatios/WordPopText";

<WordPopText text={["Popping", "Words"]} speed={1} className="text-gray-600" />;
  • Props:
    • text (required): Array of strings.
    • speed (optional): Animation speed (default: 1).
    • className (optional): Custom styles.

Using Cdn

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Word Pop Text Animation</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1 class="WordPopText"></h1>

    <script src="https://cdn.jsdelivr.net/gh/ahkamboh/animatio@main/cdns%40latest/wordpop_text.js"></script>
    <script>
      const animatio = new WordPopText(["Word Pop", "Animation"], 0.8);
    </script>
  </body>
</html>

12. SlitText

SlitText in each word .

Usage

npx animatio add SlitText

Example

import SlitText from "@/components/animatios/SlitText";

<SlitText text={["Slit", "Words"]} speed={0.7} className="text-gray-600" />;
  • Props:
    • text (required): Array of strings.
    • speed (optional): Animation speed (default: 0.7).
    • className (optional): Custom styles.

Using Cdn

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Slit Text Animation</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1 class="SlitText"></h1>

    <script src="https://cdn.jsdelivr.net/gh/ahkamboh/animatio@main/cdns%40latest/slit_text.js"></script>
    <script>
      const animatio = new SlitText(["Slit Text", "Animation"], 0.7);
    </script>
  </body>
</html>

Customization

Each component accepts the className prop to allow for custom styling. This makes it easy to integrate Animatio into any design system.

License

This package is licensed under the MIT License. Feel free to use and modify it in your projects.


Enjoy creating stunning animations with Animatio!

  • Connect on LinkedIn: https://www.linkedin.com/in/ahkamboh/