Iridescent Knot

Geometry

A slow-tumbling torus knot with full iridescence and mirror-clearcoat finish.

Usage

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

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

Mood: Hypnotic, prismatic, otherworldly.
Colors: Shifting prismatic bands from magenta through cyan to violet on dark.
Motion: Slow dual-axis tumble revealing shifting color bands.

View component source

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

export default function IridescentKnot({ color = '#ff2fd0', scale = 1 }: { color?: string; scale?: number }) {
  const ref = useRef<Mesh>(null);
  useFrame((_, dt) => {
    if (!ref.current) return;
    ref.current.rotation.x += dt * 0.18;
    ref.current.rotation.y += dt * 0.12;
  });
  return (
    <mesh ref={ref} scale={scale}>
      <torusKnotGeometry args={[0.75, 0.25, 200, 28]} />
      <meshPhysicalMaterial
        color={color}
        metalness={1}
        roughness={0.1}
        iridescence={1}
        iridescenceIOR={1.3}
        iridescenceThicknessRange={[100, 400]}
        clearcoat={1}
        clearcoatRoughness={0.05}
      />
    </mesh>
  );
}