{"id":13547445,"url":"https://github.com/dreambo8563/vue-particle-effect-buttons","last_synced_at":"2025-05-15T23:08:20.515Z","repository":{"id":37692644,"uuid":"183141405","full_name":"dreambo8563/vue-particle-effect-buttons","owner":"dreambo8563","description":"A bursting particles effects buttons component ✨💥❄️🌋","archived":false,"fork":false,"pushed_at":"2024-10-22T04:42:39.000Z","size":5797,"stargazers_count":264,"open_issues_count":38,"forks_count":23,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-12T06:28:48.454Z","etag":null,"topics":["animations","anime","buttons","particles","vue"],"latest_commit_sha":null,"homepage":"https://dreambo8563.github.io/vue-particle-effect-buttons/","language":"HTML","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/dreambo8563.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-04-24T03:33:59.000Z","updated_at":"2025-04-23T12:52:57.000Z","dependencies_parsed_at":"2024-10-30T11:01:31.806Z","dependency_job_id":"78da47f2-76ff-4046-800d-488b1fd89e8d","html_url":"https://github.com/dreambo8563/vue-particle-effect-buttons","commit_stats":{"total_commits":55,"total_committers":6,"mean_commits":9.166666666666666,"dds":0.2545454545454545,"last_synced_commit":"71e023384a6dc3a9601acf1eaeb0e36f7c722453"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Fvue-particle-effect-buttons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Fvue-particle-effect-buttons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Fvue-particle-effect-buttons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Fvue-particle-effect-buttons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dreambo8563","download_url":"https://codeload.github.com/dreambo8563/vue-particle-effect-buttons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254436949,"owners_count":22070947,"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":["animations","anime","buttons","particles","vue"],"created_at":"2024-08-01T12:00:55.815Z","updated_at":"2025-05-15T23:08:14.913Z","avatar_url":"https://github.com/dreambo8563.png","language":"HTML","funding_links":[],"categories":["🚀 A series of exquisite and compact web page cool effects","HTML","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Button Effect","UI Components","Miscellaneous"],"readme":"# vue-particle-effect-buttons ([demo](https://dreambo8563.github.io/vue-particle-effect-buttons/))\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/9b0f0d5882e1417e8cb42b7e507bff05)](https://app.codacy.com/app/dreambo8563/vue-particle-effect-buttons?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=dreambo8563/vue-particle-effect-buttons\u0026utm_campaign=Badge_Grade_Dashboard)\n[![Greenkeeper badge](https://badges.greenkeeper.io/dreambo8563/vue-particle-effect-buttons.svg)](https://greenkeeper.io/)\n[![Build Status](https://travis-ci.org/dreambo8563/vue-particle-effect-buttons.svg?branch=master)](https://travis-ci.org/dreambo8563/vue-particle-effect-buttons)\n[![Known Vulnerabilities](https://snyk.io/test/github/dreambo8563/vue-particle-effect-buttons/badge.svg?targetFile=package.json)](https://snyk.io/test/github/dreambo8563/vue-particle-effect-buttons?targetFile=package.json)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n![npm](https://img.shields.io/npm/dt/vue-particle-effect-buttons.svg?style=flat)\n\n\u003e Bursting particle effect buttons for Vue.\n\nThis library is a Vue portal of an awesome [Codrops Article](https://tympanus.net/codrops/2018/04/25/particle-effects-for-buttons/) by [Luis Manuel](https://tympanus.net/codrops/author/luis/) (original [source](https://github.com/codrops/ParticleEffectsButtons/)).\n\n## Install\n\n```bash\nnpm install --save animejs vue-particle-effect-buttons\n```\n\n## Usage\n\nCheck out the [Demo](https://dreambo8563.github.io/vue-particle-effect-buttons/) to see it in action.\n\n```js\n\u003ctemplate\u003e\n    \u003cParticleBtn\n      :visible.sync=\"btnOps.visible\"\n      :animating.sync=\"btnOps.animating\"\n      :options=\"btnOps\"\n      cls=\"btn-cls\"\n    \u003e\n    hello eveybody!\n    \u003c/ParticleBtn\u003e\n    \u003ch2\u003eanimating:{{btnOps.animating}}\u003c/h2\u003e\n    \u003ch2\u003evisible:{{btnOps.visible}}\u003c/h2\u003e\n    \u003cbutton @click=\"btnOps.visible=!btnOps.visible\"\u003etoggle\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport ParticleEffectButton from \"vue-particle-effect-buttons\"\n\nexport default {\n  data() {\n    return {\n      btnOps: {\n        type: \"triangle\",\n        easing: \"easeOutQuart\",\n        size: 6,\n        particlesAmountCoefficient: 4,\n        oscillationCoefficient: 2,\n        color: function () {\n          return Math.random() \u003c 0.5 ? \"#000000\" : \"#ffffff\";\n        },\n        onComplete: () =\u003e {\n          console.log(\"complete\");\n        },\n        onBegin: () =\u003e {\n          console.log(\"begin\");\n        },\n        visible: true,\n        animating: false\n      },\n    }\n  },\n  components: {\n    ParticleEffectButton\n  }\n};\n\u003c/script\u003e\n```\n\nNote that `children` can be anything, The `children` should represent the button's contents.\n\nYou change the `visible` boolean prop to kick-off an animation, typically as a result of a click on the button's contents. If `visible` changes to `false`, the button will perform a disintegrating animation. If `visible` changes to `true`, it will reverse and reintegrate the original content.\n\n## Props\n\n| Property                     | Type                | Default          | Description                                                                                                |\n| :--------------------------- | :------------------ | :--------------- | :--------------------------------------------------------------------------------------------------------- |\n| `visible`                    | boolean             | true             | Whether button should be hidden or visible. Changing this prop starts an animation. support .sync modifier |\n| `animating`                  | boolean             | false            | Get the current status of animating or end of the animation. support .sync modifier                        |  |\n| `cls`                        | string/Object/Arrar | noop             | The class to change the default button styles                                                              |\n| `duration`                   | number              | 1000             | Animation duration in milliseconds.                                                                        |\n| `easing`                     | string              | 'easeInOutCubic' | Animation easing.                                                                                          |\n| `type`                       | string              | circle           | 'circle' or 'rectangle' or 'triangle'                                                                      |\n| `style`                      | string              | fill             | 'fill' or 'stroke'                                                                                         |\n| `direction`                  | string              | 'left'           | 'left' or 'right' or 'top' or 'bottom'                                                                     |\n| `canvasPadding`              | number              | 150              | Amount of extra padding to add to the canvas since the animation will overflow the content's bounds        |\n| `size`                       | number              | func             | random(4)                                                                                                  | Particle size. May be a static number or a function which returns numbers. |\n| `speed`                      | number              | func             | random(4)                                                                                                  | Particle speed. May be a static number or a function which returns numbers. |\n| `particlesAmountCoefficient` | number              | 3                | Increases or decreases the relative number of particles                                                    |\n| `oscillationCoefficient`     | number              | 20               | Increases or decreases the relative curvature of particles                                                 |\n| `onBegin`                    | func                | noop             | Callback to be notified once an animation starts.                                                          |\n| `onComplete`                 | func                | noop             | Callback to be notified once an animation completes.                                                       |\n\nI tried to keep the properties exactly the same as in the original codrops version.\n\n## Slots\n\n| Property  | Type | Default                 | Description               |\n| :-------- | :--- | :---------------------- | :------------------------ |\n| `default` | slot | the string of 'content' | the content of the button |\n\n## Related\n\n- [anime.js](http://animejs.com/) - Underlying animation engine.\n- [ParticleEffectsButtons](https://github.com/codrops/ParticleEffectsButtons/) - Original source this library is based on.\n- [Codrops Article](https://tympanus.net/codrops/2018/04/25/particle-effects-for-buttons/) - Original article this library is based on.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n\u003ctable\u003e\u003ctr\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://dreambo8563.github.io/\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/6948318?v=4\" width=\"100px;\" alt=\"Vincent Guo\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVincent Guo\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/dreambo8563/vue-particle-effect-buttons/commits?author=dreambo8563\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/dreambo8563/vue-particle-effect-buttons/commits?author=dreambo8563\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-dreambo8563\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreambo8563%2Fvue-particle-effect-buttons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdreambo8563%2Fvue-particle-effect-buttons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreambo8563%2Fvue-particle-effect-buttons/lists"}