Effects · Gutenberg
Particle Text block for WordPress
HTML5 Canvas text that assembles from scattered particles on load. Hover to scatter and re-assemble. Perfect for hero sections and dramatic reveal effects.
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
HTML5 Canvas text that assembles from scattered particles on load. Hover to scatter and re-assemble. Perfect for hero sections and dramatic reveal effects.
Inspector panels on this block: Content, Particle Settings, Animation, Sizing, Gradient Color. Those titles come from index.js, not from a shared template.
Behavior controls: “Particle Text” (Keep short for best effect); “Particle Gap (px)” (Distance between sampled pixels); “Easing” options: Ease Out, Ease In, Linear, Spring; “Sample Font Size (px)” (Larger = more detail with finer gap).
Where to find it
Gutenberg inserter → Effects → search “Particle Text” (block name `blockenberg/particle-text` in block.json). Style it in the sidebar after insert.
How to use Particle Text block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Particle Text”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Content. Set “Particle Text”, “Subtext (below canvas)”, “Particle Size (px)”, “Particle Gap (px)”.
- 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 |
|---|---|
| Particle Text | Text field in the inspector. Keep short for best effect. block.json default: BLOCKENBERG. Saved as `text`. |
| Subtext (below canvas) | Text field in the inspector. block.json default: Build anything. Fast.. Saved as `subtext`. |
| Particle Size (px) | Numeric range control in the inspector. Range 1–6. block.json default: 2. Saved as `particleSize`. |
| Particle Gap (px) | Numeric range control in the inspector. Distance between sampled pixels. Range 2–12. block.json default: 4. Saved as `particleGap`. |
| Scatter Radius (px) | Numeric range control in the inspector. Range 50–2000. block.json default: 500. Saved as `scatterRadius`. |
| Assemble Duration (ms) | Numeric range control in the inspector. Range 200–5000. block.json default: 1200. Saved as `enterDuration`. |
| Easing | Select control; the chosen value is saved on the block. Options: Ease Out; Ease In; Linear; Spring. block.json default: ease-out. Saved as `easing`. |
| Hover Scatter Effect | On/off toggle in the inspector. On by default. Saved as `hoverEffect`. |
| Hover Radius (px) | Numeric range control in the inspector. Range 20–300. block.json default: 80. Saved as `hoverRadius`. |
| Canvas Height (px) | Numeric range control in the inspector. Range 100–1000. block.json default: 300. Saved as `canvasHeight`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingBottom`. |
| Colors — Background | Color control in the inspector. block.json default: #0a0a0f. Saved as `bgColor`. |
| Particle Color 1 | Color control in the inspector. block.json default: #7c3aed. Saved as `particleColor`. |
| Particle Color 2 (gradient end) | Color control in the inspector. block.json default: #ec4899. Saved as `particleColor2`. |
| Subtext Color | Color control in the inspector. block.json default: #94a3b8. Saved as `subtextColor`. |
| Font Family | Text field in the inspector. block.json default: system-ui, sans-serif. Saved as `fontFamily`. |
| Font Weight | Select control; the chosen value is saved on the block. block.json default: 900. Saved as `fontWeight`. |
| Sample Font Size (px) | Numeric range control in the inspector. Larger = more detail with finer gap. Range 40–300. block.json default: 100. Saved as `sampleFontSize`. |
| Use Gradient | On/off toggle in the inspector. On by default. Saved as `useGradient`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- Drawing happens on a canvas element after the page loads.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- HTML5 Canvas text that assembles from scattered particles on load. Hover to scatter and re-assemble. Perfect for hero sections and dramatic reveal effects — that is the job of Particle Text, not a generic content block.
- Use it when you need the editor control labeled “Particle Text”, which exists on this block’s inspector.
- Inserter grouping: motion, overlays, and visual treatments.
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 Particle Text block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Particle Text”. It sits under Effects. After insert, open Content and set “Particle Text”, “Subtext (below canvas)”, “Particle Size (px)”, “Particle Gap (px)”.
What makes Particle Text different from other Blockenberg blocks?
HTML5 Canvas text that assembles from scattered particles on load. Hover to scatter and re-assemble. Perfect for hero sections and dramatic reveal effects. Inspector labels on this block include “Particle Text”, “Subtext (below canvas)”, “Particle Size (px)”, “Particle Gap (px)”.
Is the Particle Text Gutenberg block free?
Yes. Particle Text ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Particle 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: Content, Particle Settings, Animation, Sizing).
Related effects blocks
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Card Stack
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
Confetti Button
A call-to-action button that triggers a burst of canvas confetti particles on click. Supports multiple confetti styles, custom colors, particle physics and link/action settings.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Particle Text from the Gutenberg inserter.