{"id":19247277,"url":"https://github.com/murtuzaalisurti/wavy","last_synced_at":"2025-04-21T11:33:24.945Z","repository":{"id":53852880,"uuid":"454389928","full_name":"murtuzaalisurti/wavy","owner":"murtuzaalisurti","description":"A javascript library to generate animated wavy text!","archived":false,"fork":false,"pushed_at":"2022-08-28T07:05:43.000Z","size":27,"stargazers_count":15,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"package","last_synced_at":"2024-10-30T14:19:50.881Z","etag":null,"topics":["animation","hacktoberfest","hacktoberfest2023","javascript","javascript-library","text-animation"],"latest_commit_sha":null,"homepage":"https://murtuzaalisurti.github.io/wavy/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/murtuzaalisurti.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-01T13:03:40.000Z","updated_at":"2024-04-09T05:08:06.000Z","dependencies_parsed_at":"2022-08-31T18:32:30.148Z","dependency_job_id":null,"html_url":"https://github.com/murtuzaalisurti/wavy","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/murtuzaalisurti%2Fwavy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/murtuzaalisurti%2Fwavy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/murtuzaalisurti%2Fwavy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/murtuzaalisurti%2Fwavy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/murtuzaalisurti","download_url":"https://codeload.github.com/murtuzaalisurti/wavy/tar.gz/refs/heads/package","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223861863,"owners_count":17215988,"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","hacktoberfest","hacktoberfest2023","javascript","javascript-library","text-animation"],"created_at":"2024-11-09T17:37:00.423Z","updated_at":"2024-11-09T17:37:00.892Z","avatar_url":"https://github.com/murtuzaalisurti.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Wavy Text Animation Library\n\nA JavaScript Library which allows you to animate infinite words in an infinite loop in a modern wavy way!\n\n[![download badge](https://badgen.net/npm/dt/@murtuzaalisurti/wavy/?color=blue\u0026icon=npm\u0026labelColor=black\u0026scale=1.1)](https://www.npmjs.com/package/@murtuzaalisurti/wavy)\n[![github release](https://badgen.net/github/release/murtuzaalisurti/wavy/?labelColor=black\u0026color=green\u0026scale=1.1\u0026icon=github)](https://github.com/murtuzaalisurti/wavy/releases)\n[![Featured on Openbase](https://badges.openbase.com/js/featured/@murtuzaalisurti/wavy.svg?token=1kjnfJTvqtnXHprCgwkJyjFVymPGFCcbEXlIltpZktE=)](https://openbase.com/js/@murtuzaalisurti/wavy?utm_source=embedded\u0026amp;utm_medium=badge\u0026amp;utm_campaign=rate-badge)\n\n![image](https://i.imgur.com/SLcvTrS.gif)\n\n## Options\n\n- [JS library for Browser](#for-browsers---usage)\n- [NPM package](#npm-package---usage)\n\n---\n\n## NPM package - Usage\n\n### - Install the package\n\n```bash\nnpm i @murtuzaalisurti/wavy\n```\n\n### - Import the package\n\n```js\nconst { wavy } = require('@murtuzaalisurti/wavy');\n```\n\nOR\n\n```js\nimport { wavy } from '@murtuzaalisurti/wavy';\n```\n\n### - Invoke the function\n\n- Invoke the below function with the required arguments as shown below in your javascript file! Let's understand **these arguments** which are passed to the function!\n\n```js\n\nwavy(\n    html_element, // example : document.querySelector('.text')\n    {\n        words: [\"word-1\", \"word-2\", \"word-n\"]\n    }, \n    {\n        color: 'font-color', // hsl, rgb, hex, rgba, css standard values\n        fontSize: 'font-size', // any valid unit\n        fontFamily: 'font-family', // any valid font family \n        transform: 'scale(x)' // example : scale(1.5)\n    }\n);\n\n```\n\n- The **first argument** you should pass is an html element in which you want to place the words! It's like a wrapper element!\n\n- Example for first argument:\n\n```js\n\nwavy(document.querySelector(\".text\"), second_argument, third_argument);\n\n```\n\n- The **second argument** you should pass is an object with a property of `words` set to a value of an `array` containing as many words as you want to display. There is no word limit. These words will be animated in an infinite loop!\n\n- Example for second argument:\n\n```js\n\nwavy(document.querySelector(\".text\"), {words: [\"Wavy\", \"Text\", \"Animation\", \"Library\", \"JavaScript\"]}, third_argument);\n\n```\n\n- The **third argument** you should pass is an object with some options to set the color, fontSize, fontFamily and scale properties of the `text`. Here are all the properties that you can modify:\n\n```js\n//these are default values\n\n{\n    color: 'black', // you can also use rgb, hsl, rgba, hex\n    fontSize: '1rem',\n    fontFamily: 'sans-serif',\n    transform: scale(1.5)\n}\n\n```\n\n- Example for third argument:\n\n```js\n\nwavy(\n    document.querySelector(\".text\"), \n    {\n        words: [\"Wavy\", \"Text\", \"Animation\", \"Library\", \"JavaScript\"]\n    },\n    {\n        color: 'green', \n        fontSize: '2rem', \n        fontFamily: 'Poppins, sans-serif', \n        transform: 'scale(1.8)'\n    }\n);\n\n```\n\n\u003e *NOTE: The first two arguments are mandatory!\n\n---\n\n## For Browsers - Usage\n\n\u003e For `npm package`, please follow the instructions mentioned [here](#npm-package---usage).\n\n### - Fetch the library from CDN\n\nIn order to use it, insert the following `\u003cscript\u003e` tag in the `\u003chead\u003e` tag of your HTML document.\n\n```html\n\n\u003c!-- jsDelivr --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@murtuzaalisurti/wavy/production.min.js\"\u003e\u003c/script\u003e\n\n```\n\n\u003e NOTE :- In order to fetch the latest version of the library, perform a hard reload (CTRL + SHIFT + R) in your browser to bypass the file stored in disk cache. If you don't do this, your browser will load an older version of the library from disk cache!\n\nOR\n\n```html\n\n\u003c!-- UNPKG --\u003e\n\u003cscript src=\"https://unpkg.com/@murtuzaalisurti/wavy@latest/production.min.js\"\u003e\u003c/script\u003e\n\n```\n\n---\n\n### - Invoke function\n\n- Invoke the below function with the required arguments as shown below in your javascript file! Let's understand **these arguments** which are passed to the function!\n\n```js\n\nwavy(\n    html_element, // example : document.querySelector('.text')\n    {\n        words: [\"word-1\", \"word-2\", \"word-n\"]\n    }, \n    {\n        color: 'font-color', // hsl, rgb, hex, rgba, css standard values\n        fontSize: 'font-size', // any valid unit\n        fontFamily: 'font-family', // any valid font family \n        transform: 'scale(x)' // example : scale(1.5)\n    }\n);\n\n```\n\n- The **first argument** you should pass is an html element in which you want to place the words! It's like a wrapper element!\n\n- Example for first argument:\n\n```js\n\nwavy(document.querySelector(\".text\"), second_argument, third_argument);\n\n```\n\n- The **second argument** you should pass is an object with a property of `words` set to a value of an `array` containing as many words as you want to display. There is no word limit. These words will be animated in an infinite loop!\n\n- Example for second argument:\n\n```js\n\nwavy(document.querySelector(\".text\"), {words: [\"Wavy\", \"Text\", \"Animation\", \"Library\", \"JavaScript\"]}, third_argument);\n\n```\n\n- The **third argument** you should pass is an object with some options to set the color, fontSize, fontFamily and scale properties of the `text`. Here are all the properties that you can modify:\n\n```js\n//these are default values\n\n{\n    color: 'black', // you can also use rgb, hsl, rgba, hex\n    fontSize: '1rem',\n    fontFamily: 'sans-serif',\n    transform: scale(1.5)\n}\n\n```\n\n- Example for third argument:\n\n```js\n\nwavy(\n    document.querySelector(\".text\"), \n    {\n        words: [\"Wavy\", \"Text\", \"Animation\", \"Library\", \"JavaScript\"]\n    },\n    {\n        color: 'green', \n        fontSize: '2rem', \n        fontFamily: 'Poppins, sans-serif', \n        transform: 'scale(1.8)'\n    }\n);\n\n```\n\n\u003e **NOTE: The first two arguments are mandatory!**\n\n---\n\n### Demo\n\n\u003e Try it on [CodePen](https://codepen.io/seekertruth/pen/ExmGJjE)!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmurtuzaalisurti%2Fwavy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmurtuzaalisurti%2Fwavy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmurtuzaalisurti%2Fwavy/lists"}