Giter VIP home page Giter VIP logo

ccmars / typecadence Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 0.0 401 KB

Typing animation library that automatically mimics the flaws of a human typist

Home Page: http://typecadence.colemarshall.net/

License: Creative Commons Zero v1.0 Universal

TypeScript 100.00%
animation human-errors javascript javascript-library lightweight typescript typescript-library typing-animation typing-errors typing-simulation

typecadence's People

Contributors

ccmars avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

typecadence's Issues

Demo page with instructions

Add a singular page with a demo of all Typecadence features with instructions on how to use them. Use GitHub Pages.

Type by word

Allow for the animation to optionally print word-by-word rather than letter-by-letter.

Callback

Allow the user to specify a callback once the animation is complete.

Up to amount for mistakes present

Allow mistakes to be present for up to a certain amount. Have each new character check if corrections should be made, at random. The more mistakes present, the more likely the correction will take place.

Start trigger

Instead of starting the animation when the element is visible, allow the user to programmatically start the animation.

Mistake attentiveness

Allow for multiple mistakes to be present at the same time, having the animation backspace over multiple characters to get to the earliest mistake.

Can't specify zero for mistakes

Setting the attribute data-typecadence-mistakes to 0 does not prevent mistakes from being present. This is likely due to seeing 0 as the property not being set. Check line 243 for where the mistakes property is set.

Caret tag options

Allow the user to specify:

  • Caret tag
  • An additional caret class
  • And a caret ID

Mistake attentiveness

It's possible for the animation to go a very long time before the typist realizes there is a mistake and backspaces to correct it.

A new attribute should be introduced that allows the user to define how attentive the typist is. As the animation continues, getting further and further from the first mistake, the typist should be more apt to realize a mistake was made.

Spaces should never be mistakes

Spaces are occasionally erroneously being labeled as mistakes when they should never be mistakes, because there are no alternative mistake characters.

Finish time

Allow the user to specify the amount of time it takes for the animation to complete. Potentially predetermine the speed of each keystroke by dividing that time over each key, including mistakes.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.