TextGenerator | Pol-ui - A beautiful and functional UI library for React and Next.js

The TextGenerator component from pol-ui creates an animated heading that displays a list of words one by one. It is a great way to create a dynamic and engaging heading for your website.

Importation

Import the component from pol-ui to use the TextGenerator element:

import { TextGenerator } from "pol-ui";

Default TextGenerator

import { TextGenerator } from "pol-ui";
export const TextGeneratorExample = (): JSX.Element => (
  <section className="min-h-[400px] w-full bg-black text-white text-4xl text-center font-bold py-20 flex flex-col justify-center">
    <TextGenerator
      text="Pol-ui, powering UI
      "
      delay={0.5}
      speed={1.5}
    />
  </section>
);

Props

Prop name	Type	Default	Description
text	string		The text to be animated.
speed	number	1	The speed of the animation.
delay	number	0.2	The delay between each word.
className	string		The class name to be applied to the text.
theme	TextGeneratorTheme		The theme to be applied to the text.

Examples

Long TextGenerator

Example with long text

import { TextGenerator } from "pol-ui";
const words = `Oxygen gets you high. In a catastrophic emergency, we're taking giant, panicked breaths. Suddenly you become euphoric, docile. You accept your fate. It's all right here. Emergency water landing, six hundred miles an hour. Blank faces, calm as Hindu cows
`;
export const TextGeneratorExample = (): JSX.Element => (
  <section className="min-h-[400px] w-full bg-black text-white text-4xl text-center font-bold py-20 flex flex-col justify-center">
    <TextGenerator text={words} delay={0.5} speed={1.5} />
  </section>
);

Slow TextGenerator

Example with slow text

import { TextGenerator } from "pol-ui";
const words = `Oxygen gets you high. In a catastrophic emergency, we're taking giant, panicked breaths. Suddenly you become euphoric, docile. You accept your fate. It's all right here. Emergency water landing, six hundred miles an hour. Blank faces, calm as Hindu cows
`;
export const TextGeneratorExample = (): JSX.Element => (
  <section className="min-h-[400px] w-full bg-black text-white text-4xl text-center font-bold py-20 flex flex-col justify-center">
    <TextGenerator text={words} delay={0.5} speed={2} />
  </section>
);

Fast TextGenerator

Example with fast text

import { TextGenerator } from "pol-ui";
const words = `Oxygen gets you high. In a catastrophic emergency, we're taking giant, panicked breaths. Suddenly you become euphoric, docile. You accept your fate. It's all right here. Emergency water landing, six hundred miles an hour. Blank faces, calm as Hindu cows
`;
export const TextGeneratorExample = (): JSX.Element => (
  <section className="min-h-[400px] w-full bg-black text-white text-4xl text-center font-bold py-20 flex flex-col justify-center">
    <TextGenerator text={words} delay={0.5} speed={0.1} />
  </section>
);

Custom Delay TextGenerator

Example with fast text

import { TextGenerator } from "pol-ui";
const words = `Oxygen gets you high. In a catastrophic emergency, we're taking giant, panicked breaths. Suddenly you become euphoric, docile. You accept your fate. It's all right here. Emergency water landing, six hundred miles an hour. Blank faces, calm as Hindu cows
`;
export const TextGeneratorExample = (): JSX.Element => (
  <section className="min-h-[400px] w-full bg-black text-white text-4xl text-center font-bold py-20 flex flex-col justify-center">
    <TextGenerator text={words} delay={0.5} speed={0.1} />
  </section>
);

Custom className

Example with custom class

import { TextGenerator } from "pol-ui";
const words = `Oxygen gets you high. In a catastrophic emergency, we're taking giant, panicked breaths. Suddenly you become euphoric, docile. You accept your fate. It's all right here. Emergency water landing, six hundred miles an hour. Blank faces, calm as Hindu cows
`;
export const TextGeneratorExample = (): JSX.Element => (
  <section className="min-h-[400px] w-full bg-black text-white text-4xl text-center font-bold py-20 flex flex-col justify-center">
    <TextGenerator text={words} className={'text-4xl text-error' }/>
  </section>
);

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface TextGeneratorTheme {
  base: string;
  wrapper: string;
}