A react component library with Configurable 'Zalgo Text' Generator.
Work in progress...
You can try to use Sample from Storybook
more information will come soon...
$ npm i @h.yoshida/react-zalgo
# or
$ yarn add @h.yoshida/react-zalgoimport {GlitchParams, Zalgo} from '@h.yoshida/react-zalgo';
const textData = 'the quick brown fox jumps over the lazy dog.'
// You can configure the amount of Zalgo Glitch volumes.
const param: GlitchParams = {
topGlitchAmount: () => Math.ceil(3 * Math.random()),
midGlitchAmount: () => Math.ceil(2 * Math.random()),
btmGlitchAmount: () => Math.ceil(10 * Math.random()),
}
// this will return like `ṱ̶̠͖̗̹͖̰̺͙̠ͬ͘h̶̠͖̥͇̗ͪͣͭe̵̹͓̘͍͌ͤ̓ ̤̺̦͏҉̄̂q̶̛̳̗͍͉̹̞̳͒ù̡̲̪̲͙̞͑̚͜ī̜̮̞̬̬̗̤̠͙͈ͩ͜c̞̦̝̝̰̠̔͡ͅk̰͇̦͌ͩ͟ ̵̺̺̞̲̱͍̲̺̟̓̅ͯ͘b̩͖̤͚͕̱̭ͦͪ͝r̪̩̣̝͇͖̼҉̧̊o̶͎͕̱̩̜̻͈̽͞w̧̢̘̳̭̹̘͉ͣ̒n͙͑̀͑͜͡ ͕̀̉f̢̹̼̻͎͙̲̿̑o̪̯̻͉̩̮̹͇҉҉͒̔x̘͎̭̐̆̐͝͠ ̷͑ͅj̷̧͉͇̰̹̰͓̦̭̊̈ụ̻̬̠͍̘͖̘͖̹̀̀̆̚m̸̤̙̬̻͍ͦ͞ͅp̡̡̤͚̪̤͓̯̗͖̬͊ṥ͖͖̠̫́̋ ̷̨̗̮̹̟̥͚̔o̝҉̌̓͝v̴̴̭̟̘̣̫͗e̡̛͎̘̩̠̳̯͉̦̬̟͐ͨr̙͔̙̪͏̴̃̚ ̡̺̰͍̘̱͙̣̞͖̰̎͘t̘ͨͯ͌͝h̩̮͈̙͎̦͍̻ͤͫ͠ẹ̳̞̪͈̼̮̪͉̜͏̎ ̡̢̙̔̈́l̥̗͉̦͈̝ͣ͂̇͟a̹̝͔̹͉̽̄͘z̨̥͙͇̞͔̟̰ͯ̎̏y̥̠̜̦҉̊̄ ̧̬͓̣ͦd̶̦͙́ͫ̈́ȍ̶̹̜͔͍̐͡g̶̤̗̮͚͖͚͛̒̈́͜ͅ.̼̹͈̣̪̪̙̘̣͏̡ͭ̅̿`
return (
<>
<Zalgo textData={textData}
glitchParams={param}/>
</>
)If you want to get reproducible glitch results, use XORShift32 to GlitchAmount.
import {DefaultXORShift32GeneratorFactory, GlitchParams, XORShift32, Zalgo} from '@h.yoshida/react-zalgo';
const rand = new XORShift32(100);
const param: GlitchParams = {
// these params control the amount of glitch volume.
topGlitchAmount: () => Math.ceil(3 * rand.getNextInt(1, 3)),
midGlitchAmount: () => Math.ceil(rand.getNextInt(0, 1)),
btmGlitchAmount: () => Math.ceil(2 * rand.getNextInt(3, 30)),
// `randomGeneratorFactory` is used by selecting charactor for zalgo glitch.
randomGeneratorFactory: DefaultXORShift32GeneratorFactory
}
// this gives the same glitch result.
return (
<>
<Zalgo textData={textData}
glitchParams={param}/>
</>
)and more sample will be found in Storybook
- reference