https://github.com/neatnik/typo

Typo is a more natural web typing thing
https://github.com/neatnik/typo

Last synced: about 2 months ago
JSON representation

Typo is a more natural web typing thing

• Host: GitHub
• URL: https://github.com/neatnik/typo
• Owner: neatnik
• License: mit
• Created: 2021-09-10T04:27:34.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-09-10T05:08:45.000Z (over 3 years ago)
• Last Synced: 2024-08-02T16:43:00.372Z (5 months ago)
• Language: JavaScript
• Homepage: https://neatnik.net/typo
• Size: 260 KB
• Stars: 128
• Watchers: 2
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![Typo typing demo](https://raw.githubusercontent.com/neatnik/typo/main/typo-demo.gif)

Typo attempts to improve upon the sterile, flawless animated web typing effect by offering something a little more relatable. Text is typed as if a real person is there. There are variations in the speed between keystrokes, pauses, and of course typos — which sometimes take a moment to be noticed and corrected (but are always corrected). The overall effect just feels more natural — more like a person typing, and less like a computer typing.

## Usage

Add an element to be typed, like this:

```

Typo types the way a real person types. There are subtle variations in speed, occasional errors that are corrected, and a general feeling of humanity.

```


Then just point Typo at it:


```

document.addEventListener('DOMContentLoaded', function() { 

  var element = document.getElementById('typo');

  var text = element.innerHTML;

  typo(element, text);

});

```

## Configuration

You can adjust these three configuration attributes:

- **data-typo-chance**, the percentage chance that any given typed character will be typed incorrectly

- **data-typing-delay**, the delay between keystrokes

- **data-typing-jitter**, the +/- jitter for delays

That’s it. I hope you enjoy it.