Mantine Text Animate Component

Overview

This component is created on top of the Mantine library.

The TextAnimate component allows you to animate text with various effects. Additionally, it provides other sub components such as TextAnimate.TextTicker, TextAnimate.Typewriter, TextAnimate.NumberTicker, and TextAnimate.Spinner. You can also use three useful hooks: useTextTicker, useTypewriter, and useNumberTicker.

👉 You can find more components on the Mantine Extensions Hub library.

Installation

npm install @gfazioli/mantine-text-animate

or

yarn add @gfazioli/mantine-text-animate

After installation import package styles at the root of your application:

import '@gfazioli/mantine-text-animate/styles.css';

Usage

import { TextAnimate } from '@gfazioli/mantine-text-animate';

function Demo() {
  return (
<TextAnimate animate="in" animation="slideUp" by="character">
      Mantine TextAnimate component
    </TextAnimate>
  );
}

TextAnimate.Typewriter

https://github.com/user-attachments/assets/a665af0a-7845-4946-99e1-1c5802e16d46

import { TextAnimate } from '@gfazioli/mantine-text-animate';

function Demo() {
  return (
    <TextAnimate.Typewriter value="Hello, World! Mantine Typewriter component" animate />
  );
}

useTypewriter

import { useTypewriter } from '@gfazioli/mantine-text-animate'

function Demo() {
    const { text, start, stop, reset, isTyping } = useTypewriter({
    value: ['Hello', 'From', 'Mantine useTypewriter() hook'],
  });

  return (
    <div>{text}</div>
  );
}

TextAnimate.Spinner

https://github.com/user-attachments/assets/53266b12-86a6-4b4d-8da4-ec9caa22aef4

import { TextAnimate } from '@gfazioli/mantine-text-animate';

function Demo() {
  return (
    <TextAnimate.Spinner>★ SPINNING TEXT EXAMPLE ★</TextAnimate.Spinner>
  );
}

TextAnimate.NumberTicker

https://github.com/user-attachments/assets/31e08c53-0d59-42a5-bc16-98baedda91cd

import { TextAnimate } from '@gfazioli/mantine-text-animate';

function Demo() {
  return (
    <TextAnimate.NumberTicker value={100} animate />
  );
}

useNumberTicker

import { useNumberTicker } from '@gfazioli/mantine-text-animate'

function Demo() {
  const { text, isAnimating, start, stop, reset, displayValue } = useNumberTicker({
    value: 64,
    startValue: 0,
    delay: 0,
    decimalPlaces: 0,
    speed: 0.2,
    easing: 'ease-out',
    animate: true,
  });

  return (
    <div>{text}</div>
  );
}

TextAnimate.TextTicker

https://github.com/user-attachments/assets/eaa647a4-2523-4d33-8aec-b303c447ffbb

import { TextAnimate } from '@gfazioli/mantine-text-animate';

function Demo() {
  return (
    <TextAnimate.TextTicker value="Hello, World! Mantine TextTicker component" animate />
  );
}

useTextTicker

import { useTextTicker } from '@gfazioli/mantine-text-animate'

function Demo() {
  const { text, isAnimating, start, stop, reset } = useTextTicker({
    value: 'Mantine useTextTicker',
    delay: 0,
    speed: 0.2,
    easing: 'ease-out',
    animate: true,
  });

  return (
    <div>{text}</div>
  );
}

https://github.com/user-attachments/assets/8bbeb7ef-9e1f-46ab-a105-cdd1e0040780