Energy Beam CTA

A conversion-focused hero: the main CTA button emits a glowing vertical beam that connects to a tilted product dashboard, making the button feel like it activates the product. Hover the CTA to brighten the beam, burst particles, and ripple a wake across the dashboard.

React

WebGL

Image

Interactive

Font

#three

#3d

#cta

#beam

#screenshot

#dashboard

#saas

#conversion

#landing

#interactive

Usage

import EnergyBeamCta from '@crazygl/hero-energy-beam-cta';

export default function Page() {
  return (
    <EnergyBeamCta
      heading="Hit go. Watch it work."
      ctaLabel="Get started →"
      onCTAClick="https://app.example.com/signup"
      screenshot="https://crazygl.com/samples/screenshot-dashboard-dark-2.avif"
    />
  );
}

onCTAClick accepts EITHER a string URL (navigates via window.location.href) OR a function (event) => void callback. Omit or pass an empty string to leave the button inert.

Customise

CTA — ctaLabel, ctaTextColor, ctaBgColor, ctaGlowColor, ctaGlowStrength, ctaHoverBoost.
Beam — beamColor, beamColorPulse, beamWidth, beamIntensity, pulsePeriod.
Particles — burstCount, burstColor (spawned on hover).
Screenshot — screenshot, screenshotX/Y, screenshotScale, screenshotTilt, screenEmissive, wakeStrength.
Atmosphere — bgTop, bgBottom, transparentBackground.

Best for

Conversion-focused SaaS landing pages
AI / analytics product launches where the CTA is the demo
High-stakes upgrade or activation flows
Pricing pages where one button drives the click

01 · Install the package

One command, zero config.

npm install @crazygl/hero-energy-beam-cta

02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx

import EnergyBeamCTA from '@crazygl/hero-energy-beam-cta';

export default function Landing() {
  return (
    <EnergyBeamCTA />
  );
}

03 · Use it in a page

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.

page.tsx

// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import EnergyBeamCTA from '@crazygl/hero-energy-beam-cta';

export default function Page() {
  return (
    <section>
      <EnergyBeamCTA
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}