Refraction Slats

Glass

A glowing orb built from vertical glass slices, with thin gaps between each strip.

Tip: pick a preset, use the custom picker, or paste your brand hex to preview this element in your colors. Some elements use a fixed multi-color palette.

Usage

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

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

Mood: Refined, editorial, optical. An orb dissected into light.
Colors: A luminous green orb, its surface split into vertical iridescent strips.
Motion: The orb rotates so the vertical slices sweep around it.

View component source

import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import type { Group } from 'three';

const SEGMENTS = 20;

export default function RefractionSlats({ color = '#5cff8a', scale = 1 }: { color?: string; scale?: number }) {
  const g = useRef<Group>(null);
  useFrame((_, dt) => {
    if (g.current) g.current.rotation.y += dt * 0.4;
  });
  const step = (Math.PI * 2) / SEGMENTS;
  const lune = step * 0.78; // ~22% gap between vertical slices

  return (
    <group ref={g} scale={scale}>
      {Array.from({ length: SEGMENTS }).map((_, i) => (
        <mesh key={i}>
          {/* a vertical wedge (lune) of the sphere surface -> the orb is built from strips */}
          <sphereGeometry args={[1.25, 6, 48, i * step, lune]} />
          <meshPhysicalMaterial
            color={color}
            emissive={color}
            emissiveIntensity={0.85}
            roughness={0.2}
            metalness={0.3}
            iridescence={1}
            iridescenceIOR={1.3}
            clearcoat={1}
            side={2}
          />
        </mesh>
      ))}
    </group>
  );
}