Effects · Gutenberg
Mouse Trail block for WordPress
Add a magical cursor trail effect to your page — sparkles, dots, comets, ribbons, stars, or fire. Works globally across the page or scoped to a specific section. No dependencies, pure canvas.
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
Add a magical cursor trail effect to your page — sparkles, dots, comets, ribbons, stars, or fire. Works globally across the page or scoped to a specific section. No dependencies, pure canvas.
Inspector panels on this block: Trail Style, Particles, Glow & Effects, Scope & Behavior, Section (when scoped). Those titles come from index.js, not from a shared template.
Behavior controls: “Trail Style — Style” options: Sparkle ✨, Dots, Comet ☄️, Stars ⭐, Fire 🔥; “Color Mode” options: Gradient (2 colors), Solid Primary, Rainbow; “Trail Fade Speed” (Higher = quicker fade); “Effect Scope” ('Page' attaches to the whole page; 'Section' only applies inside this block).
Where to find it
Gutenberg inserter → Effects → search “Mouse Trail” (block name `blockenberg/mouse-trail` in block.json). Style it in the sidebar after insert.
How to use Mouse Trail block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Mouse Trail”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Trail Style. Set “Trail Style — Style”, “Color Mode”, “Blend Mode”, “Max Particles”.
- 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 |
|---|---|
| Trail Style — Style | Select control; the chosen value is saved on the block. Options: Sparkle ✨; Dots; Comet ☄️; Stars ⭐; Fire 🔥; Snow ❄️; Ribbon. block.json default: sparkle. Saved as `trailStyle`. |
| Color Mode | Select control; the chosen value is saved on the block. Options: Gradient (2 colors); Solid Primary; Rainbow. block.json default: gradient. Saved as `colorMode`. |
| Blend Mode | Select control; the chosen value is saved on the block. block.json default: normal. Saved as `mixBlend`. |
| Max Particles | Numeric range control in the inspector. Range 5–100. block.json default: 30. Saved as `particleCount`. |
| Particle Size (px) | Numeric range control in the inspector. Range 2–30. block.json default: 8. Saved as `particleSize`. |
| Spread Radius (px) | Numeric range control in the inspector. Range 0–80. block.json default: 20. Saved as `spreadRadius`. |
| Trail Fade Speed | Numeric range control in the inspector. Higher = quicker fade. Range 10–100. block.json default: 60. Saved as `trailFade`. |
| Gravity | Numeric range control in the inspector. Range 0–100. block.json default: 0.15. Saved as `gravity`. |
| Glow Effect | On/off toggle in the inspector. On by default. Saved as `glowEffect`. |
| Glow Size (px) | Numeric range control in the inspector. Range 2–40. block.json default: 12. Saved as `glowSize`. |
| Burst on Click | On/off toggle in the inspector. On by default. Saved as `burstOnClick`. |
| Burst Particle Count | Numeric range control in the inspector. Range 5–60. block.json default: 20. Saved as `burstCount`. |
| Effect Scope | Select control; the chosen value is saved on the block. 'Page' attaches to the whole page; 'Section' only applies inside this block. Options: Whole Page; Section Only. block.json default: page. Saved as `scope`. |
| Show on Mobile Devices | On/off toggle in the inspector. Off by default. Saved as `showOnMobile`. |
| Section Label/Text | Text field in the inspector. block.json default: Move your cursor here ✨. Saved as `previewText`. |
| Section Height (px) | Numeric range control in the inspector. Range 80–600. block.json default: 200. Saved as `sectionHeight`. |
| Section Border Radius | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `sectionRadius`. |
| Primary Color | Color control in the inspector. block.json default: #f59e0b. Saved as `color1`. |
| Secondary Color | Color control in the inspector. block.json default: #ec4899. Saved as `color2`. |
| Section Background | Color control in the inspector. block.json default: #1e1b4b. Saved as `sectionBg`. |
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.
When this is the right block
- Add a magical cursor trail effect to your page — sparkles, dots, comets, ribbons, stars, or fire. Works globally across the page or scoped to a specific section. No dependencies, pure canvas — that is the job of Mouse Trail, not a generic content block.
- Use it when you need the editor control labeled “Trail Style — Style”, which exists on this block’s inspector.
- It matches pages about cursor, mouse, trail.
- 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 Mouse Trail block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Mouse Trail”. It sits under Effects. After insert, open Trail Style and set “Trail Style — Style”, “Color Mode”, “Blend Mode”, “Max Particles”.
What makes Mouse Trail different from other Blockenberg blocks?
Add a magical cursor trail effect to your page — sparkles, dots, comets, ribbons, stars, or fire. Works globally across the page or scoped to a specific section. No dependencies, pure canvas. Inspector labels on this block include “Trail Style — Style”, “Color Mode”, “Blend Mode”, “Max Particles”.
Is the Mouse Trail Gutenberg block free?
Yes. Mouse Trail ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Mouse Trail 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: Trail Style, Particles, Glow & Effects, Scope & Behavior).
Related effects blocks
Cursor Spotlight
A dark section with a radial spotlight that follows the cursor, dramatically revealing the content beneath.
Magnetic Button
A button that magnetically pulls toward the cursor as it approaches, with customizable pull strength, style, and ripple effect.
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.
Glitch Text
Eye-catching glitch animation text with chromatic aberration, noise, scanlines, and digital distortion effects.
Spotlight Card
Card with a radial gradient spotlight that follows the mouse cursor on hover.
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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Mouse Trail from the Gutenberg inserter.