Hero made by @ybouane.

@crazygl/hero-dashboard-eclipse

Your dashboard screenshot sits low in the frame, partially hidden behind a glowing eclipse horizon, a vertical beam of light rising from it like the product itself is powering the scene.

Demo

Dashboard Eclipse

Install

npm install @crazygl/hero-dashboard-eclipse

Usage

import DashboardEclipse from '@crazygl/hero-dashboard-eclipse';

export default function Hero() {
	return (
		<DashboardEclipse
			heading="Power your insight."
			screenshot="/my-dashboard.avif"
			eclipseRimY={0.42}
			beamIntensity={0.8}
		/>
	);
}

react, react-dom and @crazygl/core are peer dependencies; three is bundled as a regular dependency.

Customise

• Screenshot — screenshot (PNG/JPG/AVIF/WebP), plus screenshotX/Y/Scale/Tilt and screenEmissive backlit boost.
• Eclipse — horizonColor1/2/3 (outer/mid/core rim), horizonIntensity, eclipseRimY, eclipseRimSharpness, planetRadius.
• Beam — beamColor, beamIntensity, beamWidth, beamHeight, beamLayers, bloomStrength, bloomCoreStrength.
• Dust — dustCount, dustColor, dustSpeed.
• Motion & atmosphere — parallaxStrength, beamPulse, skyTop, skyMid, grainStrength, vignetteStrength, transparentBackground.

Best for

• Premium SaaS and analytics / BI launch pages
• AI productivity tools and fintech dashboards
• Product launches where the screenshot is the hero of the shot
• Dark, cinematic landing pages

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.