CrazyGLDashboard 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.
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), plusscreenshotX/Y/Scale/TiltandscreenEmissivebacklit 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
One command, zero config.
npm install @crazygl/hero-dashboard-eclipseImport 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 DashboardEclipse from '@crazygl/hero-dashboard-eclipse';
export default function Landing() {
return (
<DashboardEclipse />
);
}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 DashboardEclipse from '@crazygl/hero-dashboard-eclipse';
export default function Page() {
return (
<section>
<DashboardEclipse
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
