{"id":15499393,"url":"https://github.com/zendranm/animatedtxt","last_synced_at":"2025-04-22T22:25:53.013Z","repository":{"id":39902917,"uuid":"377523253","full_name":"zendranm/animatedtxt","owner":"zendranm","description":"A React library for creating animated texts and characters.","archived":false,"fork":false,"pushed_at":"2024-02-29T19:13:21.000Z","size":1081,"stargazers_count":11,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-17T13:32:47.886Z","etag":null,"topics":["animated","animation","character","component-library","components","draw","font","hacktoberfest","react","react-components","react-library","text"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/animatedtxt-0s5259","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/zendranm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2021-06-16T14:24:37.000Z","updated_at":"2025-02-04T00:20:26.000Z","dependencies_parsed_at":"2024-11-08T19:03:00.811Z","dependency_job_id":"0f426bfe-f3cf-4e37-8aa8-ba377cefe304","html_url":"https://github.com/zendranm/animatedtxt","commit_stats":{"total_commits":120,"total_committers":2,"mean_commits":60.0,"dds":0.1333333333333333,"last_synced_commit":"cbfed64fbd211d08be304656a6f027745a185a8a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zendranm%2Fanimatedtxt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zendranm%2Fanimatedtxt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zendranm%2Fanimatedtxt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zendranm%2Fanimatedtxt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zendranm","download_url":"https://codeload.github.com/zendranm/animatedtxt/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250333134,"owners_count":21413335,"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":["animated","animation","character","component-library","components","draw","font","hacktoberfest","react","react-components","react-library","text"],"created_at":"2024-10-02T08:52:25.628Z","updated_at":"2025-04-22T22:25:52.991Z","avatar_url":"https://github.com/zendranm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AnimatedTXT\n\nThis [npm package](https://www.npmjs.com/package/animatedtxt) provides components and methods for convenient creation of animated texts and characters.\n\n### Live demo:\n\nhttps://codesandbox.io/s/animatedtxt-0s5259\n\n# Installation\n\n```\nnpm i animatedtxt\n```\n\n# Usage\n\nImporting components:\n\n```js\nimport { Phrase, Char } from 'animatedtxt';\n```\n\nCreating single character:\n\n```js\n\u003cChar char='A' /\u003e\n```\n\nGrouping multiple characters into a phrase\n\n```js\n\u003cPhrase\u003e\n\t\u003cChar char='A' /\u003e\n\t\u003cChar char='B' /\u003e\n\t\u003cChar char='C' /\u003e\n\u003c/Phrase\u003e\n```\n\n# Custom Char\n\nYou can also provide your custom definition of the character for the `\u003cChar\u003e` component:\n\n```js\n// Some custom definition\nconst customH: SvgChar = {\n\tsvgViewBox: { width: 69, height: 81 },\n\telements: [\n\t\t{\n\t\t\telementDelay: 0.0,\n\t\t\tshape:\n\t\t\t\t'M 24 10 C 11 3 38 -4 33 7 C 19 36 19 56 13 65 C 1 89 -4 58 12 52 C 35 42 47 35 58 7 C 60 1 51 -4 52 11 C 53 34 37 49 40 76 C 42 92 47 44 68 58',\n\t\t\tlength: 322.86358642578125,\n\t\t},\n\t],\n\toffsets: {\n\t\tleft: [0, 0, 0, 0, 0],\n\t\tright: [0, 0, 0, 0, 0],\n\t},\n};\n\n// Example of usage\n\u003cChar char={customH} font='basic-thin' size={500} delay={1} /\u003e;\n```\n\n# API\n\n## Char:\n\nBehavior and design of a single character (not embedded into a phrase) can be modified by passing following props:\n\n- char `\u003cstring\u003e` - character to be rendered. Each font has its own limitations for allowed characters.\n- delay? `\u003cnumber\u003e` - number of seconds by which the start of animation will be delayed. Default value: 0.\n- duration? `\u003cnumber\u003e` - duration of the animation in seconds. Default value: 1.\n- color? `\u003cstring\u003e` - definition of the color of the character. Should be in format accepted by CSS standards. Default value: #000000.\n- size? `\u003cnumber\u003e` - size of the character in \"px\" unit. Default value: 100.\n- font? `\u003cstring\u003e` - name of the font. Each font has different design of characters and may have different characters available. Default value: \"basic-bold\".\n- cubicBezier? `\u003c[number, number, number, number]\u003e` - definition of a Cubic Bezier curve used for `animation-timing-function` property. If not provided then `linear` function is used.\n- isReversed? `\u003cboolean\u003e` - flag that determines whether animation should be reversed. If `true`, animation is played backwards thus the character is disappearing. Default value: `false`.\n\nExample:\n\n```js\n\u003cChar\n\tchar='A'\n\tdelay={1.5}\n\tduration={0.8}\n\tcolor='#6600cc'\n\tsize={300}\n\tfont='basic-thin'\n\tcubicBezier={[0.68, 0.04, 0.45, 0.98]}\n/\u003e\n```\n\n## Phrase:\n\nBehavior and design of characters grouped in the phrase can be modified by passing following props:\n\n- margin? `\u003cnumber\u003e` - number of pixel \"px\" units between characters in a phrase. Default value: 0.\n- color? `\u003cstring\u003e` - definition of the color of the characters in a phrase. Should be in format accepted by CSS standards. Default value: #000000. Value is overwritten by the color defined in the character element.\n- size? `\u003cstring\u003e` - size of the characters in \"px\" unit. Default value: 100. Value overwrites size value of all children elements.\n- duration? `\u003cnumber\u003e` - duration of the animation in seconds. Default value: 1. Value is overwritten by the value defined in the character element.\n- delay? `\u003cnumber\u003e` - number of seconds by which the start of the phrase animation will be delayed. When specified, this value is added to the delay of each `Char` component within the `Phrase`. Default value: 0.\n- font? `\u003cstring\u003e` - name of the font. Each font has different design of characters and may have different characters available. Default value: \"basic-bold\". Value overwrites size value of all children elements.\n- cubicBezier? `\u003c[number, number, number, number]\u003e` - definition of a Cubic Bezier curve used for `animation-timing-function` property. If not provided then `linear` function is used. Value is overwritten by the value defined in the character element.\n- isReversed? `\u003cboolean\u003e` - flag that determines whether animation should be reversed. If `true`, animation is played backwards thus the character is disappearing. Default value: `false`. Value overrides children property.\n\nExample:\n\n```js\n\u003cPhrase\n\tcolor='#6600cc'\n\tmargin={50}\n\tsize={200}\n\tduration={1.1}\n\tfont='basic-thin'\n\tcubicBezier={[0.68, 0.04, 0.45, 0.98]}\n\u003e\n\t\u003cChar char='A' /\u003e\n\t\u003cChar char='B' /\u003e\n\t...\n\u003c/Phrase\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzendranm%2Fanimatedtxt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzendranm%2Fanimatedtxt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzendranm%2Fanimatedtxt/lists"}