Text Effects: Stateful React text effects for amazing websites
These effects return a <span> element with your text and desired effect. You can use them in links, headings, divs and spans alike. These effects use RAF (request animation frame) for optimal performance and less reliance on setTimeout/setInterval.
Have your text randomise between Roman alphabet letters or 1's and 0's and appear in sequence. The effect does discard timers on onMount, so for best practices be sure to remove or set the element to null on unMounting or rerendering.
Note: For the best effect, use a font-family with consistent letter spacing e.g. Courier New, Courier, monospace
import React, {useEffect} from "react";
import {Glitch} from "react-teffex";
export default function AwesomeGlitchEffect(props) {
let myGlitchEffects = (
<div>
<Glitch alphabet buffer={20} text={"This is glitchy text!"} />
<Glitch
alphabet
reverse
text={"This is glitchy text comming from the other side!"}
/>
<br />
<Glitch text={"This glitches as 1's and zeroes!"} />
<br />
<Glitch text={"This glitches as 1's and zeroes!"} />
</div>
);
/* Best practice is to discard the effect when rerendered in order to avoid memory leaks or warnings thereof */
useEffect(()=>{
return (myGlitchEffects=null)
},[])
return (
<div className="container">
{myGlitchEffects}
</div>
);
}
Parameters
<Glitch {parameters} />
text:string The text you wish to display through the effect
reverse:boolean Reverse the direction of the glitch effect hwne it flips to the desired letter
id:string CSS id that can be added to your text for CSS modifications and events
speed:number Loop delay of the animation in ms (smaller is faster) (default = 50ms)
glitchSpeed: number Maximum delay before next glitch (the glitch timer uses a random value between 0 and the glitchSpeed in ms, smaller is faster) (default = 5000ms)
dontGlitch:boolean specify if you do not want the text to glitch after initial animation
buffer: number Adds additional loops to the animation in order to delay the word revealing itself (default = 0)
alphabet: boolean Will use the Roman alphabet instead of 1's and 0's
style: object React styled components
extendedAlphabet: boolean; Will use the extended Roman alphabet (i.e. includes characters like ß, ę, į etc.)
onClick:function (event)=>{} Runs a function you provide with the event as the parameter
onMouseEnter:function (event)=>{} Runs a function you provide with the event as the parameter
onMouseLeave:function (event)=>{} Runs a function you provide with the event as the parameter
One of the most elegant typewriter effects for react. No setTimeout or setInterfals used, everything is based on RAF with indexed values for a super lightweight interface. Highly customizable, from the initial delay, to the stutter delay, stutter chance,
import React from "react";
import {Typewriter} from "react-teffex";
export default function AwesomeGlitchEffect(props) {
return (
<div>
<Typewriter text={"This is a general typewriter"} />
<Typewriter
cycle={["This will cycle", "and stop"]}
/>
<Typewriter
typeSettings={{ initialDelay: 1000 }}
text={"This will cycle "}
cycle={["forever", "and ever"]}
loop
/>
</div>
);
}
Parameters
<Typewriters {parameters} />
text:string The text you wish to display through the effect (persistant)
cycle:string[] Arrays that will display, backspace after cycleDelay time, then display the next item. If it is the last item and no loop prop is provided, it will persist.
cycleDelay:number Amount of time between each cycle in ms
id:string CSS id that can be added to your text for CSS modifications and events
loop: boolean if true, will continuously loop through each cycle provided
typeSettings.stutterTime: number The delay when stuttering (pause typing) in ms
typeSettings.stutterChance: number Chance out of 10 (actually 9) to stutter
typeSettings.typeDelay: number The delay between each character being typed in ms (determines the type speed)
typeSettings.initialDelay: number Initial delay before effect starts in ms
cursorSettings.color: string Colour of the cursor
cursorSettings.cursorBlinkSpeed: string Delay time between cursor blinking in ms
style: object React styled components
onClick:function (event)=>{} Runs a function you provide with the event as the parameter
onMouseEnter:function (event)=>{} Runs a function you provide with the event as the parameter
onMouseLeave:function (event)=>{} Runs a function you provide with the event as the parameter
Please feel free to use, mix-up, improve, or add to the effects here. Please ensure that you use the format seen above when adding an effect, documentation is important.
Readme style:
-
Heading + Description
-
Contents (edit this when adding)
-
Effects (Be sure to include these!) 3.1. Effect name 3.2 CodeSandBox example 3.3 Effect description 3.4 Usage 3.5 Effect parameters
How to add to the content section:
Add a <a name="#your_effect_name_here"></a> before your effect's section
Add [your_effect_name_here](#your_effect_name_here) to the content