Awesome
शब्दावली (shabdawali)
<img src="static/shabdawali_logo.png" width="80px"> Amazing human-like typing effects with typo, events, dynamic speed and more
<div align="center"><img src="static/shabdawali.gif"></div>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 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.