Hero made by @ybouane.

@crazygl/hero-logo-edge-glow

Upload an SVG or transparent PNG logo and light it with a neon inner glow — a bright, radial-gradient rim clipped to the silhouette that fades to a dark core, and intensifies toward your cursor as it approaches.

Demo

Logo Edge Glow

Install

npm install @crazygl/hero-logo-edge-glow

Usage

import LogoEdgeGlow from '@crazygl/hero-logo-edge-glow';

export default function Page() {
  return (
    <LogoEdgeGlow
      logo="https://crazygl.com/samples/crazygl.svg"
      colorInner="#ff7a2f"
      colorMid="#ff2d9b"
      colorOuter="#7b3cff"
    />
  );
}

Customise

• Logo — logo (transparent SVG/PNG; alpha is the silhouette mask) and logoScale.
• Glow — glowDepth (how far the rim reaches inward; 0.03–0.06 reads as crisp neon), glowIntensity, edgeBoost, outerGlow, ambient (resting glow), bodyDarkness (1 = black core).
• Gradient — colorInner/colorMid/colorOuter, gradientShift (focal position), gradientRadius.
• Pointer — pointerStrength, pointerRadius (hotspot size).
• Backdrop — backgroundColor, transparentBackground.

Best for

• Brand and logo landing pages where the mark is the hero
• Premium SaaS and AI product launch pages
• Music, nightlife, and creative-studio sites wanting a neon edge
• Dark, moody splash screens and coming-soon 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.