@devmansam/type-writer-effect

v1.0.0

Published

6 months ago

A lightweight, responsive, customizable, typewriter effect web component

Downloads

0High
0Medium
0Low

devmansam

web-component custom-element typewriter typewriter-effect ui-component lightweight

Typewriter Web Component

Typewriter effect demo

A reusable web component that creates a classic typewriter effect with customizable styling. The component displays phrases character by character, simulating the look and feel of an old typewriter, then deletes the text before displaying the next phrase.

Features

Classic typewriter animation with realistic timing variations
Blinking cursor effect
Customizable font size, color, weight, and family
Works on any background
Fully encapsulated with Shadow DOM
No external dependencies
Responsive and accessible

Installation

Option 1: CDN (No build tools required)

The simplest way. Just add this script tag to your HTML:

<script src="https://cdn.jsdelivr.net/gh/DevManSam777/typewriter-web-component@main/typewriter-component.js"></script>

Option 2: npm with a bundler (Vite, Webpack, Parcel, etc.)

If you're using a build tool:

npm install @devmansam/type-writer-effect

Then import in your JavaScript:

import '@devmansam/type-writer-effect';

Add to your HTML:

<typewriter-effect phrases='["Hello World!"]'></typewriter-effect>

Option 3: npm without a bundler

If you installed via npm but aren't using a bundler, you need to use the full path:

<script type="module" src="./main.js"></script>
<typewriter-effect phrases='["Hello World!"]'></typewriter-effect>

In main.js:

import './node_modules/@devmansam/type-writer-effect/typewriter-component.js';

Usage

Basic Usage

<typewriter-effect
  phrases='["Hello World!", "Welcome!", "Enjoy the effect!"]'
></typewriter-effect>

Custom Styling

<typewriter-effect
  phrases='["Custom text!", "Any color!", "Any size!"]'
  font-size="2rem"
  color="#e74c3c"
  font-family="Courier New, monospace"
  font-weight="bold"
>
</typewriter-effect>

Inline Usage

<p>
  This is text with
  <typewriter-effect
    phrases='["inline typing"]'
    style="display: inline;"
  ></typewriter-effect>
  in it.
</p>

Styling

The component provides attributes for text styling (font, color, size, weight). For layout and positioning styles, use the style attribute on the component:

<typewriter-effect
  phrases='["Centered text!", "With custom spacing!"]'
  style="display: block; text-align: center; margin: 20px 0; padding: 10px;"
>
</typewriter-effect>

Note: Due to Shadow DOM encapsulation, only layout/positioning styles work with the style attribute (display, margin, padding, position, text-align, etc.). For text styling, use the component's attributes instead.

Using Google Fonts

To use Google Fonts, import them in your HTML head section and reference them in the font-family attribute:

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap"
    rel="stylesheet"
  />
</head>
<body>
  <typewriter-effect
    phrases='["Using Google Fonts!", "Special Elite font!", "Very stylish!"]'
    font-family='"Special Elite", serif'
  >
  </typewriter-effect>
</body>

Attributes

| Attribute | Description | Default | Example | | -------------- | -------------------------------- | -------------------------- | --------------------------------------------- | | phrases | JSON array of phrases to display | ["Hello World!"] | '["Text 1", "Text 2"]' | | font-size | CSS font size | 3rem | 2rem, 24px, 1.5em | | color | Text color | #333333 | #ff0000, blue, rgb(255,0,0) | | font-family | Font family | "Courier New", monospace | Arial, sans-serif, "Special Elite", serif | | font-weight | Font weight | normal | bold, light, 400 | | cursor-color | Cursor color | Same as text color | #ff0000, blue |

Examples

Default Typewriter

<typewriter-effect
  phrases='["Hello World!", "Welcome to my site!", "This is awesome!"]'
></typewriter-effect>

Large Red Text

<typewriter-effect
  phrases='["Big red text!", "Very noticeable!", "Hard to miss!"]'
  font-size="4rem"
  color="#e53e3e"
>
</typewriter-effect>

Bold Dark Text

<typewriter-effect
  phrases='["Code style text", "Perfect for tech sites", "Developer approved"]'
  color="#2d3748"
  font-weight="bold"
>
</typewriter-effect>

Google Font Style

<typewriter-effect
  phrases='["Special Elite font", "Classic typewriter feel", "Very authentic"]'
  font-family='"Special Elite", serif'
  color="#4a4a4a"
>
</typewriter-effect>

Small Subtitle

<typewriter-effect
  phrases='["Small subtitle", "Elegant and subtle", "Perfect for captions"]'
  font-size="1.2rem"
  color="#666666"
  font-weight="light"
>
</typewriter-effect>

Animation Behavior

Typing Speed: Random variation between 0-300ms per character for natural feel
Deletion Speed: Random variation between 0-150ms per character
End Pause: 2-second pause after each phrase completes before deletion begins
Cursor Blink: 400ms interval with smooth transitions

Browser Support

Works in all modern browsers that support:

Custom Elements (Web Components)
Shadow DOM
ES6 Classes

Notes

The component inherits the background from its parent element
Default font is Courier New for a classic typewriter feel
Import Google Fonts in your HTML head to use custom fonts with the font-family attribute
Phrases should be valid JSON array format
Component is fully self-contained and won't conflict with existing styles

License

LICENSE