Glass Orb

Glass

A refractive frosted-glass sphere with slow idle spin and chromatic aberration.

Usage

Install: three @react-three/fiber @react-three/drei

Drop <GlassOrb /> inside your own <Canvas>.

Mood: Futuristic, tactile, premium.
Colors: Neon-on-dark, violet-tinted glass over a dark stage.
Motion: Slow idle rotation; the stage adds cursor tilt.

View component source

import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import { MeshTransmissionMaterial } from '@react-three/drei';
import type { Mesh } from 'three';

export default function GlassOrb({ color = '#8a5cff', scale = 1 }: { color?: string; scale?: number }) {
  const ref = useRef<Mesh>(null);
  useFrame((_, dt) => {
    if (ref.current) ref.current.rotation.y += dt * 0.3;
  });
  return (
    <mesh ref={ref} scale={scale}>
      <sphereGeometry args={[1, 64, 64]} />
      <MeshTransmissionMaterial
        thickness={1.2}
        roughness={0.05}
        transmission={1}
        ior={1.4}
        chromaticAberration={0.06}
        anisotropy={0.3}
        distortion={0.2}
        distortionScale={0.4}
        iridescence={1}
        iridescenceIOR={1.3}
        iridescenceThicknessRange={[100, 400]}
        clearcoat={1}
        color={color}
        emissive={color}
        emissiveIntensity={0.05}
      />
    </mesh>
  );
}