Hero made by @ybouane.

@crazygl/hero-dashboard-light-beam

Your product dashboard, tilted in 3D space, scanned into existence by a soft blue-purple light beam. A glowing uplight underneath and a subtle floor reflection complete the look.

Demo

Floating Dashboard With Light Beam Reveal

Install

npm install @crazygl/hero-dashboard-light-beam

Usage

import FloatingDashboardWithLightBeamReveal from '@crazygl/hero-dashboard-light-beam';

export default function Page() {
  return (
    <FloatingDashboardWithLightBeamReveal
      screenshot="/shots/dashboard-dark.avif"
      heading="See your numbers, lit."
      subheading="Real-time. Beautifully presented."
      beamColor="#7080ff"
      cardTilt={13}
    />
  );
}

Customise

• Content — heading/subheading, two-column, or custom node.
• Screenshot — screenshot media (dark dashboards read most cinematic; non-16:9 framed not stretched).
• Beam — beamColor, beamDuration, beamWidth, beamIntensity, loopBeam, loopBeamPeriod.
• Card — cardScale, cardTilt, screenshotX/Y, screenEmissive.
• Atmosphere — underlightStrength, underlightCool, underlightWarm, floorReflection.
• Motion / Background — parallaxStrength, transparentBackground, bgTop, bgBottom.

Best for

• SaaS launch and product landing heroes.
• Analytics / BI dashboards and admin tools.
• AI / data products showing off a live interface.

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.