Hero made by @ybouane.

@crazygl/hero-crystal-logo-prism

A slowly rotating crystal prism (3D ray-marched rounded cube) with your logo suspended inside as a glowing emissive mesh. Per-channel IOR refraction on the cube faces splits white light into rainbow seams; caustic highlights pool on the virtual floor; soft bloom on the inner emission.

Demo

Logo Inside a Crystal

Install

npm install @crazygl/hero-crystal-logo-prism

Usage

import CrystalLogoPrism from '@crazygl/hero-crystal-logo-prism';

export default function Page() {
  return (
    <CrystalLogoPrism
      heading="Held in crystal."
      logo="https://crazygl.com/samples/crazygl.svg"
      logoEmission="#9be5ff"
      dispersion={0.055}
      ior={1.5}
    />
  );
}

Customise

• Content — heading / subheading, or switch contentType to two-columns / custom node.
• Logo — logo (SVG/PNG; sampled to an alpha mask), logoEmission color, logoBrightness.
• Crystal — crystalSize, crystalRound edge round-off, crystalCenterX lateral position, rotSpeed, tiltX.
• Optics — ior (green channel), dispersion rainbow spread, fresnel rim, specGloss, absorbHex inner tint.
• Caustics & Bloom — causticStrength, causticHex, bloom on the inner logo.
• Background / Behavior — bgTop, bgBottom, vignette, pointerParallax.

Best for

• Premium SaaS and brand launch pages
• Luxury product, jewelry, and identity-system showcases
• Web3 / fintech landing pages wanting a "hand-cut light" signature
• Agency and design-studio portfolios

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.