nilshendriks.com

Typewriter component

Published on:

Introduction:

Inspired by a client’s retro punk-like typewriter design concept from years ago, I set to transform it into a reusable component for today’s web development landscape. Having previously created a basic version using plain HTML, CSS, and JavaScript, I saw an opportunity to enhance it and make it more usable by creating versions for Vue.js, React, and Web Component frameworks.

Overview

The TypeWriter component provides a customizable typewriter effect for websites and / or web applications. It allows developers to simulate the appearance of text being typed out, character by character.

Usage

  1. Import the component into your Vue.js application:
import TypeWriter from "./path-to/TypeWriter.vue";
  1. add it in HTML
<TypeWriter />
  1. Customize with props
text
The text content to be displayed and typed out by the component.
speed
The typing speed in milliseconds per character.
backgroundColor
The background color of the typewriter area.
textColor
The color of the typed text.
textAlign
The alignment of the typed text.
fontSize
The font size of the typed text.
fontFamily
The font family of the typed text.
fontWeight
The font weight of the typed text.
lineHeight
The line height of the typed text.
letterSpacing
The letter spacing of the typed text.
padding
The padding around the typed text.

Code and Demo

Check out the code and demo on GitHub.

Code Demo