Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

glitched-writer

Package Overview
Dependencies
Maintainers
1
Versions
39
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

glitched-writer - npm Package Compare versions

Comparing version 2.0.5 to 2.0.6

3

lib/char.d.ts

@@ -6,3 +6,2 @@ import GlitchedWriter from './index';

stepsLeft: number;
maxGhosts: number;
ghostsBefore: string[];

@@ -17,5 +16,5 @@ ghostsAfter: string[];

type(): Promise<boolean>;
nextStep(): void;
step(): void;
addGhost(): void;
removeGhost(): void;
}

@@ -18,3 +18,2 @@ "use strict";

this.stepsLeft = 0;
this.maxGhosts = writer.options.genMaxGhosts;
}

@@ -32,5 +31,5 @@ get string() {

!this.instant && (await utils_1.wait(this.writer.options.genInterval));
this.nextStep();
this.step();
this.writer.emiter.call('step');
return true;
this.stepsLeft--;
};

@@ -41,3 +40,3 @@ !this.instant && (await utils_1.wait(this.writer.options.genInitDelay));

}
nextStep() {
step() {
if (this.stepsLeft > 0 && this.char !== this.goal) {

@@ -49,3 +48,3 @@ /**

if (utils_1.coinFlip(ghostChance)) {
if (this.writer.state.nGhosts < this.maxGhosts)
if (this.writer.state.ghostsInLimit)
this.addGhost();

@@ -65,9 +64,2 @@ else

}
else {
/**
* IS DONE
*/
return;
}
this.stepsLeft--;
}

@@ -82,2 +74,3 @@ addGhost() {

removeGhost() {
this.writer.state.nGhosts--;
utils_1.coinFlip() && this.ghostsBefore.length > 0

@@ -84,0 +77,0 @@ ? utils_1.deleteRandom(this.ghostsBefore)

@@ -17,3 +17,3 @@ "use strict";

htmlElement.textContent = string;
htmlElement.setAttribute('data-string', string);
htmlElement.setAttribute('data-gw-string', string);
}

@@ -24,3 +24,3 @@ if (eventType === 'finish') {

(_a = this.onFinishCallback) === null || _a === void 0 ? void 0 : _a.call(this, string, writerData);
this.emitEvent('gw_finished');
this.emitEvent('gw-finished');
}

@@ -30,3 +30,3 @@ else {

(_b = this.onStepCallback) === null || _b === void 0 ? void 0 : _b.call(this, string, writerData);
this.emitEvent('gw_step');
this.emitEvent('gw-step');
}

@@ -33,0 +33,0 @@ }

@@ -7,3 +7,3 @@ import Options from './options';

import { wait } from './utils';
import { presets, glyphs } from './presets';
import { presets, glyphs, PresetName } from './presets';
export default class GlitchedWriter {

@@ -16,3 +16,3 @@ htmlElement?: HTMLElement | Element;

goalString: string;
constructor(htmlElement?: HTMLElement | Element, options?: ConstructorOptions, onStepCallback?: Callback, onFinishCallback?: Callback);
constructor(htmlElement?: HTMLElement | Element, options?: ConstructorOptions | PresetName, onStepCallback?: Callback, onFinishCallback?: Callback);
get string(): string;

@@ -19,0 +19,0 @@ get previousString(): string;

@@ -24,7 +24,3 @@ "use strict";

const string = this.charTable.map(char => char.string).join('');
return [
this.options.getAppendedText('leading'),
string,
this.options.getAppendedText('trailing'),
].join('');
return string;
}

@@ -102,3 +98,3 @@ get previousString() {

createMatchingCharTable() {
const { goalStringArray, previousString: previous } = this, maxDist = Math.ceil(this.options.genMaxGhosts / 2);
const { goalStringArray, previousString: previous } = this, maxDist = Math.min(Math.ceil(this.options.genMaxGhosts / 2), 5);
let pi = -1;

@@ -123,3 +119,3 @@ goalStringArray.forEach(gl => {

else
this.addChar(pl || ' ', gl);
this.addChar(pl || this.options.space, gl);
});

@@ -132,3 +128,3 @@ }

pi++;
const pl = previous[pi] || ' ';
const pl = previous[pi] || this.options.space;
if (typeof gl === 'object' || utils_1.isSpecialChar(gl)) {

@@ -146,5 +142,5 @@ pi--;

get goalStringArray() {
const { goalString: goal, previousString: previous } = this, goalArray = this.options.html ? utils_1.htmlToArray(goal) : Array.from(goal);
const { goalString: goal, previousString: previous, options } = this, goalArray = options.html ? utils_1.htmlToArray(goal) : Array.from(goal);
const prevGtGoal = Math.max(previous.length - goalArray.length, 0);
goalArray.push(...' '.repeat(prevGtGoal));
goalArray.push(...utils_1.arrayOfTheSame(options.space, prevGtGoal));
return goalArray;

@@ -170,3 +166,3 @@ }

const diff = Math.max(goal.length - result.length, 0);
if (diff > 0)
if (diff > 0 && this.options.space !== '')
result = result.padEnd(diff, ' ');

@@ -173,0 +169,0 @@ return result;

@@ -1,2 +0,2 @@

import { OptionsFields, ConstructorOptions, RangeOrNumber, AppendedText } from './types';
import { OptionsFields, ConstructorOptions, RangeOrNumber } from './types';
import GlitchedWriter from '.';

@@ -10,5 +10,5 @@ import { PresetName } from './presets';

ghostChance: RangeOrNumber;
maxGhosts: number | 'relative';
maxGhosts: number;
glyphs: string;
glyphsFromString: 'previous' | 'goal' | 'both' | 'none';
glyphsFromString: boolean;
ghostCharset: string;

@@ -18,5 +18,4 @@ oneAtATime: boolean;

startFrom: 'matching' | 'previous' | 'erase';
leadingText: AppendedText | undefined;
trailingText: AppendedText | undefined;
writer: GlitchedWriter;
space: string;
constructor(writer: GlitchedWriter, options?: ConstructorOptions | PresetName);

@@ -30,4 +29,3 @@ get stepsLeft(): number;

get genGhost(): string;
getAppendedText(witch: 'trailing' | 'leading'): string;
setCharset(): void;
}

@@ -5,23 +5,24 @@ "use strict";

const presets_1 = require("./presets");
const sample = require('lodash.sample');
class Options {
constructor(writer, options) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
if (typeof options === 'string')
options = presets_1.presets[options];
options || (options = {});
this.steps = (_a = options.steps) !== null && _a !== void 0 ? _a : presets_1.presets.default.steps;
this.interval = (_b = options.interval) !== null && _b !== void 0 ? _b : presets_1.presets.default.interval;
this.initialDelay = (_c = options.initialDelay) !== null && _c !== void 0 ? _c : presets_1.presets.default.initialDelay;
this.changeChance = (_d = options.changeChance) !== null && _d !== void 0 ? _d : presets_1.presets.default.changeChance;
this.ghostChance = (_e = options.ghostChance) !== null && _e !== void 0 ? _e : presets_1.presets.default.ghostChance;
this.maxGhosts = (_f = options.maxGhosts) !== null && _f !== void 0 ? _f : presets_1.presets.default.maxGhosts;
this.glyphs = (_g = utils_1.parseCharset(options.glyphs)) !== null && _g !== void 0 ? _g : presets_1.presets.default.glyphs;
this.glyphsFromString =
(_h = options.glyphsFromString) !== null && _h !== void 0 ? _h : presets_1.presets.default.glyphsFromString;
this.ghostCharset = this.glyphs;
this.oneAtATime = (_j = options.oneAtATime) !== null && _j !== void 0 ? _j : presets_1.presets.default.oneAtATime;
this.html = (_k = options.html) !== null && _k !== void 0 ? _k : presets_1.presets.default.html;
this.startFrom = (_l = options.startFrom) !== null && _l !== void 0 ? _l : presets_1.presets.default.startFrom;
this.writer = writer;
this.steps = (_a = options.steps) !== null && _a !== void 0 ? _a : [1, 6];
this.interval = (_b = options.interval) !== null && _b !== void 0 ? _b : [50, 150];
this.initialDelay = (_c = options.initialDelay) !== null && _c !== void 0 ? _c : [0, 1500];
this.changeChance = (_d = options.changeChance) !== null && _d !== void 0 ? _d : 0.6;
this.ghostChance = (_e = options.ghostChance) !== null && _e !== void 0 ? _e : 0.15;
this.maxGhosts = (_f = options.maxGhosts) !== null && _f !== void 0 ? _f : 'relative';
this.glyphs = (_g = utils_1.parseCharset(options.glyphs)) !== null && _g !== void 0 ? _g : presets_1.glyphs.full + presets_1.glyphs.zalgo;
this.glyphsFromString = (_h = options.glyphsFromString) !== null && _h !== void 0 ? _h : 'none';
this.ghostCharset = this.glyphs;
this.oneAtATime = (_j = options.oneAtATime) !== null && _j !== void 0 ? _j : false;
this.html = (_k = options.html) !== null && _k !== void 0 ? _k : false;
this.startFrom = (_l = options.startFrom) !== null && _l !== void 0 ? _l : 'matching';
this.leadingText = (_m = options.leadingText) !== null && _m !== void 0 ? _m : undefined;
this.trailingText = (_o = options.trailingText) !== null && _o !== void 0 ? _o : undefined;
this.space = options.fillSpace ? ' ' : '';
}

@@ -44,35 +45,22 @@ get stepsLeft() {

get genMaxGhosts() {
var _a;
if (this.maxGhosts === 'relative')
return Math.round((((_a = this.writer.goalString) === null || _a === void 0 ? void 0 : _a.length) || 25) * 0.25);
return this.maxGhosts;
if (Number.isInteger(this.maxGhosts))
return this.maxGhosts;
let length;
if (this.writer.options.html)
length = utils_1.filterHtml(this.writer.goalString).length;
else
length = this.writer.goalString.length;
return Math.round((length || 20) * this.maxGhosts);
}
get genGhost() {
var _a;
return (_a = utils_1.randomChild(this.ghostCharset)) !== null && _a !== void 0 ? _a : '';
return (_a = sample(this.ghostCharset)) !== null && _a !== void 0 ? _a : '';
}
getAppendedText(witch) {
const text = witch === 'trailing' ? this.trailingText : this.leadingText;
if (!text)
return '';
if (text.display === 'always' ||
(text.display === 'when-typing' && this.writer.state.isTyping) ||
(text.display === 'when-not-typing' && !this.writer.state.isTyping))
return text.value;
return '';
}
setCharset() {
let charset = this.glyphs;
if (this.glyphsFromString !== 'none') {
const addPrevious = () => (charset += utils_1.filterDuplicates(this.writer.previousString));
const addGoal = () => (charset += utils_1.filterDuplicates(this.writer.goalString));
if (this.glyphsFromString === 'both') {
addPrevious();
addGoal();
}
else if (this.glyphsFromString === 'previous')
addPrevious();
else
addGoal();
}
if (this.glyphsFromString)
charset += utils_1.filterDuplicates(this.writer.previousString +
(this.writer.options.html
? utils_1.filterHtml(this.writer.goalString)
: this.writer.goalString));
this.ghostCharset = charset;

@@ -79,0 +67,0 @@ }

@@ -1,2 +0,2 @@

import { ConstructorOptions } from './types';
import { ConstructorOptions, OptionsFields } from './types';
export declare const glyphs: {

@@ -9,3 +9,3 @@ nier: string;

export declare const presets: {
default: ConstructorOptions;
default: OptionsFields;
nier: ConstructorOptions;

@@ -12,0 +12,0 @@ typewriter: ConstructorOptions;

@@ -6,21 +6,20 @@ "use strict";

nier: '一二三四五六七八九十百千上下左右中大小月日年早木林山川土空田天生花草虫犬人名女男子目耳口手足見音力気円入出立休先夕本文字学校村町森正水火玉王石竹糸貝車金雨赤青白数多少万半形太細広長点丸交光角計直線矢弱強高同親母父姉兄弟妹自友体毛頭顔首心時曜朝昼夜分週春夏秋冬今新古間方北南東西遠近前後内外場地国園谷野原里市京風雪雲池海岩星室戸家寺通門道話言答声聞語読書記紙画絵図工教晴思考知才理算作元食肉馬牛魚鳥羽鳴麦米茶色黄黒来行帰歩走止活店買売午汽弓回会組船明社切電毎合当台楽公引科歌刀番用何',
full: 'ABCDĐEFGHIJKLMNOPQRSTUVWXYZabcdđefghijklmnopqrstuvwxyzĄąĆ毿ŹźŃńóŁłАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư一二三四五六七八九十百千上下左右中大小月日年早木林山川土空田天生花草虫犬人名女男子目耳口手足見音力気円入出立休先夕本文字学校村町森正水火玉王石竹糸貝車金雨赤青白数多少万半形太細広長点丸交光角計直線矢弱強高同親母父姉兄弟妹自友体毛頭顔首心時曜朝昼夜分週春夏秋冬今新古間方北南東西遠近前後内外場地国園谷野原里市京風雪雲池海岩星室戸家寺通門道話言答声聞語読書記紙画絵図工教晴思考知才理算作元食肉馬牛魚鳥羽鳴麦米茶色黄黒来行帰歩走止活店買売午汽弓回会組船明社切電毎合当台楽公引科歌刀番用何ĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/\\&<-+÷×=>$€£¥¢:;,.*•°·…±†‡æ«»¦¯—–~˜¨_øÞ¿▬▭▮▯┐└╛╟╚╔╘╒╓┘┌‖░▒▓○‼⁇⁈⁉‽ℴℵℶℷℸℲ℮ℯ⅁⅂⅃⅄₠₡₢₣₤₥₦₧₨₩₪₫€₭₮₯₰₱₲₳₴₵₶₷₸₹₺₻₼₽₾₿ ',
full: 'ABCDĐEFGHIJKLMNOPQRSTUVWXYZabcdđefghijklmnopqrstuvwxyzĄąĆ毿ŹźŃńóŁłАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư一二三四五六七八九十百千上下左右中大小月日年早木林山川土空田天生花草虫犬人名女男子目耳口手足見音力気円入出立休先夕本文字学校村町森正水火玉王石竹糸貝車金雨赤青白数多少万半形太細広長点丸交光角計直線矢弱強高同親母父姉兄弟妹自友体毛頭顔首心時曜朝昼夜分週春夏秋冬今新古間方北南東西遠近前後内外場地国園谷野原里市京風雪雲池海岩星室戸家寺通門道話言答声聞語読書記紙画絵図工教晴思考知才理算作元食肉馬牛魚鳥羽鳴麦米茶色黄黒来行帰歩走止活店買売午汽弓回会組船明社切電毎合当台楽公引科歌刀番用何ĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/\\&<-+÷×=>$€£¥¢:;,.*•°·…±†‡æ«»¦¯—–~˜¨_øÞ¿▬▭▮▯┐└╛░▒▓○‼⁇⁈⁉‽ℴℵℶℷℸℲ℮ℯ⅁⅂⅃⅄₠₡₢₣₤₥₦₧₨₩₪₫€₭₮₯₰₱₲₳₴₵₶₷₸₹₺₻₼₽₾₿ ',
letterlike: 'ABCDĐEFGHIJKLMNOPQRSTUVWXYZabcdđefghijklmnopqrstuvwxyzĄąĆ毿ŹźŃńóŁłАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơưĂÂÊÔƠƯăâêôơư1234567890',
zalgo: '̴̵̶̷̸̡̢̧̨̛̖̗̘̙̜̝̞̟̠̣̤̥̦̩̪̫̬̭̮̯̰̱̲̳̹̺̻̼͇͈͉͍͎̀́̂̃̄̅̆̇̈̉̊̋̌̍̎̏̐̑̒̓̔̽̾̿̀́͂̓̈́͆͊͋͌̕̚ͅ ̴̵̶̷̸̡̢̧̨͓͔͕͖͙͚̖̗̘̙̠̣̤̥̦̩̰̱̲̳̹͇͈͉͓͔͕͖͙͐͑͒͗͛ͣͤͥͦͧͨͩͪͫͬͭͮͯ̀́̂̃̄̅̆̇̈̉̐̑̒̓̔̀́͂̓̈́͆͐͑͒͗ͣͤͥͦͧͨͩ͘̕͘͜͟͢͢͝͞͠͡͠͡ͅ',
zalgo: '̴̵̶̷̸̡̢̧̨̛̖̗̘̙̜̝̞̟̠̣̤̥̦̩̪̫̬̭̮̯̰̱̲̳̹̺̻̼͇͈͉͍͎̀́̂̃̄̅̆̇̈̉̊̋̌̍̎̏̐̑̒̓̔̽̾̿̀́͂̓̈́͆͊͋͌̕̚ͅ ͓͔͕͖͙͚͐͑͒͗͛ͣͤͥͦͧͨͩͪͫͬͭͮͯ͘͜͟͢͝͞͠͡͏҉',
};
exports.presets = {
default: {
steps: [1, 7],
interval: [50, 200],
initialDelay: [0, 1700],
steps: [1, 8],
interval: [60, 170],
initialDelay: [0, 2000],
changeChance: 0.6,
ghostChance: 0.15,
maxGhosts: 'relative',
glyphs: exports.glyphs.full,
glyphsFromString: 'none',
ghostChance: 0.2,
maxGhosts: 0.2,
glyphs: exports.glyphs.full + exports.glyphs.zalgo,
glyphsFromString: false,
oneAtATime: false,
html: false,
fillSpace: true,
startFrom: 'matching',
leadingText: undefined,
trailingText: undefined,
},

@@ -36,3 +35,3 @@ nier: {

startFrom: 'erase',
glyphsFromString: 'both',
glyphsFromString: true,
},

@@ -46,3 +45,3 @@ typewriter: {

glyphs: '',
glyphsFromString: 'both',
glyphsFromString: true,
oneAtATime: true,

@@ -60,17 +59,14 @@ startFrom: 'erase',

startFrom: 'erase',
trailingText: {
value: '_',
display: 'when-typing',
},
},
zalgo: {
initialDelay: [0, 3000],
interval: [10, 40],
steps: [0, 55],
maxGhosts: 30,
interval: [10, 35],
steps: [0, 42],
maxGhosts: 4.5,
changeChance: 0.2,
ghostChance: 0.5,
ghostChance: 0.6,
glyphs: exports.glyphs.zalgo,
glyphsFromString: 'both',
glyphsFromString: true,
fillSpace: false,
},
};

@@ -5,2 +5,3 @@ import GlitchedWriter from '.';

nGhosts: number;
maxGhosts: number;
isTyping: boolean;

@@ -10,2 +11,3 @@ isPaused: boolean;

constructor(writer: GlitchedWriter);
get ghostsInLimit(): boolean;
play(): void;

@@ -12,0 +14,0 @@ pause(): void;

@@ -11,3 +11,7 @@ "use strict";

this.writer = writer;
this.maxGhosts = this.writer.options.genMaxGhosts;
}
get ghostsInLimit() {
return this.nGhosts < this.maxGhosts;
}
play() {

@@ -18,2 +22,3 @@ this.isTyping = true;

this.toggleClass(true);
this.maxGhosts = this.writer.options.genMaxGhosts;
}

@@ -31,3 +36,3 @@ pause() {

toggleClass(enable) {
const el = this.writer.htmlElement, className = 'glitched-writer--writing';
const el = this.writer.htmlElement, className = 'gw-writing';
if (!el)

@@ -34,0 +39,0 @@ return;

@@ -16,13 +16,12 @@ import GlitchedWriter from '.';

ghostChance: RangeOrNumber;
maxGhosts: number | 'relative';
maxGhosts: number;
glyphs: string;
glyphsFromString: 'previous' | 'goal' | 'both' | 'none';
glyphsFromString: boolean;
oneAtATime: boolean;
html: boolean;
startFrom: 'matching' | 'previous' | 'erase';
leadingText: AppendedText | undefined;
trailingText: AppendedText | undefined;
}
export declare type ConstructorOptions = ModifyInterface<Partial<OptionsFields>, {
glyphs?: string | string[] | Set<string>;
fillSpace?: boolean;
}>;

@@ -29,0 +28,0 @@ export interface WriteOptions {

import { RangeOrNumber } from './types';
export declare function random(min: number, max: number, math?: 'floor' | 'round' | 'ceil'): number;
export declare function randomChild<T>(array: Array<T>): T;
export declare function randomChild(array: string): string;
export declare function filterDuplicates(iterable: string): string;

@@ -14,3 +12,2 @@ export declare function filterDuplicates<T>(iterable: Array<T>): Array<T>;

export declare const animateWithClass: (element: HTMLElement | Element, className: string) => void;
export declare const reverseString: (str: string) => string;
export declare function getRandomFromRange(range: RangeOrNumber, round?: boolean): number;

@@ -17,0 +14,0 @@ export declare const coinFlip: (p?: number) => boolean;

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.isSpecialChar = exports.filterHtml = exports.htmlToArray = exports.coinFlip = exports.getRandomFromRange = exports.reverseString = exports.animateWithClass = exports.isInRange = exports.arrayOfTheSame = exports.promiseWhile = exports.wait = exports.deleteRandom = exports.parseCharset = exports.filterDuplicates = exports.randomChild = exports.random = void 0;
exports.isSpecialChar = exports.filterHtml = exports.htmlToArray = exports.coinFlip = exports.getRandomFromRange = exports.animateWithClass = exports.isInRange = exports.arrayOfTheSame = exports.promiseWhile = exports.wait = exports.deleteRandom = exports.parseCharset = exports.filterDuplicates = exports.random = void 0;
/* eslint-disable no-unused-vars */

@@ -21,6 +21,2 @@ function random(min, max, math) {

exports.random = random;
function randomChild(array) {
return array[random(0, array.length, 'floor')];
}
exports.randomChild = randomChild;
function filterDuplicates(iterable) {

@@ -71,4 +67,2 @@ const isString = typeof iterable === 'string', result = [];

exports.animateWithClass = animateWithClass;
const reverseString = (str) => str.split('').reverse().join('');
exports.reverseString = reverseString;
function getRandomFromRange(range, round = true) {

@@ -75,0 +69,0 @@ return typeof range === 'number'

{
"name": "glitched-writer",
"version": "2.0.5",
"version": "2.0.6",
"description": "Glitched text-writer module, with highly customizable settings to get the effect You're looking for. Generally for web as a client dependency, but can be also used elswere.",

@@ -19,5 +19,11 @@ "author": "Damian Tarnawski @thetarnav <gthetarnav@gmail.com>",

"start": "nodemon src/index.ts",
"dev": "parcel dev/index.html",
"build": "tsc"
},
"dependencies": {
"lodash.sample": "^4.2.1"
},
"devDependencies": {
"@parcel/transformer-sass": "^2.0.0-beta.2",
"@types/lodash.sample": "^4.2.6",
"@typescript-eslint/eslint-plugin": "^4.18.0",

@@ -28,3 +34,5 @@ "@typescript-eslint/parser": "^4.18.0",

"eslint-plugin-import": "^2.22.1",
"lodash.debounce": "^4.0.8",
"nodemon": "^2.0.7",
"parcel": "^2.0.0-beta.2",
"ts-node": "^9.1.1",

@@ -31,0 +39,0 @@ "typescript": "^4.2.3"

# Glitched Writer
![npm](https://img.shields.io/npm/v/glitched-writer) [![npm type definitions](https://img.shields.io/npm/types/glitched-writer)](https://www.npmjs.com/package/glitched-writer) [![](https://data.jsdelivr.com/v1/package/npm/glitched-writer/badge?style=rounded)](https://www.jsdelivr.com/package/npm/glitched-writer) [![NPM](https://img.shields.io/npm/l/glitched-writer)](https://www.npmjs.com/package/glitched-writer)
[![npm](https://img.shields.io/npm/v/glitched-writer)](https://www.npmjs.com/package/glitched-writer) [![npm type definitions](https://img.shields.io/npm/types/glitched-writer)](https://www.npmjs.com/package/glitched-writer) [![](https://data.jsdelivr.com/v1/package/npm/glitched-writer/badge?style=rounded)](https://www.jsdelivr.com/package/npm/glitched-writer) [![NPM](https://img.shields.io/npm/l/glitched-writer)](https://www.npmjs.com/package/glitched-writer)

@@ -21,5 +21,5 @@ [![glitched-writer-preview](https://user-images.githubusercontent.com/24491503/67164275-06ab6900-f379-11e9-81ac-cab76dbc8dcd.gif)](https://codepen.io/thetarnav/pen/MWWyPzY)

- Events **gw_finished** and **gw_step** are dispatched on the HTML Element.
- Events **gw-finished** and **gw-step** are dispatched on the HTML Element.
- For styling purposes, while writing: attatches **glitched-writer--writing** class to the HTML Element and **data-string attribute** with current string state.
- For styling purposes, while writing: attatches **gw-writing** class to the HTML Element and **data-gw-string attribute** with current string state.

@@ -47,3 +47,3 @@ - Written in **Typescript**.

```html
<script src="https://cdn.jsdelivr.net/npm/glitched-writer@2.0.0/lib/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/glitched-writer@2.0.6/lib/index.min.js"></script>
```

@@ -187,3 +187,3 @@

- **terminal** - _Imitating being typed by a machine._
- **zalgo** - _Inspired by "the zalgo text", Ghost characters mostly includes the unicode combining characters, which makes the text glitch vertically._
- **zalgo** - _Inspired by the "zalgo" or "cursed text", Ghost characters mostly includes the unicode combining characters, which makes the text glitch vertically._

@@ -210,21 +210,16 @@ ```js

{
steps?: RangeOrNumber, // [1, 6]
interval?: RangeOrNumber, // [50, 150]
initialDelay?: RangeOrNumber, // [0, 1500]
steps?: RangeOrNumber, // [1, 8]
interval?: RangeOrNumber, // [60, 170]
initialDelay?: RangeOrNumber, // [0, 2000]
changeChance?: RangeOrNumber, // 0.6
ghostChance?: RangeOrNumber, // 0.15
maxGhosts?: number | 'relative', // 'relative'
glyphs?: string | string[] | Set<string>, // glyphs.full
glyphsFromString?: 'previous' | 'goal' | 'both' | 'none', // 'none'
ghostChance?: RangeOrNumber, // 0.2
maxGhosts?: number, // '0.2'
glyphs?: string | string[] | Set<string>, // glyphs.full + glyphs.zalgo
glyphsFromString?: boolean // false
startFrom?: 'matching' | 'previous' | 'erase', // 'matching'
oneAtATime?: boolean, // false
html?: boolean, // false
startFrom?: 'matching' | 'previous' | 'erase', // 'matching'
leadingText?: AppendedText, // undefined
trailingText?: AppendedText // undefined
fillSpace?: boolean // true,
}
interface AppendedText {
value: string
display: 'always' | 'when-typing' | 'when-not-typing'
}
type RangeOrNumber = [number, number] | number

@@ -244,11 +239,7 @@ ```

- **ghostChance** - _Percentage Chance for ghost letter to appear_
- **maxGhosts** - _Max number of ghosts for entire string_
- **maxGhosts** - _Maximal number of ghosts to occur_
- **int** - _(eg. 15) -> this will be the limit._
- **float** - _(eg. 0.25) -> Limit = maxGhosts \* goalString.length_
- **glyphs** - _A set of characters that can appear as ghosts or letters can change into them_
- **glyphsFromString** - _If you want to add letters from string to the glyph charset_
- 'previous' - appends leters from starting string
- 'goal' - appends leters from goal string
- 'both' - appends leters both of them
- 'none' - leaves the glyph charset be
- **oneAtATime** - _If writing should take place from left-to-right, letter-by-letter or normally: all-at-once._
- **html** - Potentially dangerous option. If true, written string will be injected as html, not text content. It provides advanced text formating with html tags and more. But be sure to not enable it on user-provided content.
- **glyphsFromString** - _If you want to add letters from written string to the glyph charset_
- **startFrom** - _Decides on witch algorithm to use._

@@ -258,5 +249,5 @@ - 'matching' - Will scan starting and goal string for matching characters and will try to build character map from that.

- 'erase' - First Erases entire string and then writes from blank space.
- **leadingText** and **trailingText** - _Former adds stuff to the begining and latter to the end._
- value - _Whats gets added_
- display - _When_: 'always' or 'when-typing' or 'when-not-typing'
- **oneAtATime** - _If writing should take place from left-to-right, letter-by-letter or normally: all-at-once._
- **html** - Potentially dangerous option. If true, written string will be injected as html, not text content. It provides advanced text formating with html tags and more. But be sure to not enable it on user-provided content.
- **fillSpace** - _Normally if letter gets erased it actually gets replaced with space instead - to make words appear from and disappear into space, rather then sticking to the rest of the words. Set to false if you want to disable this._

@@ -263,0 +254,0 @@ ## Links:

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc