Effects · Gutenberg
Holographic Card block for WordPress
A card with an iridescent holographic foil surface effect that reacts to mouse movement with rainbow shimmer and 3D tilt.
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 card with an iridescent holographic foil surface effect that reacts to mouse movement with rainbow shimmer and 3D tilt.
Inspector panels on this block: Card Content, Card Size, Holographic Effect. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Effects → search “Holographic Card” (block name `blockenberg/holographic-card` in block.json). Style it in the sidebar after insert.
How to use Holographic Card block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Holographic Card”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Card Content. Set “Badge text”, “Show badge”, “Link URL”, “Link 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 |
|---|---|
| Badge text | Text field in the inspector. block.json default: ✦ Premium. Saved as `badge`. |
| Show badge | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Link URL | Text field in the inspector. Saved as `linkUrl`. |
| Link text | Text field in the inspector. block.json default: Explore Now. Saved as `linkText`. |
| Show link button | On/off toggle in the inspector. On by default. Saved as `showLink`. |
| Card width (px) | Numeric range control in the inspector. Range 200–600. block.json default: 320. Saved as `cardWidth`. |
| Card height (px) | Numeric range control in the inspector. Range 200–700. block.json default: 440. Saved as `cardHeight`. |
| Border radius | Numeric range control in the inspector. Range 0–60. block.json default: 20. Saved as `cardRadius`. |
| Tilt strength (°) | Numeric range control in the inspector. Range 0–40. block.json default: 15. Saved as `tiltStrength`. |
| Shine opacity (%) | Numeric range control in the inspector. Range 0–100. block.json default: 60. Saved as `shineOpacity`. |
| Glare opacity (%) | Numeric range control in the inspector. Range 0–100. block.json default: 40. Saved as `glareOpacity`. |
| Foil hue offset (°) | Numeric range control in the inspector. Range 0–360. block.json default: 0. Saved as `foilHue`. |
| Foil saturation (%) | Numeric range control in the inspector. Range 20–100. block.json default: 80. Saved as `foilSaturation`. |
| Badge font size | Numeric range control in the inspector. Range 9–20. block.json default: 12. Saved as `badgeFontSize`. |
| Link text size | Numeric range control in the inspector. Range 11–22. block.json default: 14. Saved as `linkTextSize`. |
| Card background | Color control in the inspector. block.json default: #1a1035. Saved as `cardBg`. |
| Title color | Color control in the inspector. block.json default: #ffffff. Saved as `titleColor`. |
| Subtitle color | Color control in the inspector. block.json default: rgba(255,255,255,0.7). Saved as `subtitleColor`. |
| Badge background | Color control in the inspector. block.json default: rgba(255,255,255,0.15). Saved as `badgeBg`. |
| Badge text | Color control in the inspector. block.json default: #ffffff. Saved as `badgeColor`. |
| Link background | Color control in the inspector. block.json default: rgba(255,255,255,0.15). Saved as `linkBg`. |
| Link text | Color control in the inspector. block.json default: #ffffff. Saved as `linkColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- A card with an iridescent holographic foil surface effect that reacts to mouse movement with rainbow shimmer and 3D tilt — that is the job of Holographic Card, not a generic content block.
- Use it when you need the editor control labeled “Badge text”, which exists on this block’s inspector.
- It matches pages about holographic, rainbow, foil.
- 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 Holographic Card block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Holographic Card”. It sits under Effects. After insert, open Card Content and set “Badge text”, “Show badge”, “Link URL”, “Link text”.
What makes Holographic Card different from other Blockenberg blocks?
A card with an iridescent holographic foil surface effect that reacts to mouse movement with rainbow shimmer and 3D tilt. Inspector labels on this block include “Badge text”, “Show badge”, “Link URL”, “Link text”.
Is the Holographic Card Gutenberg block free?
Yes. Holographic Card ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Holographic Card 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: Card Content, Card Size, Holographic Effect).
Related effects blocks
Tilt Card
Card with 3D perspective tilt effect on mouse hover. Rich content with image, heading, text, icon, and link.
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.
Parallax Depth Cards
Cards with layered 3D depth parallax on mouse move — different elements float at different speeds.
Flip Card
Card with front (icon + title) and back (text + button) that flips on hover or click. Mostly CSS, minimal JS.
Gradient Border Card
Card with an animated rotating gradient border — conic-gradient glow effect popular in modern dark UI.
Hover Card
Card that reveals hidden content (overlay) when hovered with customizable direction and animation.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Holographic Card from the Gutenberg inserter.