Glitchy - A React component for cycling between texts with a glitch effect

Glitchy is a visual React component that allows you to cycle between two texts using a nice glitchy effect. It is a part of a cyberpunk-inspired React library I'm currently working on.

Installation

    npm i glitchy-transforming-text

Getting Started

To start using Glitchy, you can simply import it and use it as a component.

import { Glitchy } from "glitchy-transforming-text";

<Glitchy transitionText="技術スタック">stack</Glitchy>;

Props

• transitionText: (string) The text you want to transition to. Required.
• transitionDelay: (number) The delay (in milliseconds) before repeating the entire effect. The default is 4500.
• displayType: ("inline" | "block") The chosen display. Optional. The default is "inline".
• className: (string) Optional. Add a classname to the parent div. The default is nothing.
• randomChars: (string) Optional. The characters to use during the transition. The default is '~!@#$%^&*_-+=[]{}|;:",.<>?/¡£¢∞§¶•ªº–≠œ∑´®†¥¨ˆøπ‘“«åß∂ƒ©˙∆˚¬…æ≈ç√≤≥÷ʡ℅µ№▧▦▤▥▨▩█▪▫☗☖♠♣♧♡♢♤♧♨♪♫♬'
• typography: _("h1" | "h2" | "h3" | "h4" | "p") Changes the text's wrapper tag. Optional. The default is "p".

Example

<Glitchy
  transitionText="技術スタック"
  typography="h1"
  className="neon"
  transitionDelay={3000}
  randCharDelay={100}
>
  stack
</Glitchy>

Notes

Feel free to fork and submit pull requests