{"id":26655598,"url":"https://github.com/gfazioli/mantine-text-animate","last_synced_at":"2026-01-05T16:14:40.476Z","repository":{"id":283233663,"uuid":"943410410","full_name":"gfazioli/mantine-text-animate","owner":"gfazioli","description":"A Mantine UI Library Extension Text Animation component","archived":false,"fork":false,"pushed_at":"2025-03-19T07:02:51.000Z","size":472,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-19T07:37:54.080Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://gfazioli.github.io/mantine-text-animate","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gfazioli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["gfazioli","wpbones"]}},"created_at":"2025-03-05T17:00:15.000Z","updated_at":"2025-03-19T07:02:55.000Z","dependencies_parsed_at":"2025-03-19T07:48:15.015Z","dependency_job_id":null,"html_url":"https://github.com/gfazioli/mantine-text-animate","commit_stats":null,"previous_names":["gfazioli/mantine-text-animate"],"tags_count":1,"template":true,"template_full_name":"gfazioli/mantine-flip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-text-animate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-text-animate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-text-animate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-text-animate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gfazioli","download_url":"https://codeload.github.com/gfazioli/mantine-text-animate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245104519,"owners_count":20561379,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-03-25T06:36:26.880Z","updated_at":"2026-01-05T16:14:40.464Z","avatar_url":"https://github.com/gfazioli.png","language":"TypeScript","funding_links":["https://github.com/sponsors/gfazioli","https://github.com/sponsors/wpbones","https://github.com/sponsors/gfazioli?o=esc"],"categories":[],"sub_categories":[],"readme":"# Mantine Text Animate Component\n\n\u003cimg width=\"2752\" height=\"1536\" alt=\"Mantine Text Animate\" src=\"https://github.com/user-attachments/assets/5577a5d9-8d7f-402b-93fb-21592c19ce35\" /\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  [![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)\n  [![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)\n  [![NPM Downloads](https://img.shields.io/npm/dy/%40gfazioli%2Fmantine-text-animate?style=for-the-badge\u0026label=%20\u0026color=f90)](https://www.npmjs.com/package/@gfazioli/mantine-text-animate)\n  ![NPM License](https://img.shields.io/npm/l/%40gfazioli%2Fmantine-text-animate?style=for-the-badge)\n\n---\n\n[\u003ckbd\u003e \u003cbr/\u003e ❤️ If this component has been useful to you or your team, please consider becoming a sponsor \u003cbr/\u003e \u003c/kbd\u003e](https://github.com/sponsors/gfazioli?o=esc)  \n\n\u003c/div\u003e\n\n## Overview\n\nThis component is created on top of the [Mantine](https://mantine.dev/) library.\n\n[Mantine TextAnimate](https://gfazioli.github.io/mantine-text-animate/) is a comprehensive animation toolkit for text in React, designed to integrate seamlessly with Mantine UI. At its core, the TextAnimate component lets you choose entry/exit/static states and apply animations such as slide, scale, and blur, while controlling granularity with the by prop (character, word, line) and timing through duration, delay, and segmentDelay. Fine‑tuning is enabled via animateProps—translateDistance, scaleAmount, and blurAmount—so you can tailor motion intensity per effect. Event handlers like onAnimationStart and onAnimationEnd make it straightforward to react to animation lifecycles.\n\nBeyond basic text transitions, the package offers higher‑level primitives for common patterns: TextAnimate.Typewriter and the useTypewriter hook provide cursor and blink options, speed/delay controls, loop behavior, multiline rendering, and hooks to start/stop/reset typing, plus onTypeEnd and onTypeLoop callbacks. \n\nFor data presentations, useNumberTicker animates numeric values with speed, easing, and completion callbacks, while useTextTicker reveals target strings from random characters with configurable character sets, reveal direction, and lifecycle control. Styling is fully compatible with Mantine props, and global styles can be imported directly or within a CSS layer, making the system flexible for documentation sites, dashboards, and rich UI interactions.\n\n\u003e [!note]\n\u003e\n\u003e → [Demo and Documentation](https://gfazioli.github.io/mantine-text-animate/) → [Youtube Video](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4) → [More Mantine Components](https://mantine-extensions.vercel.app/)\n\n## Installation\n\n```sh\nnpm install @gfazioli/mantine-text-animate\n```\nor \n\n```sh\nyarn add @gfazioli/mantine-text-animate\n```\n\nAfter installation import package styles at the root of your application:\n\n```tsx\nimport '@gfazioli/mantine-text-animate/styles.css';\n```\n\n## Usage\n\n```tsx\nimport { TextAnimate } from '@gfazioli/mantine-text-animate';\n\nfunction Demo() {\n  return (\n\u003cTextAnimate animate=\"in\" animation=\"slideUp\" by=\"character\"\u003e\n      Mantine TextAnimate component\n    \u003c/TextAnimate\u003e\n  );\n}\n```\n\n### TextAnimate.Typewriter\n\nhttps://github.com/user-attachments/assets/a665af0a-7845-4946-99e1-1c5802e16d46\n\n\n```tsx\nimport { TextAnimate } from '@gfazioli/mantine-text-animate';\n\nfunction Demo() {\n  return (\n    \u003cTextAnimate.Typewriter value=\"Hello, World! Mantine Typewriter component\" animate /\u003e\n  );\n}\n```\n\n#### useTypewriter\n\n```tsx\nimport { useTypewriter } from '@gfazioli/mantine-text-animate'\n\nfunction Demo() {\n    const { text, start, stop, reset, isTyping } = useTypewriter({\n    value: ['Hello', 'From', 'Mantine useTypewriter() hook'],\n  });\n\n  return (\n    \u003cdiv\u003e{text}\u003c/div\u003e\n  );\n}\n```\n\n### TextAnimate.Spinner\n\nhttps://github.com/user-attachments/assets/53266b12-86a6-4b4d-8da4-ec9caa22aef4\n\n\n```tsx\nimport { TextAnimate } from '@gfazioli/mantine-text-animate';\n\nfunction Demo() {\n  return (\n    \u003cTextAnimate.Spinner\u003e★ SPINNING TEXT EXAMPLE ★\u003c/TextAnimate.Spinner\u003e\n  );\n}\n```\n\n### TextAnimate.NumberTicker\n\n\nhttps://github.com/user-attachments/assets/31e08c53-0d59-42a5-bc16-98baedda91cd\n\n\n\n```tsx\nimport { TextAnimate } from '@gfazioli/mantine-text-animate';\n\nfunction Demo() {\n  return (\n    \u003cTextAnimate.NumberTicker value={100} animate /\u003e\n  );\n}\n```\n\n#### useNumberTicker\n\n```tsx\nimport { useNumberTicker } from '@gfazioli/mantine-text-animate'\n\nfunction Demo() {\n  const { text, isAnimating, start, stop, reset, displayValue } = useNumberTicker({\n    value: 64,\n    startValue: 0,\n    delay: 0,\n    decimalPlaces: 0,\n    speed: 0.2,\n    easing: 'ease-out',\n    animate: true,\n  });\n\n  return (\n    \u003cdiv\u003e{text}\u003c/div\u003e\n  );\n}\n```\n\n### TextAnimate.TextTicker\n\n\nhttps://github.com/user-attachments/assets/eaa647a4-2523-4d33-8aec-b303c447ffbb\n\n\n\n```tsx\nimport { TextAnimate } from '@gfazioli/mantine-text-animate';\n\nfunction Demo() {\n  return (\n    \u003cTextAnimate.TextTicker value=\"Hello, World! Mantine TextTicker component\" animate /\u003e\n  );\n}\n```\n\n#### useTextTicker\n\n```tsx\nimport { useTextTicker } from '@gfazioli/mantine-text-animate'\n\nfunction Demo() {\n  const { text, isAnimating, start, stop, reset } = useTextTicker({\n    value: 'Mantine useTextTicker',\n    delay: 0,\n    speed: 0.2,\n    easing: 'ease-out',\n    animate: true,\n  });\n\n  return (\n    \u003cdiv\u003e{text}\u003c/div\u003e\n  );\n}\n```\n## Sponsor\n\n\u003cdiv align=\"center\"\u003e\n\n[\u003ckbd\u003e \u003cbr/\u003e ❤️ If this component has been useful to you or your team, please consider becoming a sponsor \u003cbr/\u003e \u003c/kbd\u003e](https://github.com/sponsors/gfazioli?o=esc)\n\n\u003c/div\u003e\n\nYour support helps me:\n\n- Keep the project actively maintained with timely bug fixes and security updates\u2029\t\n- Add new features, improve performance, and refine the developer experience\u2029\t\n- Expand test coverage and documentation for smoother adoption\u2029\t\n- Ensure long‑term sustainability without relying on ad hoc free time\u2029\t\n- Prioritize community requests and roadmap items that matter most\n\nOpen source thrives when those who benefit can give back—even a small monthly contribution makes a real difference. Sponsorships help cover maintenance time, infrastructure, and the countless invisible tasks that keep a project healthy.\n\nYour help truly matters.\n\n💚 [Become a sponsor](https://github.com/sponsors/gfazioli?o=esc) today and help me keep this project reliable, up‑to‑date, and growing for everyone.\n\n---\nhttps://github.com/user-attachments/assets/8bbeb7ef-9e1f-46ab-a105-cdd1e0040780\n\n---  \n[![Star History Chart](https://api.star-history.com/svg?repos=gfazioli/mantine-text-animate\u0026type=Timeline)](https://www.star-history.com/#gfazioli/mantine-text-animate\u0026Timeline)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgfazioli%2Fmantine-text-animate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgfazioli%2Fmantine-text-animate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgfazioli%2Fmantine-text-animate/lists"}