Chromatic Glass Prism

Installation

Material Science & Optics

Chromatic Glass Prism harnesses physically-based transmission features in @react-three/drei's MeshTransmissionMaterial:

• Index of Refraction (IOR): Refraction describes how light bends as it enters a material. An IOR of 1.0 means no bending (like air). Typical window glass is 1.5. Lead crystal and diamonds sit between 1.8 and 2.4, resulting in extreme bending and internal reflections.
• Chromatic Aberration (Dispersion): In optics, the refractive index varies slightly depending on the wavelength (color) of light. This causes white light to split into a rainbow spectrum when passing through non-parallel surfaces (like a prism). This effect is simulated efficiently by sampling the background texture multiple times with offset UVs for Red, Green, and Blue channels.
• Mouse Interaction: A hidden global event listener maps the normalized 2D cursor coordinates to a target Euler rotation array. Using maath/easing.dampE, the Mesh smooth-interpolates towards the target tilt, creating a weighty, floating interaction.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { ChromaticGlassPrism } from "@/components/creative/chromatic-glass-prism";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ChromaticGlassPrism } from "@/components/creative/chromatic-glass-prism";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <ChromaticGlassPrism
        ior{10}
        chromaticAberration{10}
        thickness{10}
      />
    </div>
  );
}