{"id":18406370,"url":"https://github.com/kipicenko/chaocore-ripple","last_synced_at":"2026-05-05T20:43:43.597Z","repository":{"id":227552139,"uuid":"769583174","full_name":"Kipicenko/chaocore-ripple","owner":"Kipicenko","description":"The very easy, performance and flexible to use JavaScript/TypeScript library for creating a ripple effect.","archived":false,"fork":false,"pushed_at":"2024-03-27T15:39:10.000Z","size":722,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-29T21:47:58.592Z","etag":null,"topics":["animation","chaocore","effect","hooks","javascript","native-js","programming","react","react-hooks","react-ripple","react-wave","ripple","ripple-animation","ripple-effect","tyepscript","wave","wave-animation","wave-effect"],"latest_commit_sha":null,"homepage":"","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/Kipicenko.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-03-09T13:43:52.000Z","updated_at":"2024-06-02T22:51:02.374Z","dependencies_parsed_at":"2024-06-02T22:50:58.762Z","dependency_job_id":"a3e090d3-84f3-487c-870a-750ed68f2854","html_url":"https://github.com/Kipicenko/chaocore-ripple","commit_stats":null,"previous_names":["kipicenko/chaocore-ripple"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kipicenko%2Fchaocore-ripple","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kipicenko%2Fchaocore-ripple/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kipicenko%2Fchaocore-ripple/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kipicenko%2Fchaocore-ripple/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kipicenko","download_url":"https://codeload.github.com/Kipicenko/chaocore-ripple/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248628407,"owners_count":21136075,"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","chaocore","effect","hooks","javascript","native-js","programming","react","react-hooks","react-ripple","react-wave","ripple","ripple-animation","ripple-effect","tyepscript","wave","wave-animation","wave-effect"],"created_at":"2024-11-06T03:08:42.603Z","updated_at":"2026-05-05T20:43:43.486Z","avatar_url":"https://github.com/Kipicenko.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @chaocore/ripple\r\n\r\nThe very easy, performance and flexible to use JavaScript/TypeScript library for creating a ripple effect.\r\n\r\n### Demonstration\r\n\r\n![Demonstration library](https://raw.githubusercontent.com/Kipicenko/chaocore-ripple/assets/demonstration.gif)\r\n\r\n### Installing\r\n\r\nUsing npm:\r\n\r\n```bash\r\nnpm i @chaocore/ripple\r\n```\r\n\r\nUsing yarn:\r\n\r\n```bash\r\nyarn add @chaocore/ripple\r\n```\r\n\r\nUsing pnpm:\r\n\r\n```bash\r\npnpm add @chaocore/ripple\r\n```\r\n\r\nUsing CDN:\r\n\r\n```html\r\n\u003cscript src=\"https://unpkg.com/@chaocore/ripple\"\u003e\u003c/script\u003e\r\n```\r\n\r\nor\r\n\r\n```html\r\n\u003cscript defer src=\"https://unpkg.com/@chaocore/ripple\"\u003e\u003c/script\u003e\r\n```\r\n\r\n### Usage\r\n- - -\r\n\r\n**React**\r\n\r\n```jsx\r\nimport { useRipple } from \"@chaocore/ripple\";\r\n\r\nfunction MyComponent() {\r\n    const ripple = useRipple(options);\r\n\r\n    return \u003cbutton ref={ripple} className=\"btn\"\u003eClick Here\u003c/button\u003e\r\n}\r\n```\r\n\r\n**Native js**\r\n\r\n```js\r\nconst btn = document.querySelector(\".btn\");\r\n\r\nbtn.addEventListener(\"pointerdown\", (event) =\u003e {\r\n    createRippleEffect(event, btn, options) // or window.createRippleEffect\r\n})\r\n```\r\n\r\n### Options\r\n\r\n| Name                 |     Default      | Type      | \r\n|----------------------|:----------------:|-----------|\r\n| color                | `\"currentColor\"` | `string`  |\r\n| easing               |   `\"ease-out\"`   | `string`  |\r\n| duration             |     `400ms`      | `number`  |\r\n| dissolveDuration     |     `300ms`      | `number`  |\r\n| delay                |      `75ms`      | `number`  |\r\n| initialOpacity       |      `0.2`       | `number`  |\r\n| finalOpacity         |      `0.1`       | `number`  |\r\n| considerDisabledAttr |      `true`      | `boolean` |\r\n| turnOff              |     `false`      | `boolean` |\r\n\r\n### Description of options\r\n\r\n| Name                 | Description                                                                                                                                                                                                                                                                                                   | \r\n|----------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\r\n| color                | Defines the color of the ripple.                                                                                                                                                                                                                                                                              |\r\n| easing               | Any valid CSS [transition-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function).                                                                                                                                                                                      |\r\n| duration             | The duration of the ripple in milliseconds.                                                                                                                                                                                                                                                                   |\r\n| dissolveDuration     | The dissolve duration of the ripple in milliseconds.\u003cbr/\u003eStarts after the end of the main duration.                                                                                                                                                                                                           |\r\n| delay                | The animation delay in milliseconds during which the animation maybe canceled if the current pointer action is interrupted for some reason and pointer events are no longer generated.\u003cbr/\u003e[Read about the pointercancel event](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointercancel_event) |\r\n| initialOpacity       | The opacity of the ripple at the beginning of the animation.                                                                                                                                                                                                                                                  |\r\n| finalOpacity         | The opacity of the ripple at the end of the animation.                                                                                                                                                                                                                                                        |\r\n| considerDisabledAttr | Don't display a ripple effect if the element has the disabled attribute.                                                                                                                                                                                                                                      |\r\n| turnOff              | Don't display a ripple effect.                                                                                                                                                                                                                                                                                |\r\n\r\n### License\r\nCopyright © 2024, [Alexey Kipichenko](https://github.com/Kipicenko).\r\nReleased under the [MIT License](LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkipicenko%2Fchaocore-ripple","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkipicenko%2Fchaocore-ripple","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkipicenko%2Fchaocore-ripple/lists"}