https://github.com/github/typing-effect-element
A custom element that shows text as if it were being typed
https://github.com/github/typing-effect-element
custom-elements keep web-components
Last synced: 10 months ago
JSON representation
A custom element that shows text as if it were being typed
- Host: GitHub
- URL: https://github.com/github/typing-effect-element
- Owner: github
- License: mit
- Created: 2021-04-09T00:57:48.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-03-14T21:11:11.000Z (almost 2 years ago)
- Last Synced: 2025-04-03T01:12:02.749Z (10 months ago)
- Topics: custom-elements, keep, web-components
- Language: JavaScript
- Homepage: https://github.github.com/typing-effect-element/examples/
- Size: 121 KB
- Stars: 118
- Watchers: 6
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
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
|
```
## 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.