{"id":22356690,"url":"https://github.com/posandu/svelte-ripple-action","last_synced_at":"2025-07-18T11:37:10.109Z","repository":{"id":187817893,"uuid":"677665019","full_name":"Posandu/svelte-ripple-action","owner":"Posandu","description":"Svelte Ripple Action","archived":false,"fork":false,"pushed_at":"2024-11-15T13:15:38.000Z","size":224,"stargazers_count":61,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-26T17:53:57.837Z","etag":null,"topics":["css","javascript","material-design","svelte","sveltekit","typescript"],"latest_commit_sha":null,"homepage":"https://ripple.posandu.com/","language":"Svelte","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/Posandu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["posandu"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null}},"created_at":"2023-08-12T08:10:25.000Z","updated_at":"2025-06-11T05:48:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"34e30517-6140-420e-bde5-d01174700abf","html_url":"https://github.com/Posandu/svelte-ripple-action","commit_stats":null,"previous_names":["posandu/svelte-ripple-action"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Posandu/svelte-ripple-action","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Posandu%2Fsvelte-ripple-action","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Posandu%2Fsvelte-ripple-action/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Posandu%2Fsvelte-ripple-action/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Posandu%2Fsvelte-ripple-action/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Posandu","download_url":"https://codeload.github.com/Posandu/svelte-ripple-action/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Posandu%2Fsvelte-ripple-action/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262864133,"owners_count":23376455,"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":["css","javascript","material-design","svelte","sveltekit","typescript"],"created_at":"2024-12-04T14:11:42.250Z","updated_at":"2025-06-30T23:06:10.962Z","avatar_url":"https://github.com/Posandu.png","language":"Svelte","funding_links":["https://github.com/sponsors/posandu"],"categories":[],"sub_categories":[],"readme":"# Svelte Ripple Action\n\n\u003cp\u003e\n  \u003cimg\n\t\t\tsrc=\"https://deno.bundlejs.com/badge?q=svelte-ripple-action\"\n\t\t\talt=\"\"\n\t/\u003e\n  \u003cimg src=\"https://img.shields.io/github/commit-activity/t/posandu/svelte-ripple-action\" /\u003e\n  \u003cimg alt=\"GitHub Repo stars\" src=\"https://img.shields.io/github/stars/posandu/svelte-ripple-action\"\u003e\n\u003c/p\u003e\n\nView the [demo](https://ripple.posandu.com/).\n\nSvelte Ripple Action is a simple and customizable action for creating ripple effects on elements in a Svelte application.\n\n## Installation\n\nInstall the package from npm or your preferred package manager:\n\n```bash\nnpm install svelte-ripple-action\n```\n\n## Usage\n\n1. Import the CSS styles for the ripple effect:\n\n```javascript\nimport \"svelte-ripple-action/ripple.css\";\n```\n\n2. Import the `ripple` action and use it on any element you want to have a ripple effect on:\n\n```svelte\n\u003cscript\u003e\n  import { ripple } from \"svelte-ripple-action\";\n\u003c/script\u003e\n\n\u003cbutton use:ripple\u003eClick me\u003c/button\u003e\n```\n\nThat's it! You now have a ripple effect on your element.\n\n## Options\n\nYou can pass options to customize the ripple effect.\n\n### `center?: boolean`\n\nBy default, the ripple effect starts from the point where the user clicks on the element. If you want the ripple effect to start from the center of the element, you can pass the `center` option.\n\n```svelte\n\u003cbutton use:ripple={{ center: true }}\u003eClick me\u003c/button\u003e\n```\n\n### `color?: string`\n\nYou can customize the color of the ripple effect by passing a valid CSS color value to the `color` option.\n\n```svelte\n\u003cbutton\n  use:ripple={{\n    color: \"rgba(255, 0, 0, 0.2)\",\n  }}\n\u003eRed ripple\u003c/button\u003e\n```\n\n### `duration?: number`\n\nYou can control the duration of the ripple effect in seconds by passing a number to the `duration` option.\n\n```svelte\n\u003cbutton use:ripple={{ duration: 2 }}\u003e2 seconds\u003c/button\u003e\n\u003cbutton use:ripple={{ duration: 0.2 }}\u003e0.2 seconds\u003c/button\u003e\n```\n\n### `maxRadius?: number`\n\nYou can control the maximum radius of the ripple effect in pixels by passing a number to the `maxRadius` option.\n\n```svelte\n\u003cbutton use:ripple={{ maxRadius: 100 }}\u003e100px\u003c/button\u003e\n```\n\n## Credits\n\nCreated by [Posandu](https://posandu.com). You can find the source code on [GitHub](https://github.com/posandu/svelte-ripple-action).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposandu%2Fsvelte-ripple-action","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposandu%2Fsvelte-ripple-action","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposandu%2Fsvelte-ripple-action/lists"}