WP Manifestindependent plugin directory
manifest / seo / exzent-typewriter

Exzent Typewriter

Human-like typewriter animation for rotating text. Vanilla JS, no dependencies. SEO-friendly with preserved initial DOM state.

by EXZENT · github.com/exzenter/exzent-typewriter · website

★ 1stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/exzenter/exzent-typewriter/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/exzenter/exzent-typewriter ↗

Exzent Typewriter — WordPress Block Plugin

https://exzent.de

Human-like typewriter animation for rotating text. Zero dependencies, ~2KB JS.

Features

  • Vanilla JS — kein GSAP, keine externen Libraries
  • Human-like Typing — variable Keystroke-Delays mit gelegentlichen Pausen
  • SEO-friendly — Server-Side Rendering, initialer DOM-State bleibt für Crawler erhalten
  • Accessibility — prefers-reduced-motion Support, Screen-Reader-Text mit allen Wörtern
  • Performance — IntersectionObserver (animiert nur wenn sichtbar), pausiert bei Tab-Wechsel
  • Gutenberg Block — Wörter im Editor verwalten, Timing per Slider, Live-Preview

Installation

  1. Ordner exzent-typewriter nach wp-content/plugins/ kopieren
  2. Plugin im WordPress-Admin aktivieren
  3. Im Editor: Block "Typewriter" einfügen

Dateien

exzent-typewriter/
├── exzent-typewriter.php   # Plugin-Hauptdatei (nur Bootstrap)
├── block.json              # Block-Definition, Attributes, Asset-Mapping
├── render.php              # Server-Side Rendering (SEO)
├── editor.js               # Gutenberg Block (Edit UI)
├── editor.css              # Editor-only Styles (scoped)
├── typewriter.js            # Frontend Animation (~2KB)
├── typewriter.css           # Frontend Cursor-Styles (scoped, ~0.3KB)
└── README.md

Einstellungen (Block Sidebar)

Wörter

  • Statischer Text — Zeile 1, wird nicht animiert
  • Prefix — Text vor jedem rotierenden Wort (z.B. "Und ")
  • Rotierende Wörter — Liste, Reihenfolge per Drag änderbar

Timing

  • Tippgeschwindigkeit — Basis-Delay pro Zeichen (30–200ms)
  • Löschgeschwindigkeit — Basis-Delay beim Löschen (20–150ms)
  • Pause zwischen Wörtern — Wartezeit bevor nächstes Wort kommt
  • Startverzögerung — Wartezeit bis Animation beginnt
  • Menschliches Tippen — Variable Delays an/aus

Darstellung

  • HTML-Tag — p, div, span, h2, h3
  • Ausrichtung — links, zentriert, rechts
  • Cursor — an/aus, Zeichen wählbar

SEO

  • Der initiale DOM enthält den statischen Text + erstes Wort
  • Alle Wörter sind als screen-reader-text im HTML
  • JS enhanced progressiv — ohne JS sieht man den Basis-Text
  • <p> Tag default — H-Tags sollten nicht für animierten Text verwendet werden

Performance

  • ~2KB JS (minified), ~1KB gzipped
  • Kein Layout Shift — Text-Container behält seine Größe
  • IntersectionObserver — Animation startet nur wenn Element im Viewport
  • Page Visibility API — Animation pausiert wenn Tab nicht sichtbar
  • Kein requestAnimationFrame-Loop — nur setTimeout-Chain bei Bedarf