Skip to content

A React Native lib that provides to you a glitch effect in your texts and images

License

Notifications You must be signed in to change notification settings

maaxg/rn-glitch-effect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

rn-glitch-effect

Welcome to Glitch Effect 👋

glitch(1) glitch-button image-glitch

What is React native Glitch Effect?

  • Is a simple way to glitch your text and images.

Instalation

  npm i rn-glitch-effect

Properties - Glitch

props description default value
text Your text label that's going to be displayed. empty String
glitchHeight The height that you want your glitch effect will have. 80 Integer
glitchAmplitude The amplitude of your glitch. In other words, how far your effect will be from the main text. 5 Integer
glitchDuration The duration of your glitch effect. 1500 Milisseconds
repeatDelay How long time your effect will wait, to start another turn of effect. 2000 Milisseconds
shadowColor The shadow color of your effect. #add8e6 rgb
textStyle The style that you want to give to your text. {color: '#000000',fontWeight: 'bold',letterSpacing: 3,} Object
heightInputRange The input range to the interpolation of main animation. With this you can control each part of your effect height. [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100] array
positionYInputRange The input range to the interpolation of main animation. With this you can control each part of your effect position. [0, 10, 20, 30, 60, 65, 70, 80, 90, 100] array
outOfTextRange Will make your effect get out of the range from your text false Boolean
disableAutoAnimation enable or disabled your animation false Boolean

Properties - GlitchImage

props description default value
glitchHeight The height that you want your glitch effect will have. 200 Integer
glitchAmplitude The amplitude of your glitch. In other words, how far your effect will be from the main text. 5 Integer
glitchDuration The duration of your glitch effect. 1500 Milisseconds
repeatDelay How long time your effect will wait, to start another turn of effect. 2000 Milisseconds
shadowColor The shadow color of your effect. #add8e6 rgb
imageStyle The style that you want to give to your text. {width: 400,height: 200} Object
heightInputRange The input range to the interpolation of main animation. With this you can control each part of your effect height. [0, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110] array
positionYInputRange The input range to the interpolation of main animation. With this you can control each part of your effect position. [0, 10, 20, 30, 60, 65, 70, 80, 90, 100] array
disableAutoAnimation enable or disabled your animation false Boolean
source Your image path. false String

Usage

Basic Glitch

  • You can use this with or without the View container
import React from 'react';
import {View, StyleSheet} from 'react-native';
import {Glitch} from 'rn-glitch-effect';
const App = () => {

  return (
      <View style={styles.containerWithBg}>
        <Glitch
          text={'GLITCH'}
          mainColor={'black'}
          shadowColor={'green'}
        />
      </View>
  );
};
const styles = StyleSheet.create({
  containerWithBg: {backgroundColor: 'red', marginBottom: '5%'},
});
export default App;

Glitch with Button

  • You can use this with a button wrapping your text and define if it will activate the glitch when clicked
import React, {useRef} from 'react';
import {TouchableHighlight, StyleSheet} from 'react-native';
import {Glitch} from 'rn-glitch-effect';
const App = () => {
  const ref = useRef();
  return (
    <View style={[styles.container]}>
      <TouchableHighlight
        onPress={() => {
          ref.current.animate();
        }}
        style={[styles.containerWithBg]}>
        <Glitch
          text={'RESPONSIVE'}
          ref={ref}
          mainColor={'black'}
          shadowColor={'pink'}
          disableAutoAnimation={true}
        />
      </TouchableHighlight>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {flex: 1, justifyContent: 'center', alignItems: 'center'},
  containerWithBg: {backgroundColor: 'red', marginBottom: '5%'},
});
export default App;
import React from 'react';
import {StyleSheet, View} from 'react-native';
import {Glitch, GlitchImage} from 'rn-glitch-effect';
import Gator from './assets/images/gator.jpeg';
const App = () => {
  return (
    <View style={[styles.container]}>
      <View style={styles.containerWithBg}>
        <Glitch
          text={'GLITCH'}
          mainColor={'black'}
          shadowColor={'green'}
          outOfTextRange={false}
        />
        <GlitchImage shadowColor={'red'} mainColor={'black'} source={Gator} />
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  containerWithBg: {backgroundColor: 'red', marginBottom: '5%'},
  image: {
    width: 400,
    height: 200,
  },
});
export default App;

End of the line :)

If you have any ideia to contribute with this project, please make your self home.

About

A React Native lib that provides to you a glitch effect in your texts and images

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published