{"id":26588055,"url":"https://gfazioli.github.io/mantine-text-animate/","last_synced_at":"2025-03-23T13:02:26.707Z","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-23T13:01:19.338Z","updated_at":"2025-03-23T13:02:26.607Z","avatar_url":"https://github.com/gfazioli.png","language":"TypeScript","funding_links":["https://github.com/sponsors/gfazioli","https://github.com/sponsors/wpbones"],"categories":["Libraries"],"sub_categories":[],"readme":"# Mantine TextAnimate Component\n\n  \nhttps://github.com/user-attachments/assets/8bbeb7ef-9e1f-46ab-a105-cdd1e0040780\n\n\n---\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\u003c/div\u003e\n\n## Overview\n\nThis component is created on top of the [Mantine](https://mantine.dev/) library.\n\n[![Mantine UI Library](https://img.shields.io/badge/-MANTINE_UI_LIBRARY-blue?style=for-the-badge\u0026labelColor=black\u0026logo=mantine\n)](https://mantine.dev/)\n\nThe `TextAnimate` component allows you to animate text with various effects.\nAdditionally, it provides other sub components such as `TextAnimate.TextTicker`, `TextAnimate.Typewriter`, `TextAnimate.NumberTicker`, and `TextAnimate.Spinner`.\nYou can also use three useful hooks: `useTextTicker`, `useTypewriter`, and `useNumberTicker`.\n\n[![Mantine Extensions](https://img.shields.io/badge/-Watch_the_Video-blue?style=for-the-badge\u0026labelColor=black\u0026logo=youtube\n)](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4)\n[![Demo and Documentation](https://img.shields.io/badge/-Demo_%26_Documentation-blue?style=for-the-badge\u0026labelColor=black\u0026logo=typescript\n)](https://gfazioli.github.io/mantine-text-animate/)\n[![Mantine Extensions HUB](https://img.shields.io/badge/-Mantine_Extensions_Hub-blue?style=for-the-badge\u0026labelColor=blue\n)](https://mantine-extensions.vercel.app/)\n\n👉 You can find more components on the [Mantine Extensions Hub](https://mantine-extensions.vercel.app/) library.\n\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/gfazioli.github.io%2Fmantine-text-animate%2F","html_url":"https://awesome.ecosyste.ms/projects/gfazioli.github.io%2Fmantine-text-animate%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/gfazioli.github.io%2Fmantine-text-animate%2F/lists"}