Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sakalx/react-glitch-effect
React Glitch effects
https://github.com/sakalx/react-glitch-effect
animation clip-glitch glitch glitch-effect react react-animation react-effect reactjs text-glitch
Last synced: about 1 month ago
JSON representation
React Glitch effects
- Host: GitHub
- URL: https://github.com/sakalx/react-glitch-effect
- Owner: sakalx
- License: mit
- Created: 2018-09-23T11:44:40.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-06T07:42:12.000Z (over 1 year ago)
- Last Synced: 2024-11-18T04:20:27.145Z (about 2 months ago)
- Topics: animation, clip-glitch, glitch, glitch-effect, react, react-animation, react-effect, reactjs, text-glitch
- Language: JavaScript
- Homepage: https://sakalx.github.io/react-glitch-effect
- Size: 15.9 MB
- Stars: 54
- Watchers: 2
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React glitch-effect-components
________________________________________________________
[DEMO](https://sakalx.github.io/react-glitch-effect/)
________________________________________________________
________________________________________________________
## Squiggly Glitch Component
`import GlitchSquiggly from 'react-glitch-effect/core/GlitchSquiggly';`
#### Props
| Name | Type | Default |
| --- | --- | --- |
| **disabled** | `boolean` | *false* |
| **duration** | `string` | *3s* |
| **iterationCount** | `string` | *infinite* |
| **onHover** | `boolean` | *false*
| **baseFrequency** | `number` | *0.02*
| **scaleNoise** | `number` | *5*
________________________________________________________
________________________________________________________
### Example Squiggly glitch effect component
```javascript
import React, { useState } from 'react';
import GlitchSquiggly from 'react-glitch-effect/core/GlitchSquiggly';
const MyComponent = () => {
const [isDisabled, setDisabled] = useState(false);
const handleToggleGlitch = () => {
setDisabled(!isDisabled);
};
return (
TOGGLE EFFECT
GlitchSquiggly
)
};
```
________________________________________________________
________________________________________________________
## Clip Glitch Component
`import GlitchClip from 'react-glitch-effect/core/GlitchClip';`
#### Props
| Name | Type | Default |
| --- | --- | --- |
| **disabled** | `boolean` | *false* |
| **duration** | `string` | *3s* |
| **iterationCount** | `string` | *infinite* |
| **onHover** | `boolean` | *false*
________________________________________________________
________________________________________________________
### Example Clip glitch effect component
```javascript
import React from 'react';
import GlitchClip from 'react-glitch-effect/core/GlitchClip';
const MyComponent = () => {
return (
Glitch
)
}
```
### Manually trigger example Clip glitch effect component
```javascript
import React, {useState} from 'react';
import GlitchClip from 'react-glitch-effect/core/Clip';
const MyComponent = () => {
const [isDisabled, setDisabled] = useState(false);
const handleToggleGlitch = () => {
setDisabled(!isDisabled);
};
return (
TOGGLE EFFECT
Glitch
)
};
```
### Example Clip glitch effect with on hover
```javascript
import React from 'react';
import GlitchClip from 'react-glitch-effect/core/Clip';
const MyComponent = () => {
return (
Glitch
)
}
```
________________________________________________________
________________________________________________________
## Text Glitch Component
`import GlitchText from 'react-glitch-effect/core/GlitchText';`
#### Props
| Name | Type | Default |
| --- | --- | --- |
| **component** | `string` | *span*
| **color1** | `string` | *rgba(77, 171, 245, .5)*
| **color2** | `string` | *rgba(245, 0, 87, .3)*
| **disabled** | `boolean` | *false* |
| **duration** | `string` | *2s* |
| **iterationCount** | `string` | *infinite* |
| **onHover** | `boolean` | *false*
________________________________________________________
________________________________________________________
### Example Text glitch effect component
```javascript
import React, {useState} from 'react';
import GlitchText from 'react-glitch-effect/core/GlitchText';
const MyComponent = () => {
const [isDisabled, setDisabled] = useState(false);
const handleToggleGlitch = () => {
setDisabled(!isDisabled);
};
return (
TOGGLE EFFECT
Glitch
)
};
```