Miss any of our Open RFC calls?Watch the recordings here! »

react-glitchify

2.4.14 • Public • Published

GLITCHIFY

A React component that plays a glitch animation for any text that you enter.

How To Use:

import Glitchify from 'react-glitchify';

    const MyApp = () => {
        <ContainerComponent>
            <div>Some usual stupid stuff,
            follow by a super awesome animation !</div>
            <Glitchify>Show me the power of NPM.</Glitchify>
        </ContainerComponent>
    }

You may also use the following options:

  • steps: The steps that the animation is divided by. More steps could result in a more prevalent distortion, but will also impact the performance more. (Value is a Number)
  • fontSize: The size of the font. Please specify unit: px, em, rem, vw, vh...(Value is a string)
  • color: The color of the text. Please specify the color with its unit or by name. Hex colors preceded by an octothorpe ('#'), rgb colors using rgb( , , ), and so on... (Value is a string)
  • background: The color of the background of the animation. Please specify either a color with its unit, or by its name.
  • font: choose any font you like. Specify a font as such: 'sans-serif'. (value must be a string)

All those options should be passed as props. If none are specified, you will get a default of:

  • 20 steps
  • 1rem fontSize
  • black color
  • white background
  • sans-serif font

Install

npm i react-glitchify

DownloadsWeekly Downloads

38

Version

2.4.14

License

ISC

Unpacked Size

40.6 kB

Total Files

4

Last publish

Collaborators

  • avatar