शब्दावली (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')
);