⌨️
Alpine Typewriter
⌨️
An Alpine.js plugin to add a typewriter effect to any HTML element.
🚀
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@latest/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>
📄
License
Copyright (c) 2022 Marc Reichel and contributors.
Licensed under the MIT license, see LICENSE for details.
42 Nov 5, 2022
277 Nov 25, 2022
61 Jan 7, 2023
14 Oct 3, 2022
11 Dec 28, 2022
12 Nov 25, 2022
2 Oct 12, 2021
2 Aug 22, 2022
5 May 13, 2021