https://github.com/vdegenne/type-writer

Web Component that simulates someone typing live on the keyboard
https://github.com/vdegenne/type-writer

Last synced: about 2 months ago
JSON representation

Web Component that simulates someone typing live on the keyboard

• Host: GitHub
• URL: https://github.com/vdegenne/type-writer
• Owner: vdegenne
• Created: 2019-10-09T14:02:33.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T22:24:15.000Z (about 2 years ago)
• Last Synced: 2024-11-07T01:18:52.814Z (about 2 months ago)
• Language: TypeScript
• Size: 146 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# @vdegenne/type-writer

A Web Component that simulates someone typing live on the keyboard.



## Usage

```html

  This is the first line

  This is a second line

  This is the last line

```

[Demo](https://type-writer.glitch.me/)

### Styles

You can style the element using basic css :

```html

  type-writer {

    color: red;

    font-size: 20px;

  }

```

You can also chose a color for the caret :

```html

  type-write {

    --caret-color: red;

  }

```

## Installation

```npm i @vdegenne/type-writer```

To use it, you can use a server that resolve node module live, and directly use it in your page :

```html

```

Or in your application (e.g. typescript)

```typescript

import '@vdegenne/type-writer'

```

## Options (with defaults)

```html

  speedMultiplier="1" 

  timeBetween="3" 

  caretBlinkingSpeed="600" 

>

  ...

  ...

  ...

  ...

```

## Demo

To try this live :

- clone this repository

- install the dependencies : `npm i`

- run the demo: `npm run demo`

## Contact

vdegenne (at) gmail (dot) com