CrazyGLHolographic 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.
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.
One command, zero config.
npm install @crazygl/hero-holo-dashboard-gridImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import HolographicDashboardGrid from '@crazygl/hero-holo-dashboard-grid';
export default function Landing() {
return (
<HolographicDashboardGrid />
);
}SSR-safe by default.
The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import HolographicDashboardGrid from '@crazygl/hero-holo-dashboard-grid';
export default function Page() {
return (
<section>
<HolographicDashboardGrid
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
