Mantine TextAnimate Component

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

---

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

1npm install @gfazioli/mantine-text-animate

or

1yarn add @gfazioli/mantine-text-animate

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

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

Usage

1import { TextAnimate } from '@gfazioli/mantine-text-animate';
2
3function Demo() {
4  return (
5<TextAnimate animate="in" animation="slideUp" by="character">
6      Mantine TextAnimate component
7    </TextAnimate>
8  );
9}

TextAnimate.Typewriter

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

1import { TextAnimate } from '@gfazioli/mantine-text-animate';
2
3function Demo() {
4  return (
5    <TextAnimate.Typewriter value="Hello, World! Mantine Typewriter component" animate />
6  );
7}

useTypewriter

1import { useTypewriter } from '@gfazioli/mantine-text-animate'
2
3function Demo() {
4    const { text, start, stop, reset, isTyping } = useTypewriter({
5    value: ['Hello', 'From', 'Mantine useTypewriter() hook'],
6  });
7
8  return (
9    <div>{text}</div>
10  );
11}

TextAnimate.Spinner

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

1import { TextAnimate } from '@gfazioli/mantine-text-animate';
2
3function Demo() {
4  return (
5    <TextAnimate.Spinner>★ SPINNING TEXT EXAMPLE ★</TextAnimate.Spinner>
6  );
7}

TextAnimate.NumberTicker

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

1import { TextAnimate } from '@gfazioli/mantine-text-animate';
2
3function Demo() {
4  return (
5    <TextAnimate.NumberTicker value={100} animate />
6  );
7}

useNumberTicker

1import { useNumberTicker } from '@gfazioli/mantine-text-animate'
2
3function Demo() {
4  const { text, isAnimating, start, stop, reset, displayValue } = useNumberTicker({
5    value: 64,
6    startValue: 0,
7    delay: 0,
8    decimalPlaces: 0,
9    speed: 0.2,
10    easing: 'ease-out',
11    animate: true,
12  });
13
14  return (
15    <div>{text}</div>
16  );
17}

TextAnimate.TextTicker

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

1import { TextAnimate } from '@gfazioli/mantine-text-animate';
2
3function Demo() {
4  return (
5    <TextAnimate.TextTicker value="Hello, World! Mantine TextTicker component" animate />
6  );
7}

useTextTicker

1import { useTextTicker } from '@gfazioli/mantine-text-animate'
2
3function Demo() {
4  const { text, isAnimating, start, stop, reset } = useTextTicker({
5    value: 'Mantine useTextTicker',
6    delay: 0,
7    speed: 0.2,
8    easing: 'ease-out',
9    animate: true,
10  });
11
12  return (
13    <div>{text}</div>
14  );
15}