README

शब्दावली (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 = require('shabdawali'); // this line is needed only for nodejs users

shabdawali(el, {
    lines : ["sentence 1", "sentence 2"],
    //other configuration
})

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:

{
    onCharChange : function(char){...};
    onLineChange : function(char, lineNumber, line){...};
    nextWord : function(word){...};
}

playback events:

var me = shabdavali(..),
me.on("pause", fn);
me.on("resume", fn);

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 = shabdawali(..);

amit.start(3);//pause after typing 3 sentences
amit.resume(3);//pause after typing next 3 sentences
amit.pause(); //pause manually
amit.resume(); //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

<slate>
    <h1 ref="slat"></h1>
    <script>
        shabdawali(this.refs.slat, this.opts);
    </script>
</slate>

React component

//-- check https://github.com/amitguptagwl/shabdawali for more detail

class Slate extends React.Component {
  constructor (props) {
    super(props);
  }
  
  componentDidMount () {
      var props = { lines: [ "शब्दावली (shabdawali)", "It can be used as a React component as well"]
    };
    shabdawali(this.el, props);
  }
  
  render(){
    return <span ref={(el) => { this.el = el; }}>{this.props.children}</span>;
  }
}

ReactDOM.render(
  <div>
      <Slate />
  </div>,
  document.getElementById('slat')
);

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.

Usage no npm install needed!