# typing-effect-element

**Repository Path**: mirrors_github/typing-effect-element

## Basic Information

- **Project Name**: typing-effect-element
- **Description**: A custom element that shows text as if it were being typed
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-21
- **Last Updated**: 2025-10-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# <typing-effect> element

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

## Installation

```
$ npm install @github/typing-effect-element
```

## Usage

```js
import '@github/typing-effect-element'
```

```html
<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:

```js
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][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.