react-glitch-image
TypeScript icon, indicating that this package has built-in type declarations

1.4.0 • Public • Published

React Glitch Image

Allows display images with a glitch effect

# NPM
npm install --save react-glitch-image
# YARN
yarn add react-glitch-image
    import { GlitchImage } from "react-glitch-image";
    <GlitchImage image="image.jpg"/>

Very simple!

Parameters to get complicated (props)!

name default description
width 20 If it is a number it will be used as rem, otherwise use string with unit type
splitSize 8 Number of divisions
animationInterval 4000 Time interval to repeat animation (measured in ms)
animationDuration 400 I really have to describe this (measured in ms)
variations [2, 3] Intensity of the effect of each layer
inside false Defines if the effect is seen outside the container
activeFxOnInterval true Activate the glitch effect in the animationInterval
activeFxOnHover true Activate the glitch effect on hover
position
layerColors false Alternate colors in layer 2, better explained below
opacity 0.3 Layer 2 opacity
filter true Activate aleatory hue-rotate filter value and brightness in layer 2
brightness 2 Brightness filter intensity
customFilter null Deactivate the previous filter for a more personalized filter
onActiveFx null This function is executed when the glitch effect is triggered by the interval, and sends the animationDuration
baseImageStyleOnActiveFx null Apply css style on the base image when fx glitch is activated

width

- <GlitchImage image="image.jpg" width={18}/> // =18rem
- <GlitchImage image="image.jpg" width="50%"/> // =50%
- <GlitchImage image="image.jpg" width="300px"/> // =300px

customFilter

This property receives normal filters for css property, however, you can specify a random value for each filter. using $<number> you can indicate the maximum value that will be generated randomly.

Example 1:

  • customFilter="invert($20%)"
  • Generates a random value from 0 to 20

Example 2:

  • customFilter=invert($100%) saturate(100%) hue-rotate($200deg) brightness(2)
  • This generates random values from 0 to 100 for invert, and from 0 to 200 for hue-rotate

Note:

Every time the filter is activated using activeFxOnInterval, this again generates random values for the customFilter, each layer generate a different random

layerColors:

  • Receives an array of colors to alternate on each of the layers 2. Uses true, to set the default color array ["rgba(255,0,0,0.04)", "rgba(0,0,255,0.04)"]

  • This will create a sublayer of the color specified in layer 2, it is recommended to deactivate filter or use a customFilter to get a better and more personalized result.

  • EXAMPLE

    <GlitchImage
        image="image.jpg"
        customFilter="invert($20%) saturate($30%)"
        layerColors={["rgba(0,0,180,0.05)", "rgba(200,0,0,0.05)"]}
    />

Package Sidebar

Install

npm i react-glitch-image

Weekly Downloads

8

Version

1.4.0

License

MIT

Unpacked Size

46.1 kB

Total Files

19

Last publish

Collaborators

  • bonarja