Description
Stroke by stroke typing effect Block is a dynamic block for WordPress sites that need expressive text motion without sacrificing accessibility or graceful fallbacks.
Its typing playback is built on top of UniTyper by Beaver Coding:
https://github.com/beavercoding2022/uni-typer
Development repository:
https://github.com/imjlk/k-typewriter
Use it for:
- Homepage hero copy
- Product callouts
- Announcement banners
- Event pages
- Multilingual headline rotations
- Inline keyword rotators inside rows and grouped layouts
Key features:
- Multiple messages with one message per line
- Configurable typing, deleting, and pause timing
- Optional start delay with first-start, every-cycle, and every-reentry timing modes
- Optional looping, viewport start, and replay-on-re-entry behavior
- Cursor controls for visibility, animation mode, thickness, height, and offset
- First-message static fallback by default, with an optional custom fallback override
- Auto-generated non-visual summary with optional override text
- Inline layout support with width reservation in
chor measured longest-message mode - Text direction controls for
auto,ltr, andrtl - Start animation only when the block enters the viewport
- Dynamic rendering for SEO-friendly first paint and no-JavaScript fallback
- Reduced-motion support for visitors who prefer less animation
- Semantic tag selection for
p,div,span,h1–h6,strong,em,small, andmark - Support for theme typography, spacing, and color tools
- Bundled patterns for hero headlines, inline keyword rotators, announcement strips, feature spotlights, multilingual sections, split launch heroes, editorial leads, 404 prompts, and terminal-style loading sequences
Screenshots
Blocks
This plugin provides 1 block.
- Stroke by stroke typing effect Block Animate multilingual headlines, notices, and hero copy with a polished typewriter effect.
Installation
- Upload the plugin files to the
/wp-content/plugins/sbs-typing-effect-blockdirectory, or install the plugin through the WordPress plugins screen. - Activate the plugin through the
Pluginsscreen in WordPress. - Open the block editor and insert the
Stroke by stroke typing effect Block. - Add one message per line in the block settings sidebar.
- Adjust timing, cursor, inline layout, width reservation, loop, and viewport options to match your design.
FAQ
-
Does it work without JavaScript?
-
Yes. By default the first message is rendered on the server so visitors still see meaningful content even if JavaScript does not run. You can also override that visible fallback with a custom fallback message.
-
Is reduced motion supported?
-
Yes. Visitors with
prefers-reduced-motionenabled will see the visible fallback only, without animation. -
Can I control the non-visual summary for assistive technology?
-
Yes. Leave the summary on
Auto-generatedto build a locale-aware summary from every message, or switch the source toCustom overrideand provide your own summary for assistive technology. -
Can I use Korean and English together?
-
Yes. The block is designed for multilingual messaging and works well with Korean, English, Arabic, and mixed-language headlines. Use
Text directionwhen you need explicitltrorrtlbehavior. -
Can I change the HTML tag?
-
Yes. Choose between
p,div,span,h1–h6,strong,em,small, andmarkfrom the block settings. Useh1only when the block is the primary page heading. -
Can I keep inline layouts stable while the text changes?
-
Yes. Turn on
Inline layoutand useInline width reservewith eitherCharacters (ch)orMeasure longest messageto keep inline keyword rotators and row layouts steadier. -
Does it support a WordPress Playground preview?
-
Yes. The plugin includes a WordPress.org Playground blueprint, so maintainers can enable a one-click preview from the plugin’s Advanced view after deployment.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Stroke by stroke typing effect Block” is open source software. The following people have contributed to this plugin.
ContributorsTranslate “Stroke by stroke typing effect Block” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- First public release.
- Added a dynamic, Interactivity API-powered typewriter block.
- Added viewport-aware animation start, replay-on-re-entry, reduced-motion support, and graceful no-JS fallback.
- Added inline layout, width reservation, text direction controls, and detailed cursor controls.
- Added bundled starter and advanced patterns, WordPress Playground demos, packaging, local
wp-envtooling, smoke tests, and release workflows.




