/alpine-typewriter

Alpine.js plugin to add a typewriter effect to any HTML element.

Primary LanguageJavaScriptMIT LicenseMIT

⌨️ Alpine Typewriter ⌨️

An Alpine.js plugin to add a typewriter effect to any HTML element.

version Build size downloads JSDelivr GitHub Gitmoji

hero

🚀 Installation

CDN

Include the following <script> tag in the <head> of your document, just before Alpine.

<script src="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-typewriter/dist/alpine-typewriter.min.js" defer></script>

NPM

npm install @marcreichel/alpine-typewriter

Add the x-typewriter directive to your project by importing the package before starting Alpine.

import Alpine from 'alpinejs';
import Typewriter from '@marcreichel/alpine-typewriter';

Alpine.plugin(Typewriter);

Alpine.start();

🪄 Usage

Simply add the x-typewriter directive to any HTML element and provide the texts which should be cycled through.

<span x-data="{ texts: ['Hello', 'World'] }" x-typewriter="texts"></span>

Adjust the speed

By default, a text stays for 2 seconds before being swapped out. This behavior may be adjusted using a modifier like so:

<span x-data="{ texts: ['Hello', 'World'] }" x-typewriter.5s="texts"></span>

or

<span x-data="{ texts: ['Hello', 'World'] }" x-typewriter.3000ms="texts"></span>

Add an animated cursor

To add a blinking cursor add the cursor modifier like so:

<span x-data="{ texts: ['Hello', 'World'] }" x-typewriter.cursor="texts"></span>

📄 License

Copyright (c) 2023 Marc Reichel and contributors.

Licensed under the MIT license, see LICENSE for details.