Awesome

<typing-effect> element

A custom element that shows text as if it were being typed

Installation

$ npm install @github/typing-effect-element

Usage

import '@github/typing-effect-element'

<typing-effect data-lines='["Welcome to GitHub!", "Let’s begin the adventure"]'>
  <span data-target="typing-effect.content"></span>
  <span data-target="typing-effect.cursor">|</span>
</typing-effect>

Accessibility

This component detects whether prefers-reduced-motion is set on the window:

window.matchMedia('(prefers-reduced-motion)').matches === true

If this evaluates to true, any content lines provided will be appended immediately rather than being typed out with a delay.

Browser support

Browsers without native custom element support require a polyfill.

• Chrome
• Firefox
• Safari
• Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.