शब्दावली (shabdawali)
Amazing human-like typing effects with typo, events, dynamic speed and more
Features
- Amazing human-like typing effects beyond your imagination.
- It does typo, and corrects them.
- It mimics humar style by dynamic speed and pauses to type/delete sentences.
- Small size 1.5k.
- No dependency.
- CPU friendly.
- Can be used as a jQuery plugin, React component, or with other libraries.
- You can fully control it's behavior.
- You can use it for playing music notes, typing demos, typing posts on devRant, Twitter and Github.
- Check http://amitkumargupta.work for a live demo.
How to use
You can either install it through npm ,or download js from dist folder or directly refer to CDN.
npm i shabdawali
var shabdawali = ; // this line is needed only for nodejs users
Configuration
Speed
You can control typing speed, deleting speed, pauses etc. using the following configuration:
typingSpeed : 75 dynamicPauseBeforeDelete : true pauseBeforeDelete : 2000 pauseBeforeNext : 1000 delay : 0
Effects
You can enable/disable effects:
typoEffect : false repeat : true deleteEffect : true dynamicPause : true
Events
You may want to play music on a piano with key press effects. Events can help you:
{...}; {...}; {...};
playback events:
var me = me;me;
Some ideas
- Keyboard typing effect.
- Piano playing effect.
- Typewriter strike effect.
- Number dial effect.
- Background change.
- Whatever you can think of...
Spelling Correction
By default Shabdawali looks for words longer than 4 letters, and randomly applies typo effects on a maximum of 1 word per sentence. Here is the configuration:
max : 1 // Maximum number of typos per line minWordLength : 5 //skip words which are smaller than 5 characters extendedRange : 3 //How long to type before correction effect skip : 2 //how many letters from the starting of a word should be left randomFactor : 4 //higher the value lesser the chance to pick a word for typo effect
You can override checkIfFitsForTypoEffect(word)
to apply your logic to check if shabdawali would apply typo effects on current word.
Currently Shabdawali shuffles the letters of a word randomly to apply typo effects. But you can change this behavior by overriding makeTypo()
.
Some ideas
- Apply typo effect on particular words or particular lines.
- Apply typo effect only on particular type of words.
- Apply the effects like;
- missing vowels.
- shuffle only 2-3 letters.
- writing wrong spelling or similar words.
- writing completely wrong sentences.
- writing slang and then star/mask them.
- whatever you can think of...
Replaceable
When you don't want to make a sentence longer and don't want your reader to read the same sentence again-n-again, you can set replaceable: true
to delete only uncommon parts.
E.g:
"I have worked in India"
"I have worked in Japan"
"I have worked in England"
Playback
You can pause/resume the animation whenever you want:
var amit = ; amitstart3;//pause after typing 3 sentencesamit;//pause after typing next 3 sentencesamit; //pause manuallyamit; //resume previously paused typing
Integration with other JS libraries
Jquery Plugin
(function($){ $.fn.shabdawali = function(options) { return this.each(function() { shabdawali($(this), options); });}; })(jQuery);
Riot JS Tag
React component
//-- check https://github.com/amitguptagwl/shabdawali for more detail Component { superprops; } { var props = lines: "शब्दावली (shabdawali)" "It can be used as a React component as well" ; ; } { return <span ref= { thisel = el; }>thispropschildren</span>; } ReactDOM;
Worth to check
- BigBit standard) : A standard to reprent any number in the universe in comparitively less space and without precision loss. A standard to save space to represent any text string in comparision of UTF encoding.
- imglab : Speedup and simplify image labeling / annotation. Supports multiple formats, one click annotation, easy
- वार्ता (vaarta) : Human like chatting effects.