WP Manifestindependent plugin directory
manifest / editor / block-typing-effects

Typing Effects

Create engaging typing animations on your core WordPress blocks with typewriter, Matrix-style, and hybrid effects.

by WordPress Telex · github.com/tomfinitely/block-typing-effects

★ 3stars

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/tomfinitely/block-typing-effects/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/tomfinitely/block-typing-effects ↗

WordPress Telex, Tom Finley Tags: block, typing, animation, typewriter, matrix, effects Tested up to: 6.8 Stable tag: 0.2.0 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html

Create engaging typing animations with typewriter, Matrix-style, and hybrid effects.

Description

The Typing Effects block brings your text to life with three distinct animation styles:

  • Typewriter Effect: Classic character-by-character typing animation with a blinking cursor
  • Matrix Shuffle: Each character randomly shuffles through different letters before settling on the final character
  • Hybrid Mode: Combines both effects for a unique typing experience with character shuffling

Perfect for:

  • Landing pages and hero sections
  • Code demonstrations and terminal simulations
  • Creative storytelling and engaging content
  • Adding dynamic elements to static text

The block includes customizable settings for typing speed, animation delays, and styling options to match your site's design.

Installation

  1. Upload the plugin files to the /wp-content/plugins/typing-effects directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the 'Plugins' screen in WordPress
  3. Add the "Typing Effects" block to any post or page
  4. Enter your text and choose your preferred animation style

Frequently Asked Questions

Can I customize the typing speed?

Yes! The block includes speed controls in the inspector panel where you can adjust both the typing speed and shuffle animation speed.

Does it work on mobile devices?

Absolutely! The animations are optimized to work smoothly across all devices and screen sizes.

Can I use HTML in the text?

The block supports rich text formatting including bold, italic, links, and other basic HTML elements.

Screenshots

  1. The block editor interface showing the typing effects options
  2. Typewriter effect in action on the frontend
  3. Matrix shuffle effect demonstration

Changelog

0.2.0

  • Scroll-triggered animations using Intersection Observer
  • Unix-style cursor (>) for hybrid effect
  • Removed cursors from typewriter and matrix effects
  • Lighter cursor color with brightness filter
  • Lazy loading support
  • Fixed layout shift issues
  • Fixed cursor positioning bugs

0.1.0

  • Initial release with typewriter, Matrix shuffle, and hybrid effects
  • Customizable speed controls
  • Rich text support
  • Mobile-optimized animations

Features

  • Three distinct animation modes
  • Adjustable typing and shuffle speeds
  • Rich text formatting support
  • Responsive design
  • Lightweight and performant
  • Easy-to-use interface