<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.

npm i @snappywc/typer

import '@snappywc/typer'

Option 2: In your markup.

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

Usage

<snappy-typer
  static="Making our neighborhoods stronger through"
  typed="diversity,equity,inclusion"
  typing-speed="120"
  word-delay="5000"
  next-delay="200"
></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

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

CSS Variables

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

snappy-typer {
  --caret: '|';
  --caret-color: currentcolor;
}