https://gfazioli.github.io/mantine-text-animate/

A Mantine UI Library Extension Text Animation component
https://gfazioli.github.io/mantine-text-animate/

mantine mantine-hooks mantine-ui mantine-v7 number-ticker reactjs reactjs-components text-animation text-effects text-spinner text-ticker typescript typewriter typewriter-animation typewriter-effect typewriterjs

Last synced: 2 months ago
JSON representation

A Mantine UI Library Extension Text Animation component

• Host: GitHub
• URL: https://gfazioli.github.io/mantine-text-animate/
• Owner: gfazioli
• License: mit
• Created: 2025-03-05T17:00:15.000Z (3 months ago)
• Default Branch: master
• Last Pushed: 2025-03-19T07:02:51.000Z (2 months ago)
• Last Synced: 2025-03-19T07:37:54.080Z (2 months ago)
• Topics: mantine, mantine-hooks, mantine-ui, mantine-v7, number-ticker, reactjs, reactjs-components, text-animation, text-effects, text-spinner, text-ticker, typescript, typewriter, typewriter-animation, typewriter-effect, typewriterjs
• Language: TypeScript
• Homepage: https://gfazioli.github.io/mantine-text-animate
• Size: 461 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-mantine - Mantine Text Animate - A Mantine component that allows you to animate text with various effects (Libraries)

README

        
# Mantine TextAnimate Component

  

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

---



  [![NPM version](https://img.shields.io/npm/v/%40gfazioli%2Fmantine-text-animate?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-text-animate)

  [![NPM Downloads](https://img.shields.io/npm/dm/%40gfazioli%2Fmantine-text-animate?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-text-animate)

  [![NPM Downloads](https://img.shields.io/npm/dy/%40gfazioli%2Fmantine-text-animate?style=for-the-badge&label=%20&color=f90)](https://www.npmjs.com/package/@gfazioli/mantine-text-animate)

  ![NPM License](https://img.shields.io/npm/l/%40gfazioli%2Fmantine-text-animate?style=for-the-badge)



## Overview

This component is created on top of the [Mantine](https://mantine.dev/) library.

[![Mantine UI Library](https://img.shields.io/badge/-MANTINE_UI_LIBRARY-blue?style=for-the-badge&labelColor=black&logo=mantine

)](https://mantine.dev/)

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`.

[![Mantine Extensions](https://img.shields.io/badge/-Watch_the_Video-blue?style=for-the-badge&labelColor=black&logo=youtube

)](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4)

[![Demo and Documentation](https://img.shields.io/badge/-Demo_%26_Documentation-blue?style=for-the-badge&labelColor=black&logo=typescript

)](https://gfazioli.github.io/mantine-text-animate/)

[![Mantine Extensions HUB](https://img.shields.io/badge/-Mantine_Extensions_Hub-blue?style=for-the-badge&labelColor=blue

)](https://mantine-extensions.vercel.app/)

👉 You can find more components on the [Mantine Extensions Hub](https://mantine-extensions.vercel.app/) library.

## Installation

```sh

npm install @gfazioli/mantine-text-animate

```

or 

```sh

yarn add @gfazioli/mantine-text-animate

```

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

```tsx

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

```

## Usage

```tsx

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

function Demo() {

  return (

      Mantine TextAnimate component

    

  );

}

```

### TextAnimate.Typewriter

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

```tsx

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

function Demo() {

  return (

    

  );

}

```

#### useTypewriter

```tsx

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

function Demo() {

    const { text, start, stop, reset, isTyping } = useTypewriter({

    value: ['Hello', 'From', 'Mantine useTypewriter() hook'],

  });

  return (

    
{text}

  );

}

```


### TextAnimate.Spinner

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

```tsx

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

function Demo() {

  return (

    ★ SPINNING TEXT EXAMPLE ★

  );

}

```

### TextAnimate.NumberTicker

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

```tsx

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

function Demo() {

  return (

    

  );

}

```

#### useNumberTicker

```tsx

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 (

    
{text}

  );

}

```


### TextAnimate.TextTicker

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

```tsx

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

function Demo() {

  return (

    

  );

}

```

#### useTextTicker

```tsx

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 (

    
{text}

  );

}

```