open-index/open-npm huggingface dataset:
npm package: @rodat.dev/typewriter
Description: a web component module for a typewriter HTML element
Author: rodat-dev
Latest version: 1.0.4

# Typewriter
A webcomponent that animates typing like a typewriter.

## Usage:
```html
<script src="typewriter.min.js" type="module"></script>
<type-writer>
    <p>Text I want to animate</p>
</type-writer>
```

## HTML component properties
```javascript
    this.height = this.getAttribute("height") || "max-content";
    this.width = this.getAttribute("width") || "20ch";
    this.fontSize = this.getAttribute("font-size") || "inherit";
    this.fontFamily = this.getAttribute("font") || "Futura";
    this.animationDuration = this.getAttribute("animation-duration").split(",").map(s => Number(s.trim())) || [5];
    this.sentenceDelay = this.getAttribute("sentence-delay").split(",").map(s => Number(s.trim())) || [1];
    console.log(this.sentenceDelay);
    this.initialDelay = Number(this.getAttribute("initial-delay")) || 0.5;
    this.clearBetweenParagraphs = Boolean(this.getAttribute("clear-paragraphs")) || false;
    this.stopBlinkingAfter = Boolean(this.getAttribute("stop-blink")) || false;
```

## CSS Shadow Root properties
```javascript
    this.shadowRoot.host.style.setProperty("--ff", this.fontFamily);
    this.shadowRoot.host.style.setProperty("--fs", this.fontSize);
    this.shadowRoot.host.style.setProperty("--h", this.height);
    this.shadowRoot.host.style.setProperty("--w", this.width);
```;