Effects · Gutenberg
Cursor Spotlight block for WordPress
A dark section with a radial spotlight that follows the cursor, dramatically revealing the content beneath.
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
A dark section with a radial spotlight that follows the cursor, dramatically revealing the content beneath.
Inspector panels on this block: Content, Spotlight, Section Size, Background Image. Those titles come from index.js, not from a shared template.
Behavior controls: “Idle Mode” options: Center of section, Reveal all (no dark), Fully dark; “Text Align” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Effects → search “Cursor Spotlight” (block name `blockenberg/cursor-spotlight` in block.json). Style it in the sidebar after insert.
How to use Cursor Spotlight block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Cursor Spotlight”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Content. Set “Heading Tag”, “Heading”, “Subtext”, “Show Hint Text”.
- 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 |
|---|---|
| Heading Tag | Select control; the chosen value is saved on the block. block.json default: h2. Saved as `tag`. |
| Heading | Text field in the inspector. block.json default: Move your cursor to reveal. Saved as `heading`. |
| Subtext | Multiline text field in the inspector. block.json default: Interactive spotlight effect — your cursor lights the way. Saved as `subtext`. |
| Show Hint Text | On/off toggle in the inspector. On by default. Saved as `showHint`. |
| Hint | Text field in the inspector. block.json default: Move cursor to reveal. Saved as `hintText`. |
| Spotlight Size (px) | Numeric range control in the inspector. Range 60–800. block.json default: 280. Saved as `spotlightSize`. |
| Edge Blur (px) | Numeric range control in the inspector. Range 0–200. block.json default: 40. Saved as `spotlightBlur`. |
| Dim Opacity | Numeric range control in the inspector. Range 0.1–1. block.json default: 0.92. Saved as `dimOpacity`. |
| Idle Mode | Select control; the chosen value is saved on the block. Options: Center of section; Reveal all (no dark); Fully dark. block.json default: center. Saved as `idleMode`. |
| Smooth Follow | On/off toggle in the inspector. On by default. Saved as `followSmooth`. |
| Section Height (px) | Numeric range control in the inspector. Range 200–1200. block.json default: 500. Saved as `sectionHeight`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–48. block.json default: 16. Saved as `borderRadius`. |
| Heading (Typo Heading) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoHeading`. |
| Subtext (Typo Subtext) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoSubtext`. |
| Text Align | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| BG Image Opacity | Numeric range control in the inspector. Range 0–1. block.json default: 0.5. Saved as `bgImageOpacity`. |
| Section Background | Color control in the inspector. block.json default: #0c0a1e. Saved as `bgColor`. |
| Dim Color | Color control in the inspector. block.json default: #000000. Saved as `dimColor`. |
| Spotlight Color | Color control in the inspector. block.json default: #ffffff. Saved as `spotColor`. |
| Text Color | Color control in the inspector. block.json default: #ffffff. Saved as `textColor`. |
| Accent Color | Color control in the inspector. block.json default: #a78bfa. Saved as `accentColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- A dark section with a radial spotlight that follows the cursor, dramatically revealing the content beneath — that is the job of Cursor Spotlight, not a generic content block.
- Use it when you need the editor control labeled “Heading Tag”, which exists on this block’s inspector.
- It matches pages about spotlight, cursor, mouse.
- 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 Cursor Spotlight block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Cursor Spotlight”. It sits under Effects. After insert, open Content and set “Heading Tag”, “Heading”, “Subtext”, “Show Hint Text”.
What makes Cursor Spotlight different from other Blockenberg blocks?
A dark section with a radial spotlight that follows the cursor, dramatically revealing the content beneath. Inspector labels on this block include “Heading Tag”, “Heading”, “Subtext”, “Show Hint Text”.
Is the Cursor Spotlight Gutenberg block free?
Yes. Cursor Spotlight ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Cursor Spotlight 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, Spotlight, Section Size, Background Image).
Related effects blocks
Mouse Trail
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.
Content Flip Box
A responsive grid of cards that flip on hover or click to reveal a styled back face — perfect for services, features, team, and more.
Magnetic Button
A button that magnetically pulls toward the cursor as it approaches, with customizable pull strength, style, and ripple effect.
Spotlight Card
Card with a radial gradient spotlight that follows the mouse cursor on hover.
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.
Flip Card
Card with front (icon + title) and back (text + button) that flips on hover or click. Mostly CSS, minimal JS.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Cursor Spotlight from the Gutenberg inserter.