{"id":22010293,"url":"https://github.com/sakalx/react-glitch-effect","last_synced_at":"2025-08-01T23:12:59.525Z","repository":{"id":33019297,"uuid":"149979238","full_name":"sakalx/react-glitch-effect","owner":"sakalx","description":"React Glitch effects","archived":false,"fork":false,"pushed_at":"2023-10-06T07:42:12.000Z","size":16704,"stargazers_count":55,"open_issues_count":3,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-16T13:18:51.799Z","etag":null,"topics":["animation","clip-glitch","glitch","glitch-effect","react","react-animation","react-effect","reactjs","text-glitch"],"latest_commit_sha":null,"homepage":"https://sakalx.github.io/react-glitch-effect","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/sakalx.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2018-09-23T11:44:40.000Z","updated_at":"2025-06-14T18:53:36.000Z","dependencies_parsed_at":"2024-06-18T22:58:41.596Z","dependency_job_id":"f204cbe2-2e95-4056-8fd4-fdece54ddad8","html_url":"https://github.com/sakalx/react-glitch-effect","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sakalx/react-glitch-effect","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakalx%2Freact-glitch-effect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakalx%2Freact-glitch-effect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakalx%2Freact-glitch-effect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakalx%2Freact-glitch-effect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sakalx","download_url":"https://codeload.github.com/sakalx/react-glitch-effect/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakalx%2Freact-glitch-effect/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268310807,"owners_count":24230187,"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","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","clip-glitch","glitch","glitch-effect","react","react-animation","react-effect","reactjs","text-glitch"],"created_at":"2024-11-30T02:12:36.647Z","updated_at":"2025-08-01T23:12:59.506Z","avatar_url":"https://github.com/sakalx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React glitch-effect-components\n ________________________________________________________\n[DEMO](https://sakalx.github.io/react-glitch-effect/)\n ________________________________________________________\n ________________________________________________________\n\n\n## Squiggly Glitch Component\n`import GlitchSquiggly from 'react-glitch-effect/core/GlitchSquiggly';`\n\n#### Props\n| Name | Type | Default |\n| --- | --- | --- |\n| **disabled** | `boolean` | *false* |\n| **duration** | `string` | *3s* |\n| **iterationCount** | `string` | *infinite* |\n| **onHover** | `boolean` | *false*\n| **baseFrequency** | `number` | *0.02*\n| **scaleNoise** | `number` | *5*\n ________________________________________________________\n ________________________________________________________\n\n### Example Squiggly glitch effect component\n ```javascript\nimport React, { useState } from 'react';\nimport GlitchSquiggly from 'react-glitch-effect/core/GlitchSquiggly';\n\nconst MyComponent = () =\u003e {\n  const [isDisabled, setDisabled] = useState(false);\n\n  const handleToggleGlitch = () =\u003e {\n    setDisabled(!isDisabled);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={handleToggleGlitch}\u003eTOGGLE EFFECT\u003c/button\u003e\n\n      \u003cGlitchSquiggly disabled={isDisabled}\u003e\n        \u003ch1\u003eGlitchSquiggly\u003c/h1\u003e\n      \u003c/GlitchSquiggly\u003e\n    \u003c/div\u003e\n  )\n};\n ```\n\n ________________________________________________________\n ________________________________________________________\n\n\n## Clip Glitch Component\n`import GlitchClip from 'react-glitch-effect/core/GlitchClip';`\n\n#### Props\n| Name | Type | Default |\n| --- | --- | --- |\n| **disabled** | `boolean` | *false* |\n| **duration** | `string` | *3s* |\n| **iterationCount** | `string` | *infinite* |\n| **onHover** | `boolean` | *false* \n ________________________________________________________\n ________________________________________________________\n \n### Example Clip glitch effect component\n ```javascript\n import React from 'react';\n import GlitchClip from 'react-glitch-effect/core/GlitchClip';\n \nconst MyComponent = () =\u003e {\n    return (\n      \u003cGlitchClip\u003e\n        \u003ch1\u003eGlitch\u003c/h1\u003e\n      \u003c/GlitchClip\u003e\n    )\n }\n ```\n\n### Manually trigger example Clip glitch effect component\n```javascript\nimport React, {useState} from 'react';\nimport GlitchClip from 'react-glitch-effect/core/Clip';\n   \nconst MyComponent = () =\u003e {\n  const [isDisabled, setDisabled] = useState(false);\n\n  const handleToggleGlitch = () =\u003e {\n    setDisabled(!isDisabled);\n  };\n\n  return (\n    \u003cdiv\u003e\n        \u003cbutton onClick={handleToggleGlitch}\u003eTOGGLE EFFECT\u003c/button\u003e\n        \u003cGlitchClip disabled={isDisabled}\u003e\n          \u003ch1\u003eGlitch\u003c/h1\u003e\n        \u003c/GlitchClip\u003e\n    \u003c/div\u003e\n  )\n};\n```\n\n### Example Clip glitch effect with on hover\n```javascript\nimport React from 'react';\nimport GlitchClip from 'react-glitch-effect/core/Clip';\n\nconst MyComponent = () =\u003e {\n    return (\n      \u003cGlitchClip onHover={true}\u003e\n        \u003ch1\u003eGlitch\u003c/h1\u003e\n      \u003c/GlitchClip\u003e\n    )\n}\n```\n\n ________________________________________________________\n ________________________________________________________\n \n## Text Glitch Component\n`import GlitchText from 'react-glitch-effect/core/GlitchText';`\n\n#### Props\n| Name | Type | Default |\n| --- | --- | --- |\n| **component** | `string` | *span* \n| **color1** | `string` | *rgba(77, 171, 245, .5)* \n| **color2** | `string` | *rgba(245, 0, 87, .3)* \n| **disabled** | `boolean` | *false* |\n| **duration** | `string` | *2s* |\n| **iterationCount** | `string` | *infinite* |\n| **onHover** | `boolean` | *false* \n ________________________________________________________\n ________________________________________________________\n \n### Example Text glitch effect component\n```javascript\nimport React, {useState} from 'react';\nimport GlitchText from 'react-glitch-effect/core/GlitchText';\n\n const MyComponent = () =\u003e {\n   const [isDisabled, setDisabled] = useState(false);\n \n   const handleToggleGlitch = () =\u003e {\n     setDisabled(!isDisabled);\n   };\n \n   return (\n     \u003cdiv\u003e\n         \u003cbutton onClick={handleToggleGlitch}\u003eTOGGLE EFFECT\u003c/button\u003e\n         \u003cGlitchText component='h1' disabled={isDisabled}\u003e\n           Glitch\n         \u003c/GlitchText\u003e\n     \u003c/div\u003e\n   )\n };\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsakalx%2Freact-glitch-effect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsakalx%2Freact-glitch-effect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsakalx%2Freact-glitch-effect/lists"}