1.0.2 • Published 3 months ago

react-text-animatio v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months ago

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!

animationreactnextjsclitext-animationstypescript
animejscommander@types/animejs
1.0.2

3 months ago

1.0.1

3 months ago

1.0.0

3 months ago