Hero made by @ybouane.

@crazygl/hero-holo-dashboard-grid

Your dashboard rendered as a translucent hologram floating above a glowing cyan grid floor that recedes to the horizon. Scanlines, slight flicker, secondary feature panels drifting at depth. Built for analytics, cybersecurity, AI monitoring, and any sci-fi interface aesthetic.

Demo

Holographic Dashboard Grid

Install

npm install @crazygl/hero-holo-dashboard-grid

Usage

import HoloDashboardGrid from '@crazygl/hero-holo-dashboard-grid';

export default function Page() {
  return (
    <HoloDashboardGrid
      heading="Insight, transparent."
      screenshot="/shots/analytics-dark.avif"
      clarity={0.54}
      gridColor="#56e3ff"
    />
  );
}

Customise

• Content — contentType, heading, subheading, or custom nodes.
• Dashboard — screenshot, screenshotX/Y, screenshotScale, screenshotTilt, hologramTint, hologramOpacity, clarity, scanlineStrength, flickerStrength.
• Secondary panels — secondaryEnabled, secondary1Image–secondary6Image, secondarySpread, secondaryZSpread, secondaryScale.
• Grid floor — gridColor, gridIntensity, gridSpacing, gridCellSize, gridY.
• Atmosphere — bgTop / bgBottom, haloColor / haloStrength, transparentBackground.
• Motion — parallaxStrength.

Best for

• Analytics and BI platforms.
• Cybersecurity and threat-monitoring dashboards.
• AI observability and devops control planes.
• Premium SaaS launches chasing a heads-up-display, sci-fi aesthetic.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.