Effects · Gutenberg
Icon Cloud block for WordPress
An interactive 3D sphere of icons, emojis, or tag words that auto-rotates and responds to mouse movement. Great for showcasing skills, technologies, or topics.
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
An interactive 3D sphere of icons, emojis, or tag words that auto-rotates and responds to mouse movement. Great for showcasing skills, technologies, or topics.
Inspector panels on this block: Items, Cloud Shape, Animation, Item Style, Background. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Effects → search “Icon Cloud” (block name `blockenberg/icon-cloud` in block.json). Style it in the sidebar after insert.
How to use Icon Cloud block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Icon Cloud”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Items. Set “Cloud Radius (px)”, “Container Height (px)”, “Perspective (px)”, “Auto-Rotate X Speed”.
- 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 |
|---|---|
| Cloud Radius (px) | Numeric range control in the inspector. Range 100–500. block.json default: 220. Saved as `cloudRadius`. |
| Container Height (px) | Numeric range control in the inspector. Range 200–900. block.json default: 500. Saved as `cloudHeight`. |
| Perspective (px) | Numeric range control in the inspector. Range 300–2000. block.json default: 900. Saved as `perspective`. |
| Auto-Rotate X Speed | Numeric range control in the inspector. Range 0–0.02. block.json default: 0.002. Saved as `autoRotateX`. |
| Auto-Rotate Y Speed | Numeric range control in the inspector. Range 0–0.02. block.json default: 0.004. Saved as `autoRotateY`. |
| Mouse Interaction | On/off toggle in the inspector. On by default. Saved as `mouseEffect`. |
| Mouse Strength | Numeric range control in the inspector. Range 0.01–0.2. block.json default: 0.06. Saved as `mouseStrength`. |
| Padding (px) | Numeric range control in the inspector. Range 2–20. block.json default: 6. Saved as `itemPadding`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 6. Saved as `itemBorderRadius`. |
| Depth Fade | On/off toggle in the inspector. On by default. Saved as `depthFade`. |
| Show Background | On/off toggle in the inspector. Off by default. Saved as `showBackground`. |
| Color From (front) | Color control in the inspector. block.json default: #7c3aed. Saved as `colorFrom`. |
| Color To (back) | Color control in the inspector. block.json default: #ec4899. Saved as `colorTo`. |
| Item Background | Color control in the inspector. block.json default: #1e1b4b. Saved as `itemBg`. |
| Text (solid mode) | Color control in the inspector. block.json default: #e2e8f0. Saved as `textColor`. |
| Hover Background | Color control in the inspector. block.json default: #7c3aed. Saved as `hoverBg`. |
| Hover Text | Color control in the inspector. block.json default: #ffffff. Saved as `hoverColor`. |
| Section Background | Color control in the inspector. Saved as `bgColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- An interactive 3D sphere of icons, emojis, or tag words that auto-rotates and responds to mouse movement. Great for showcasing skills, technologies, or topics — that is the job of Icon Cloud, not a generic content block.
- Use it when you need the editor control labeled “Cloud Radius (px)”, 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 Icon Cloud block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Icon Cloud”. It sits under Effects. After insert, open Items and set “Cloud Radius (px)”, “Container Height (px)”, “Perspective (px)”, “Auto-Rotate X Speed”.
What makes Icon Cloud different from other Blockenberg blocks?
An interactive 3D sphere of icons, emojis, or tag words that auto-rotates and responds to mouse movement. Great for showcasing skills, technologies, or topics. Inspector labels on this block include “Cloud Radius (px)”, “Container Height (px)”, “Perspective (px)”, “Auto-Rotate X Speed”.
Is the Icon Cloud Gutenberg block free?
Yes. Icon Cloud ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Icon Cloud 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: Items, Cloud Shape, Animation, Item Style).
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 Icon Cloud from the Gutenberg inserter.