<snappy-typer>

A typing element that's easy to use and customize. 0.73kb (brotli).

Demo

Why Make Another Typer Element?

I don't know, why are all the other ones so big?

Installation

Option 1: As a package.

1npm i @snappywc/typer

1import '@snappywc/typer'

Option 2: In your markup.

1<script type="module">
2  import '//unpkg.com/@snappywc/typer'
3</script>

Usage

1<snappy-typer
2  static="Making our neighborhoods stronger through"
3  typed="diversity,equity,inclusion"
4  typing-speed="120"
5  word-delay="5000"
6  next-delay="200"
7></snappy-typer>

Customization

The default styles and part selectors for this element were carefully considered to be as minimal and un-opinionated as possible.

Parts

The following parts are available for styling.

• static (the static text)
• typed (the dynamic text)

Example Use

1snappy-typer::part(typed) {
2  color: red;
3}

CSS Variables

The variables below can be used to customize the caret at the end of the typed text.

1snappy-typer {
2  --caret: '|';
3  --caret-color: currentcolor;
4}