{"id":24655088,"url":"https://github.com/moncydev/letterfx","last_synced_at":"2025-10-07T16:30:57.839Z","repository":{"id":265277054,"uuid":"895227182","full_name":"MoncyDev/LetterFX","owner":"MoncyDev","description":"LetterFX is a free and lightweight package that enables developers to easily animate each letter within any HTML element, adding dynamic text effects to web pages with minimal effort.","archived":false,"fork":false,"pushed_at":"2024-11-28T17:17:06.000Z","size":9,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-31T00:45:53.055Z","etag":null,"topics":["animation","letter-animation","letters","text-animation","text-effects"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/MoncyDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2024-11-27T19:51:47.000Z","updated_at":"2024-12-09T06:41:14.000Z","dependencies_parsed_at":"2024-11-28T17:41:13.801Z","dependency_job_id":null,"html_url":"https://github.com/MoncyDev/LetterFX","commit_stats":null,"previous_names":["moncydev/letterfx"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoncyDev%2FLetterFX","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoncyDev%2FLetterFX/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoncyDev%2FLetterFX/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoncyDev%2FLetterFX/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MoncyDev","download_url":"https://codeload.github.com/MoncyDev/LetterFX/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235641229,"owners_count":19022638,"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":["animation","letter-animation","letters","text-animation","text-effects"],"created_at":"2025-01-25T22:36:05.517Z","updated_at":"2025-10-07T16:30:57.507Z","avatar_url":"https://github.com/MoncyDev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LetterFX\n\n![npm version](https://img.shields.io/npm/v/letterfx.svg)\n![license](https://img.shields.io/github/license/MoncyDev/LetterFX)\n![downloads](https://img.shields.io/npm/dm/letterfx.svg)\n\n**LetterFX** is a lightweight JavaScript/TypeScript library for creating dynamic, letter by letter animations. With customizable effects, you can animate text with ease, making your content more engaging and interactive. Using **LetterFX** you can add dynamic text effects to web pages with minimal effort.\n\n---\n\n## Features\n\n- Animate text letter by letter.\n- Loop animations with custom timings.\n- Customizable transition effects, easing, and delays.\n- Easy integration with JavaScript or TypeScript.\n\n---\n\n## Installation\n\n### Install from NPM\n\nWe can install LetterFX using npm:\n\n```bash\nnpm install letterfx\n```\n\n```javascript\nimport LetterFX from \"letterfx\";\n```\n\n### Using CDN\n\nYou can directly use LetterFX in your ptoject using a CDN link\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/letterfx/dist/letterfx.min.js\"\u003e\u003c/script\u003e\n```\n\nGit Repository: https://github.com/MoncyDev/LetterFX/\n\n---\n\n## Basic Usage\n\n```javascript\nconst TextAnimation = new LetterFX(container, options); // All LetterFX options are optional\n```\n\nHere’s a basic example of how to use LetterFX:\n\n```javascript\nconst letter = new LetterFX(\".text\", {\n  transition: 500,\n  delay: 30,\n  clip: true,\n  blur: \"20px\",\n  opacity: 0.5,\n  loop: true,\n  interval: 2000,\n  animateIn: \"translateY(100%) rotate(40deg) scale(0)\",\n  animateOut: \"translateX(-100%) scale(0)\",\n});\n```\n\n#### HTML :\n\n```html\n\u003cdiv class=\"text\"\u003eLetterFX Animations\u003c/div\u003e\n```\n\n---\n\n## Options:\n\n| Option       | Type    | Default                                  | Description                                             |\n| ------------ | ------- | ---------------------------------------- | ------------------------------------------------------- |\n| `transition` | Number  | `500`                                    | Duration of each animation (in ms).                     |\n| `delay`      | Number  | `40`                                     | Delay between animating each letter (in ms).            |\n| `clip`       | Boolean | `false`                                  | Adds an overflow clip for each letter during animation. |\n| `easing`     | String  | `\"cubic-bezier(0.09, 1.01, 0.68, 1.16)\"` | CSS easing function for transitions.                    |\n| `animateIn`  | String  | `\"translateY(100%)\"`                     | Transform properties for initial animation.             |\n| `animateOut` | String  | `\"translateY(-100%)\"`                    | Transform properties for exit animation.                |\n| `loop`       | Boolean | `false`                                  | Enables continuous looping of the animation.            |\n| `interval`   | Number  | `4000`                                   | Time interval between loop cycles (in ms).              |\n| `opacity`    | Number  | `0`                                      | Initial opacity of letters during animation.            |\n| `blur`       | String  | `\"0px\"`                                  | Initial blur of letters during animation.               |\n\n---\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoncydev%2Fletterfx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoncydev%2Fletterfx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoncydev%2Fletterfx/lists"}