npm

Need private packages and team management tools?Check out npm Orgs. »

shabdawali

2.2.3 • Public • Published

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

install

npm i shabdawali

Downloadsweekly downloads

5

version

2.2.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability