Hero made by @ybouane.

@crazygl/hero-crystal-refraction

Six raymarched octahedral crystals drift across the screen, refracting the background through each face with per-channel chromatic dispersion at the rim.

Demo

Crystal Refraction Field

Install

npm install @crazygl/hero-crystal-refraction

Usage

import CrystalRefractionField from '@crazygl/hero-crystal-refraction';

export default function Page() {
  return (
    <CrystalRefractionField
      heading="Refracted."
      subheading="Six crystals drifting through space, refracting everything behind them."
      backgroundImage="https://crazygl.com/samples/nature4.avif"
      crystalCount={6}
      refraction={1}
      chromatic={1}
    />
  );
}

Customise

• Content — contentType (heading / two-columns / custom), heading, subheading, or custom nodes.
• Background — backgroundImage (cover-fit, refracted through the crystals), or bgFallbackA/B/C for the procedural gradient.
• Layout — centerX, centerY position the cluster in the frame.
• Arrangement — crystalCount, orbitRadius, orbitTilt, radiusJitter, bobAmount, orbitSpeed, spinSpeed.
• Crystal — tint, rimColor, refraction, chromatic, fresnel, crystalSize, speed (master time scale).
• Typography — headingFontFamily.

Best for

• Luxury product and jewellery launch pages.
• Premium SaaS, AI, fintech and crypto brand sites with a high-end feel.
• Editorial or fashion covers wanting a tactile, light-bending centerpiece.

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.