Ai-fonts NPM | npm.io

AiFont

AiFont is a React component that animates text with a colorful gradient and a white border. You can choose different color themes and animation durations.

Installation

First, install the package via npm:

npm install ai-fonts

Or via yarn

yarn add ai-fonts

Usage

Import the AiFont component and use it in your project:

import React from "react";
import AiFont from "ai-fonts";

const App = () => {
  return (
    <div>
      <AiFont>Rainbow Text</AiFont>
    </div>
  );
};

export default App;

Props

AiFont accepts the following props:

• children: React.ReactNode - The text or components that will be animated. • animationDuration: "short" | "medium" | "long" - Duration of the animation. Default is "medium". • colors: "rainbow" | "blue" | "yellow" - Color theme of the animation. Default is "rainbow". • textShadow: "none" | "default" - Text shadow effect. Default is "default". • fontFamily: string - Font family of the text. Default is "sans-serif".

Example with props

import React from "react";
import AiFont from "ai-fonts";

const App = () => {
  return (
    <div>
      <AiFont
        animationDuration="short"
        colors="blue"
        textShadow="none"
        fontFamily="monospace"
      >
        Blue Text
      </AiFont>

      <AiFont
        animationDuration="long"
        colors="yellow"
        textShadow="default"
        fontFamily="cursive"
      >
        Yellow Text
      </AiFont>

      <AiFont
        animationDuration="medium"
        colors="rainbow"
        textShadow="none"
        fontFamily="fantasy"
      >
        Rainbow Text
      </AiFont>
    </div>
  );
};

export default App;