Prism Shards

Glass

Floating iridescent glass tetrahedra that refract and scatter neon light.

Usage

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

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

Mood: Crystalline, elegant, abstract. Shattered light.
Colors: Glowing iridescent crystal shards tinted cyan, magenta, violet, amber, and pink.
Motion: Each shard floats and rotates independently.

View component source

import { Float } from '@react-three/drei';

const SHARDS: { pos: [number, number, number]; rot: [number, number, number]; s: number; tint: string }[] = [
  { pos: [-1.3, 0.5, 0], rot: [0.4, 0.2, 0.1], s: 0.6, tint: '#22e0ff' },
  { pos: [1.2, -0.3, -0.4], rot: [0.9, 0.5, 0.3], s: 0.7, tint: '#ff2fd0' },
  { pos: [0.3, 1.1, 0.2], rot: [0.2, 1.1, 0.6], s: 0.5, tint: '#8a5cff' },
  { pos: [-0.5, -1.0, 0.3], rot: [1.2, 0.3, 0.9], s: 0.55, tint: '#ff8a3d' },
  { pos: [1.0, 0.8, -0.2], rot: [0.6, 0.9, 0.2], s: 0.5, tint: '#ff5db1' },
];

export default function PrismShards({ color, scale = 1 }: { color?: string; scale?: number }) {
  return (
    <group scale={scale}>
      {SHARDS.map((s, i) => {
        const c = color ?? s.tint;
        return (
          <Float key={i} speed={2} rotationIntensity={1.2} floatIntensity={1.4}>
            <mesh position={s.pos} rotation={s.rot} scale={s.s}>
              <tetrahedronGeometry args={[1, 0]} />
              <meshPhysicalMaterial
                color={c}
                metalness={0.7}
                roughness={0.12}
                iridescence={1}
                iridescenceIOR={1.5}
                iridescenceThicknessRange={[100, 600]}
                clearcoat={1}
                clearcoatRoughness={0.1}
                emissive={c}
                emissiveIntensity={0.55}
              />
            </mesh>
          </Float>
        );
      })}
    </group>
  );
}