Effects · Gutenberg
Kinetic Text block for WordPress
Text characters that scatter outward and snap back on hover with smooth physics animation.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Text characters that scatter outward and snap back on hover with smooth physics animation.
Inspector panels on this block: Text, Scatter Effect. Those titles come from index.js, not from a shared template.
Behavior controls: “HTML Tag” options: H1, H2, H3, H4, p; “Text Align” options: Left, Center, Right; “Trigger” options: On Hover, On Click, Auto Loop; “Scatter Mode” options: Explode Outward, Rain Down, Spin & Scatter, Float Up.
Where to find it
Gutenberg inserter → Effects → search “Kinetic Text” (block name `blockenberg/kinetic-text` in block.json). Style it in the sidebar after insert.
How to use Kinetic Text block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Kinetic Text”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Text. Set “HTML Tag”, “Text Align”, “Trigger”, “Scatter Mode”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| HTML Tag | Select control; the chosen value is saved on the block. Options: H1; H2; H3; H4; p; div. block.json default: h2. Saved as `tag`. |
| Text Align | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Trigger | Select control; the chosen value is saved on the block. Options: On Hover; On Click; Auto Loop. block.json default: hover. Saved as `trigger`. |
| Scatter Mode | Select control; the chosen value is saved on the block. Options: Explode Outward; Rain Down; Spin & Scatter; Float Up. block.json default: explode. Saved as `scatterMode`. |
| Scatter Radius (px) | Numeric range control in the inspector. Range 40–400. block.json default: 120. Saved as `scatterRadius`. |
| Scatter Duration (ms) | Numeric range control in the inspector. Range 100–1000. block.json default: 400. Saved as `scatterDuration`. |
| Return Duration (ms) | Numeric range control in the inspector. Range 100–1500. block.json default: 600. Saved as `returnDuration`. |
| Stagger Delay (ms) | Numeric range control in the inspector. Range 0–100. block.json default: 20. Saved as `stagger`. |
| Text Color | Color control in the inspector. block.json default: #0f172a. Saved as `textColor`. |
| Hover Color | Color control in the inspector. block.json default: #6366f1. Saved as `hoverColor`. |
| Colors — Background | Color control in the inspector. block.json default: transparent. Saved as `bgColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- JavaScript functions that perform the math: computeVectors.
When this is the right block
- Text characters that scatter outward and snap back on hover with smooth physics animation — that is the job of Kinetic Text, not a generic content block.
- Use it when you need the editor control labeled “HTML Tag”, which exists on this block’s inspector.
- It matches pages about kinetic, scatter, hover.
- The math runs in the visitor’s browser after publish — no extra calculator plugin.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Kinetic Text block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Kinetic Text”. It sits under Effects. After insert, open Text and set “HTML Tag”, “Text Align”, “Trigger”, “Scatter Mode”.
Does Kinetic Text need a server or extra plugin?
No. After Blockenberg is active, the view script runs in the browser with the values you saved on the block.
Is the Kinetic Text Gutenberg block free?
Yes. Kinetic Text ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Kinetic Text to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Text, Scatter Effect).
Related effects blocks
Glitch Text
Eye-catching glitch animation text with chromatic aberration, noise, scanlines, and digital distortion effects.
Gradient Text Animator
Animated gradient-filled text with multiple animation modes — shift, pulse, wave, rainbow, and reveal.
Handwriting Text
SVG text that animates in as if being handwritten — stroke reveal effect triggered on scroll or load.
Image Reveal
Image with a curtain reveal effect triggered on hover or scroll, with overlay label and caption.
Magnetic Button
A button that magnetically pulls toward the cursor as it approaches, with customizable pull strength, style, and ripple effect.
Morphing Text
Headline that smoothly morphs between multiple words with blur, crossfade, slide, or typewriter transitions.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Kinetic Text from the Gutenberg inserter.