Three.js gallery

'use client';
import React, { useRef, useEffect } from 'react';
import * as THREE from 'three';

/**
 * Logo: a glossy mesh that animates through higher-face
 * polyhedra. Coloured orbiting point lights provide swimming specular
 * highlights via clearcoat. Auto-spin, hover pause, and damped
 * pointer-drag.
 */
export default function IcosahedronLogo({ size = 56 }) {
  const mountRef = useRef(null);

  useEffect(() => {
    const el = mountRef.current;
    if (!el) return undefined;

    const AUTO_SPIN_X = 0.006;
    const AUTO_SPIN_Y = 0.01;
    const HOVER_SLOWDOWN_EASING = 0.03;
    const RESTORE_EASING = 0.12;
    const MOTION_STOP_EASING = 0.075;
    const MOTION_START_EASING = 0.055;
    const MIN_SEGMENT_DURATION = 5.0;
    const MAX_SEGMENT_DURATION = 8.5;
    const MORPH_FRACTION = 0.45;
    const EDGE_OPACITY = 0.38;
    const MIN_FACE_COUNT = 12;

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
    camera.position.set(0, 0, 4);

    const renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: true,
    });
    renderer.setSize(size, size);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.05;
    el.appendChild(renderer.domElement);

    scene.add(new THREE.AmbientLight(0xffffff, 0.35));
    const keyLight = new THREE.DirectionalLight(0xffffff, 1.1);
    keyLight.position.set(3, 2, 4);
    scene.add(keyLight);
    const lightA = new THREE.PointLight(0x7dd3fc, 2.4, 12, 1.6);
    const lightB = new THREE.PointLight(0xff8fd1, 2.0, 12, 1.6);
    const lightC = new THREE.PointLight(0xfff2b0, 1.4, 12, 1.6);
    scene.add(lightA, lightB, lightC);

    const makeCubeGeometry = () => new THREE.BoxGeometry(1.45, 1.45, 1.45, 1, 1, 1);

    const vectorKey = (vector) => (
      `${vector.x.toFixed(5)}:${vector.y.toFixed(5)}:${vector.z.toFixed(5)}`
    );

    const getFaceCenter = (face, vertices) => {
      const center = new THREE.Vector3();
      face.forEach((index) => center.add(vertices[index]));
      return center.multiplyScalar(1 / face.length);
    };

    const orientFaceOutward = (face, vertices) => {
      if (face.length < 3) return face;
      const a = vertices[face[0]];
      const b = vertices[face[1]];
      const c = vertices[face[2]];
      const center = getFaceCenter(face, vertices);
      const normal = new THREE.Vector3()
        .subVectors(b, a)
        .cross(new THREE.Vector3().subVectors(c, a));
      return normal.dot(center) >= 0 ? face : [...face].reverse();
    };

    const sortIndicesAroundAxis = (indices, getPoint, axisSource) => {
      const axis = axisSource.clone().normalize();
      const fallback = Math.abs(axis.y) < 0.92
        ? new THREE.Vector3(0, 1, 0)
        : new THREE.Vector3(1, 0, 0);
      const u = new THREE.Vector3().crossVectors(axis, fallback).normalize();
      const v = new THREE.Vector3().crossVectors(axis, u).normalize();
      const center = new THREE.Vector3();
      indices.forEach((index) => center.add(getPoint(index)));
      center.multiplyScalar(1 / indices.length);

      return [...indices].sort((a, b) => {
        const pa = getPoint(a).clone().sub(center);
        const pb = getPoint(b).clone().sub(center);
        const angleA = Math.atan2(pa.dot(v), pa.dot(u));
        const angleB = Math.atan2(pb.dot(v), pb.dot(u));
        return angleA - angleB;
      });
    };

    const extractPolyhedronData = (geometry) => {
      const position = geometry.attributes.position;
      const index = geometry.index;
      const triangleVertexCount = index ? index.count : position.count;
      const vertices = [];
      const vertexMap = new Map();
      const triangles = [];

      const getUniqueVertexIndex = (bufferIndex) => {
        const vertex = new THREE.Vector3().fromBufferAttribute(position, bufferIndex);
        const key = vectorKey(vertex);
        if (!vertexMap.has(key)) {
          vertexMap.set(key, vertices.length);
          vertices.push(vertex);
        }
        return vertexMap.get(key);
      };

      for (let i = 0; i < triangleVertexCount; i += 3) {
        const a = getUniqueVertexIndex(index ? index.getX(i) : i);
        const b = getUniqueVertexIndex(index ? index.getX(i + 1) : i + 1);
        const c = getUniqueVertexIndex(index ? index.getX(i + 2) : i + 2);
        if (a !== b && b !== c && a !== c) triangles.push([a, b, c]);
      }

      const planeGroups = [];
      triangles.forEach((triangle) => {
        const a = vertices[triangle[0]];
        const b = vertices[triangle[1]];
        const c = vertices[triangle[2]];
        const normal = new THREE.Vector3()
          .subVectors(b, a)
          .cross(new THREE.Vector3().subVectors(c, a))
          .normalize();
        let d = normal.dot(a);
        if (d < 0) {
          normal.negate();
          d = -d;
        }

        let group = planeGroups.find(
          (candidate) =>
            candidate.normal.dot(normal) > 0.9999 &&
            Math.abs(candidate.d - d) < 1e-4
        );
        if (!group) {
          group = { normal, d, vertexIds: new Set() };
          planeGroups.push(group);
        }
        triangle.forEach((vertexId) => group.vertexIds.add(vertexId));
      });

      const faces = planeGroups.map((group) => {
        const face = sortIndicesAroundAxis(
          [...group.vertexIds],
          (index) => vertices[index],
          group.normal
        );
        return orientFaceOutward(face, vertices);
      });

      geometry.dispose();
      return { vertices, faces };
    };

    const normalizeData = (data) => {
      const center = new THREE.Vector3();
      data.vertices.forEach((vertex) => center.add(vertex));
      center.multiplyScalar(1 / data.vertices.length);
      const vertices = data.vertices.map((vertex) => vertex.clone().sub(center));
      const maxRadius = vertices.reduce(
        (max, vertex) => Math.max(max, vertex.length()),
        0
      ) || 1;

      return {
        vertices: vertices.map((vertex) => vertex.multiplyScalar(1 / maxRadius)),
        faces: data.faces.map((face) => [...face]),
      };
    };

    const rotateData = (data, rotations = {}) => {
      const euler = new THREE.Euler(rotations.x || 0, rotations.y || 0, rotations.z || 0);
      return normalizeData({
        vertices: data.vertices.map((vertex) => vertex.clone().applyEuler(euler)),
        faces: data.faces.map((face) => [...face]),
      });
    };

    const createEdgeKey = (a, b) => (a < b ? `${a}:${b}` : `${b}:${a}`);

    const createRectifiedData = (baseData) => {
      const vertices = [];
      const edgeVertexIds = new Map();

      const getEdgeVertex = (a, b) => {
        const key = createEdgeKey(a, b);
        if (!edgeVertexIds.has(key)) {
          const midpoint = baseData.vertices[a].clone()
            .add(baseData.vertices[b])
            .multiplyScalar(0.5);
          edgeVertexIds.set(key, vertices.length);
          vertices.push(midpoint);
        }
        return edgeVertexIds.get(key);
      };

      const faces = baseData.faces.map((face) => (
        face.map((vertexId, index) => getEdgeVertex(vertexId, face[(index + 1) % face.length]))
      ));

      const vertexToEdgeVertices = new Map();
      baseData.faces.forEach((face) => {
        face.forEach((vertexId, index) => {
          const nextVertexId = face[(index + 1) % face.length];
          const edgeVertexId = getEdgeVertex(vertexId, nextVertexId);
          if (!vertexToEdgeVertices.has(vertexId)) vertexToEdgeVertices.set(vertexId, new Set());
          if (!vertexToEdgeVertices.has(nextVertexId)) {
            vertexToEdgeVertices.set(nextVertexId, new Set());
          }
          vertexToEdgeVertices.get(vertexId).add(edgeVertexId);
          vertexToEdgeVertices.get(nextVertexId).add(edgeVertexId);
        });
      });

      vertexToEdgeVertices.forEach((edgeVertexSet, vertexId) => {
        const sortedFace = sortIndicesAroundAxis(
          [...edgeVertexSet],
          (index) => vertices[index],
          baseData.vertices[vertexId]
        );
        faces.push(sortedFace);
      });

      return normalizeData({ vertices, faces });
    };

    const createTruncatedData = (baseData, cut = 1 / 3) => {
      const vertices = [];
      const directedVertexIds = new Map();

      const getDirectedVertex = (from, to) => {
        const key = `${from}:${to}`;
        if (!directedVertexIds.has(key)) {
          const point = baseData.vertices[from].clone()
            .multiplyScalar(1 - cut)
            .add(baseData.vertices[to].clone().multiplyScalar(cut));
          directedVertexIds.set(key, vertices.length);
          vertices.push(point);
        }
        return directedVertexIds.get(key);
      };

      const faces = baseData.faces.map((face) => {
        const truncatedFace = [];
        face.forEach((vertexId, index) => {
          const previousVertexId = face[(index - 1 + face.length) % face.length];
          const nextVertexId = face[(index + 1) % face.length];
          truncatedFace.push(getDirectedVertex(vertexId, previousVertexId));
          truncatedFace.push(getDirectedVertex(vertexId, nextVertexId));
        });
        return truncatedFace;
      });

      const vertexToDirectedVertices = new Map();
      baseData.faces.forEach((face) => {
        face.forEach((vertexId, index) => {
          const previousVertexId = face[(index - 1 + face.length) % face.length];
          const nextVertexId = face[(index + 1) % face.length];
          if (!vertexToDirectedVertices.has(vertexId)) {
            vertexToDirectedVertices.set(vertexId, new Set());
          }
          vertexToDirectedVertices.get(vertexId).add(getDirectedVertex(vertexId, previousVertexId));
          vertexToDirectedVertices.get(vertexId).add(getDirectedVertex(vertexId, nextVertexId));
        });
      });

      vertexToDirectedVertices.forEach((directedVertexSet, vertexId) => {
        const sortedFace = sortIndicesAroundAxis(
          [...directedVertexSet],
          (index) => vertices[index],
          baseData.vertices[vertexId]
        );
        faces.push(sortedFace);
      });

      return normalizeData({ vertices, faces });
    };

    const cubeData = normalizeData(extractPolyhedronData(makeCubeGeometry()));
    const octahedronData = normalizeData(
      extractPolyhedronData(new THREE.OctahedronGeometry(1, 0))
    );
    const dodecahedronData = normalizeData(
      extractPolyhedronData(new THREE.DodecahedronGeometry(1, 0))
    );
    const icosahedronData = normalizeData(
      extractPolyhedronData(new THREE.IcosahedronGeometry(1, 0))
    );
    const cuboctahedronData = createRectifiedData(cubeData);
    const icosidodecahedronData = createRectifiedData(icosahedronData);
    const truncatedCubeData = createTruncatedData(cubeData);
    const truncatedOctahedronData = createTruncatedData(octahedronData);
    const truncatedDodecahedronData = createTruncatedData(dodecahedronData);
    const truncatedIcosahedronData = createTruncatedData(icosahedronData);

    const polyhedronDefinitions = [
      {
        key: 'dodecahedron',
        visualFamily: 'dodecahedron',
        category: 'polyhedron',
        faceCount: 12,
        edgeCount: 30,
        createData: () => rotateData(dodecahedronData, { x: Math.PI / 9 }),
      },
      {
        key: 'cuboctahedron',
        visualFamily: 'cuboctahedron',
        category: 'polyhedron',
        faceCount: 14,
        edgeCount: 24,
        createData: () => rotateData(cuboctahedronData, { x: Math.PI / 8 }),
      },
      {
        key: 'truncated-cube',
        visualFamily: 'truncated-cube',
        category: 'polyhedron',
        faceCount: 14,
        edgeCount: 36,
        createData: () => rotateData(truncatedCubeData, { y: Math.PI / 7 }),
      },
      {
        key: 'truncated-octahedron',
        visualFamily: 'truncated-octahedron',
        category: 'polyhedron',
        faceCount: 14,
        edgeCount: 36,
        createData: () => rotateData(truncatedOctahedronData, { x: Math.PI / 7 }),
      },
      {
        key: 'icosahedron',
        visualFamily: 'icosahedron',
        category: 'polyhedron',
        faceCount: 20,
        edgeCount: 30,
        createData: () => rotateData(icosahedronData, { y: Math.PI / 6 }),
      },
      {
        key: 'icosidodecahedron',
        visualFamily: 'icosidodecahedron',
        category: 'polyhedron',
        faceCount: 32,
        edgeCount: 60,
        createData: () => rotateData(icosidodecahedronData, { z: Math.PI / 10 }),
      },
      {
        key: 'truncated-dodecahedron',
        visualFamily: 'truncated-dodecahedron',
        category: 'polyhedron',
        faceCount: 32,
        edgeCount: 90,
        createData: () => rotateData(truncatedDodecahedronData, { x: Math.PI / 9 }),
      },
      {
        key: 'truncated-icosahedron',
        visualFamily: 'truncated-icosahedron',
        category: 'polyhedron',
        faceCount: 32,
        edgeCount: 90,
        createData: () => rotateData(truncatedIcosahedronData, { y: Math.PI / 9 }),
      },
    ].filter(({ faceCount }) => faceCount >= MIN_FACE_COUNT);

    const applyVertexColors = (geometry) => {
      const position = geometry.attributes.position;
      const colors = [];
      const c1 = new THREE.Color('#1ee3a6');
      const c2 = new THREE.Color('#2b5cff');
      const blend = new THREE.Color();
      let minY = Infinity;
      let maxY = -Infinity;

      for (let i = 0; i < position.count; i++) {
        const y = position.getY(i);
        minY = Math.min(minY, y);
        maxY = Math.max(maxY, y);
      }

      const spanY = maxY - minY || 1;
      for (let i = 0; i < position.count; i++) {
        const t = THREE.MathUtils.clamp((position.getY(i) - minY) / spanY, 0, 1);
        blend.copy(c1).lerp(c2, 1 - t);
        colors.push(blend.r, blend.g, blend.b);
      }

      geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
      return geometry;
    };

    const getFacePlanes = (data) => data.faces.map((face) => {
      const orientedFace = orientFaceOutward(face, data.vertices);
      const a = data.vertices[orientedFace[0]];
      const b = data.vertices[orientedFace[1]];
      const c = data.vertices[orientedFace[2]];
      const normal = new THREE.Vector3()
        .subVectors(b, a)
        .cross(new THREE.Vector3().subVectors(c, a))
        .normalize();
      let d = normal.dot(a);

      if (d < 0) {
        normal.negate();
        d = -d;
      }

      return { normal, d };
    });

    const sphereGeometry = new THREE.IcosahedronGeometry(1, 3).toNonIndexed();
    const spherePosition = sphereGeometry.attributes.position;
    const sphereDirections = [];

    for (let i = 0; i < spherePosition.count; i++) {
      sphereDirections.push(
        new THREE.Vector3()
          .fromBufferAttribute(spherePosition, i)
          .normalize()
      );
    }

    const computeMorphTarget = (data) => {
      const facePlanes = getFacePlanes(data);
      const positions = new Float32Array(sphereDirections.length * 3);
      const faceIds = new Int32Array(sphereDirections.length);
      let maxRadius = 0;

      sphereDirections.forEach((direction, index) => {
        let bestFaceIndex = 0;
        let bestDot = -Infinity;

        facePlanes.forEach((plane, faceIndex) => {
          const dot = plane.normal.dot(direction);
          if (dot > bestDot) {
            bestDot = dot;
            bestFaceIndex = faceIndex;
          }
        });

        const plane = facePlanes[bestFaceIndex];
        const scale = bestDot > 0.0001 ? plane.d / bestDot : 1;
        const point = direction.clone().multiplyScalar(scale);
        const offset = index * 3;

        positions[offset] = point.x;
        positions[offset + 1] = point.y;
        positions[offset + 2] = point.z;
        faceIds[index] = bestFaceIndex;
        maxRadius = Math.max(maxRadius, point.length());
      });

      if (maxRadius > 0) {
        for (let i = 0; i < positions.length; i++) {
          positions[i] /= maxRadius;
        }
      }

      const edgeSet = new Set();
      const edgeIndices = [];
      const addEdge = (a, b) => {
        if (faceIds[a] === faceIds[b]) return;
        const key = a < b ? `${a}:${b}` : `${b}:${a}`;
        if (edgeSet.has(key)) return;
        edgeSet.add(key);
        edgeIndices.push(a, b);
      };

      for (let i = 0; i < sphereDirections.length; i += 3) {
        addEdge(i, i + 1);
        addEdge(i + 1, i + 2);
        addEdge(i, i + 2);
      }

      return { positions, edgeIndices };
    };

    const polyhedronTargets = polyhedronDefinitions.map((definition) => {
      const data = normalizeData(definition.createData());
      return {
        ...definition,
        actualFaceCount: data.faces.length,
        data,
        morph: computeMorphTarget(data),
      };
    }).filter(({ actualFaceCount }) => actualFaceCount >= MIN_FACE_COUNT);

    if (polyhedronTargets.length === 0) {
      renderer.dispose();
      if (el.contains(renderer.domElement)) el.removeChild(renderer.domElement);
      return undefined;
    }

    const polyhedronTargetsByKey = Object.fromEntries(
      polyhedronTargets.map((target) => [target.key, target])
    );
    const shapeKeys = polyhedronTargets.map(({ key }) => key);
    const visualFamilies = Object.fromEntries(
      polyhedronTargets.map(({ key, visualFamily }) => [key, visualFamily])
    );
    const currentInitialKey = shapeKeys.includes('icosidodecahedron')
      ? 'icosidodecahedron'
      : shapeKeys[0];

    const geometry = sphereGeometry.clone();
    geometry.setAttribute(
      'position',
      new THREE.Float32BufferAttribute(polyhedronTargetsByKey[currentInitialKey].morph.positions, 3)
    );
    geometry.computeVertexNormals();
    applyVertexColors(geometry);

    const material = new THREE.MeshPhysicalMaterial({
      vertexColors: true,
      metalness: 0.45,
      roughness: 0.18,
      clearcoat: 1.0,
      clearcoatRoughness: 0.08,
      reflectivity: 0.6,
      flatShading: true,
      opacity: 1,
    });

    const polyhedronGroup = new THREE.Group();
    const mesh = new THREE.Mesh(geometry, material);
    polyhedronGroup.add(mesh);

    const edgeMaterial = new THREE.LineBasicMaterial({
      color: 0xffffff,
      transparent: true,
      opacity: EDGE_OPACITY,
      depthTest: true,
      depthWrite: false,
    });
    const edgeGeometry = new THREE.BufferGeometry();
    const edges = new THREE.LineSegments(edgeGeometry, edgeMaterial);
    edges.renderOrder = 2;
    polyhedronGroup.add(edges);
    scene.add(polyhedronGroup);

    const randomDuration = () => (
      MIN_SEGMENT_DURATION + Math.random() * (MAX_SEGMENT_DURATION - MIN_SEGMENT_DURATION)
    );

    const pickNextShape = (currentKey, previousKey) => {
      if (shapeKeys.length <= 1) return currentKey;
      const candidates = shapeKeys.filter(
        (key) =>
          key !== currentKey &&
          key !== previousKey &&
          visualFamilies[key] !== visualFamilies[currentKey] &&
          (!previousKey || visualFamilies[key] !== visualFamilies[previousKey])
      );
      const pool = candidates.length > 0
        ? candidates
        : shapeKeys.filter((key) => key !== currentKey);
      return pool[Math.floor(Math.random() * pool.length)];
    };

    let previousShapeKey = null;
    let currentShapeKey = currentInitialKey;
    let nextShapeKey = pickNextShape(currentShapeKey, previousShapeKey);
    let transitionElapsed = 0;
    let transitionDuration = randomDuration();
    const getMergedEdgeIndices = (fromTarget, toTarget) => {
      const edgeSet = new Set();
      const merged = [];
      const addPair = (a, b) => {
        const key = a < b ? `${a}:${b}` : `${b}:${a}`;
        if (edgeSet.has(key)) return;
        edgeSet.add(key);
        merged.push(a, b);
      };

      [fromTarget, toTarget].forEach((target) => {
        for (let i = 0; i < target.morph.edgeIndices.length; i += 2) {
          addPair(target.morph.edgeIndices[i], target.morph.edgeIndices[i + 1]);
        }
      });

      return merged;
    };

    const applyPhase = (fromKey, toKey, t) => {
      const fromTarget = polyhedronTargetsByKey[fromKey];
      const toTarget = polyhedronTargetsByKey[toKey];
      if (!fromTarget || !toTarget) return;

      const phaseT = t < 0.5
        ? 4 * t * t * t
        : 1 - Math.pow(-2 * t + 2, 3) / 2;
      const position = geometry.attributes.position;
      const fromPositions = fromTarget.morph.positions;
      const toPositions = toTarget.morph.positions;

      for (let i = 0; i < position.array.length; i++) {
        position.array[i] = THREE.MathUtils.lerp(fromPositions[i], toPositions[i], phaseT);
      }

      position.needsUpdate = true;
      geometry.computeVertexNormals();

      const edgeIndices = getMergedEdgeIndices(fromTarget, toTarget);
      const edgePositions = new Float32Array(edgeIndices.length * 3);

      edgeIndices.forEach((vertexIndex, index) => {
        const sourceOffset = vertexIndex * 3;
        const targetOffset = index * 3;

        edgePositions[targetOffset] = position.array[sourceOffset];
        edgePositions[targetOffset + 1] = position.array[sourceOffset + 1];
        edgePositions[targetOffset + 2] = position.array[sourceOffset + 2];
      });

      edgeGeometry.setAttribute('position', new THREE.Float32BufferAttribute(edgePositions, 3));
    };

    applyPhase(currentShapeKey, nextShapeKey, 0);

    let isDragging = false;
    let isHovered = false;
    let lastX = 0;
    let lastY = 0;
    let velX = AUTO_SPIN_Y;
    let velY = AUTO_SPIN_X;

    const onPointerDown = (e) => {
      isDragging = true;
      lastX = e.clientX;
      lastY = e.clientY;
      velX = 0;
      velY = 0;
    };
    const onPointerMove = (e) => {
      if (!isDragging) return;
      const dx = e.clientX - lastX;
      const dy = e.clientY - lastY;
      polyhedronGroup.rotation.y += dx * 0.015;
      polyhedronGroup.rotation.x += dy * 0.015;
      velX = dy * 0.015;
      velY = dx * 0.015;
      lastX = e.clientX;
      lastY = e.clientY;
    };
    const onPointerUp = () => { isDragging = false; };
    const onPointerEnter = () => { isHovered = true; };
    const onPointerLeave = () => { isHovered = false; };

    renderer.domElement.addEventListener('pointerdown', onPointerDown);
    renderer.domElement.addEventListener('pointerenter', onPointerEnter);
    renderer.domElement.addEventListener('pointerleave', onPointerLeave);
    window.addEventListener('pointermove', onPointerMove);
    window.addEventListener('pointerup', onPointerUp);

    const clock = new THREE.Clock();
    let rafId;
    let lightTime = 0;
    let motionSpeed = 1;

    const animate = () => {
      rafId = requestAnimationFrame(animate);
      const delta = Math.min(clock.getDelta(), 0.05);
      const targetMotionSpeed = isHovered ? 0 : 1;
      const motionEasing = isHovered ? MOTION_STOP_EASING : MOTION_START_EASING;
      motionSpeed += (targetMotionSpeed - motionSpeed) * motionEasing;
      if (motionSpeed < 0.001) motionSpeed = 0;
      if (motionSpeed > 0.999) motionSpeed = 1;
      const animatedDelta = delta * motionSpeed;

      if (animatedDelta > 0) {
        transitionElapsed += animatedDelta;
        lightTime += animatedDelta;

        if (transitionElapsed >= transitionDuration) {
          transitionElapsed -= transitionDuration;
          previousShapeKey = currentShapeKey;
          currentShapeKey = nextShapeKey;
          nextShapeKey = pickNextShape(currentShapeKey, previousShapeKey);
          transitionDuration = randomDuration();
        }
      }

      const localRaw = transitionElapsed / transitionDuration;
      const holdEach = (1 - MORPH_FRACTION) / 2;
      const morphRaw = Math.max(0, Math.min(1, (localRaw - holdEach) / MORPH_FRACTION));
      const t = morphRaw < 0.5
        ? 4 * morphRaw * morphRaw * morphRaw
        : 1 - Math.pow(-2 * morphRaw + 2, 3) / 2;

      applyPhase(currentShapeKey, nextShapeKey, t);

      lightA.position.set(
        Math.cos(lightTime * 0.9) * 3.2,
        Math.sin(lightTime * 0.7) * 2.4,
        Math.sin(lightTime * 0.6) * 2.0 + 1.5
      );
      lightB.position.set(
        Math.cos(lightTime * 0.6 + 2.1) * 3.0,
        Math.cos(lightTime * 0.85 + 1.0) * 2.6,
        Math.sin(lightTime * 0.5 + 0.5) * 2.0 + 1.0
      );
      lightC.position.set(
        Math.sin(lightTime * 1.2 + 0.8) * 2.4,
        Math.cos(lightTime * 1.0 + 2.5) * 2.0,
        Math.cos(lightTime * 0.7) * 1.6 + 1.2
      );

      if (!isDragging) {
        const targetX = AUTO_SPIN_X * motionSpeed;
        const targetY = AUTO_SPIN_Y * motionSpeed;
        const easing = isHovered ? HOVER_SLOWDOWN_EASING : RESTORE_EASING;
        velX += (targetX - velX) * easing;
        velY += (targetY - velY) * easing;
        polyhedronGroup.rotation.x += velX;
        polyhedronGroup.rotation.y += velY;
      }

      renderer.render(scene, camera);
    };
    animate();

    return () => {
      cancelAnimationFrame(rafId);
      renderer.domElement.removeEventListener('pointerdown', onPointerDown);
      renderer.domElement.removeEventListener('pointerenter', onPointerEnter);
      renderer.domElement.removeEventListener('pointerleave', onPointerLeave);
      window.removeEventListener('pointermove', onPointerMove);
      window.removeEventListener('pointerup', onPointerUp);
      sphereGeometry.dispose();
      geometry.dispose();
      edgeGeometry.dispose();
      material.dispose();
      edgeMaterial.dispose();
      renderer.dispose();
      if (el.contains(renderer.domElement)) el.removeChild(renderer.domElement);
    };
  }, [size]);

  return (
    <div
      ref={mountRef}
      style={{
        width: size,
        height: size,
        display: 'inline-block',
        cursor: 'pointer',
        flexShrink: 0,
      }}
    />
  );
}

'use client';

import { useEffect, useRef } from 'react';
import * as THREE from 'three';
import { mergeVertices } from 'three/examples/jsm/utils/BufferGeometryUtils.js';

const clamp01 = (value) => Math.max(0, Math.min(1, value));
const smoothstep = (edge0, edge1, value) => {
  const t = clamp01((value - edge0) / (edge1 - edge0));
  return t * t * (3 - 2 * t);
};

function seededRandom(seed) {
  const value = Math.sin(seed * 127.1 + 311.7) * 43758.5453;
  return value - Math.floor(value);
}

function createSurface() {
  const source = new THREE.IcosahedronGeometry(1, 5);
  source.deleteAttribute('normal');
  source.deleteAttribute('uv');
  const geometry = mergeVertices(source, 1e-4);
  source.dispose();
  geometry.computeVertexNormals();

  const position = geometry.getAttribute('position');
  const count = position.count;
  const baseDirections = new Float32Array(count * 3);
  for (let index = 0; index < count; index += 1) {
    const x = position.getX(index);
    const y = position.getY(index);
    const z = position.getZ(index);
    const inverseLength = 1 / Math.hypot(x, y, z);
    baseDirections[index * 3] = x * inverseLength;
    baseDirections[index * 3 + 1] = y * inverseLength;
    baseDirections[index * 3 + 2] = z * inverseLength;
  }

  const neighbourSets = Array.from({ length: count }, () => new Set());
  const indices = geometry.index.array;
  for (let face = 0; face < indices.length; face += 3) {
    const a = indices[face];
    const b = indices[face + 1];
    const c = indices[face + 2];
    neighbourSets[a].add(b).add(c);
    neighbourSets[b].add(a).add(c);
    neighbourSets[c].add(a).add(b);
  }
  const neighbours = neighbourSets.map((set) => Uint32Array.from(set));

  geometry.setAttribute('color', new THREE.Float32BufferAttribute(new Float32Array(count * 3), 3));
  return { geometry, baseDirections, neighbours };
}

export default function ReactionDiffusionOrb({ size = 260 }) {
  const mountRef = useRef(null);

  useEffect(() => {
    const mount = mountRef.current;
    if (!mount) return undefined;

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
    renderer.setSize(size, size);
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.18;
    mount.appendChild(renderer.domElement);

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(32, 1, 0.1, 100);
    camera.position.set(0, 0, 8.4);

    scene.add(new THREE.HemisphereLight(0xffffff, 0x252525, 1.7));
    const keyLight = new THREE.DirectionalLight(0xffffff, 3.8);
    keyLight.position.set(-3.5, 4.5, 5.5);
    scene.add(keyLight);
    const fillLight = new THREE.DirectionalLight(0xbfc7d2, 1.25);
    fillLight.position.set(4, -1.5, 2.5);
    scene.add(fillLight);

    const { geometry, baseDirections, neighbours } = createSurface();
    const position = geometry.getAttribute('position');
    const colours = geometry.getAttribute('color');
    const vertexCount = position.count;
    let chemicalU = new Float32Array(vertexCount).fill(1);
    let chemicalV = new Float32Array(vertexCount);
    let nextU = new Float32Array(vertexCount);
    let nextV = new Float32Array(vertexCount);

    for (let seed = 0; seed < 18; seed += 1) {
      const longitude = seededRandom(seed * 3 + 1) * Math.PI * 2;
      const latitude = Math.acos(2 * seededRandom(seed * 3 + 2) - 1);
      const seedX = Math.sin(latitude) * Math.cos(longitude);
      const seedY = Math.cos(latitude);
      const seedZ = Math.sin(latitude) * Math.sin(longitude);
      const angularRadius = 0.1 + seededRandom(seed * 3 + 3) * 0.13;
      const threshold = Math.cos(angularRadius);
      for (let index = 0; index < vertexCount; index += 1) {
        const offset = index * 3;
        const dot =
          baseDirections[offset] * seedX +
          baseDirections[offset + 1] * seedY +
          baseDirections[offset + 2] * seedZ;
        if (dot > threshold) {
          chemicalU[index] = 0.12;
          chemicalV[index] = 0.92 + seededRandom(index + seed * 17) * 0.08;
        }
      }
    }

    const diffuseStep = (time = 0) => {
      const feed = 0.0285 + Math.sin(time * 0.19) * 0.0018;
      const kill = 0.0575 + Math.cos(time * 0.14) * 0.0012;
      const diffusionU = 0.2;
      const diffusionV = 0.1;
      for (let index = 0; index < vertexCount; index += 1) {
        const adjacent = neighbours[index];
        let averageU = 0;
        let averageV = 0;
        for (let neighbourIndex = 0; neighbourIndex < adjacent.length; neighbourIndex += 1) {
          const neighbour = adjacent[neighbourIndex];
          averageU += chemicalU[neighbour];
          averageV += chemicalV[neighbour];
        }
        averageU /= adjacent.length;
        averageV /= adjacent.length;
        const u = chemicalU[index];
        const v = chemicalV[index];
        const reaction = u * v * v;
        nextU[index] = clamp01(u + diffusionU * (averageU - u) - reaction + feed * (1 - u));
        nextV[index] = clamp01(v + diffusionV * (averageV - v) + reaction - (feed + kill) * v);
      }
      [chemicalU, nextU] = [nextU, chemicalU];
      [chemicalV, nextV] = [nextV, chemicalV];
    };

    const updateSurface = (time = 0) => {
      for (let index = 0; index < vertexCount; index += 1) {
        const adjacent = neighbours[index];
        let neighbourV = 0;
        let minV = 1;
        let maxV = 0;
        for (let neighbourIndex = 0; neighbourIndex < adjacent.length; neighbourIndex += 1) {
          const value = chemicalV[adjacent[neighbourIndex]];
          neighbourV += value;
          minV = Math.min(minV, value);
          maxV = Math.max(maxV, value);
        }
        neighbourV /= adjacent.length;

        const v = chemicalV[index];
        const plate = smoothstep(0.055, 0.36, v);
        const centre = smoothstep(0.34, 0.54, v);
        const boundary = smoothstep(0.012, 0.105, Math.max(Math.abs(v - neighbourV), maxV - minV));
        const fold = Math.pow(boundary, 0.62);
        const offset = index * 3;
        const organicPhase =
          baseDirections[offset] * 8.0 +
          baseDirections[offset + 1] * 11.0 +
          baseDirections[offset + 2] * 6.0;
        const breathing = Math.sin(time * 0.72 + organicPhase + v * 18.0) * fold * 0.034;
        const radius = 0.9 + plate * 0.46 + fold * 0.32 - centre * 0.2 + breathing;
        position.array[offset] = baseDirections[offset] * radius;
        position.array[offset + 1] = baseDirections[offset + 1] * radius;
        position.array[offset + 2] = baseDirections[offset + 2] * radius;

        const pore = smoothstep(0.32, 0.5, v);
        const pearl = clamp01(0.34 + plate * 0.34 + fold * 0.5 - pore * 0.88);
        const warmGrey = pearl * 0.97;
        colours.array[offset] = warmGrey;
        colours.array[offset + 1] = warmGrey;
        colours.array[offset + 2] = pearl;
      }
      position.needsUpdate = true;
      colours.needsUpdate = true;
      geometry.computeVertexNormals();
    };

    for (let step = 0; step < 1050; step += 1) diffuseStep(step / 60);
    updateSurface();

    const material = new THREE.MeshPhysicalMaterial({
      vertexColors: true,
      roughness: 0.32,
      metalness: 0,
      clearcoat: 0.55,
      clearcoatRoughness: 0.34,
      sheen: 0.12,
      sheenColor: new THREE.Color(0xffffff),
      side: THREE.DoubleSide,
    });
    const orb = new THREE.Mesh(geometry, material);
    orb.rotation.set(-0.18, 0.32, -0.08);
    scene.add(orb);

    let rafId;
    let lastSimulationAt = performance.now();
    const AUTO_SPIN_X = 0.006;
    const AUTO_SPIN_Y = 0.01;
    const HOVER_SLOWDOWN_EASING = 0.03;
    const RESTORE_EASING = 0.12;
    const MOTION_STOP_EASING = 0.075;
    const MOTION_START_EASING = 0.055;
    let dragging = false;
    let hovered = false;
    let previousX = 0;
    let previousY = 0;
    let velocityX = AUTO_SPIN_Y;
    let velocityY = AUTO_SPIN_X;
    let motionSpeed = 1;
    let lastInjectionAt = performance.now();
    let injectionIndex = 0;
    const onDown = (event) => {
      dragging = true;
      previousX = event.clientX;
      previousY = event.clientY;
      velocityX = 0;
      velocityY = 0;
    };
    const onMove = (event) => {
      if (!dragging) return;
      const dx = event.clientX - previousX;
      const dy = event.clientY - previousY;
      orb.rotation.y += dx * 0.015;
      orb.rotation.x += dy * 0.015;
      velocityX = dy * 0.015;
      velocityY = dx * 0.015;
      previousX = event.clientX;
      previousY = event.clientY;
    };
    const onUp = () => { dragging = false; };
    const onEnter = () => { hovered = true; };
    const onLeave = () => { hovered = false; };
    renderer.domElement.addEventListener('pointerdown', onDown);
    renderer.domElement.addEventListener('pointerenter', onEnter);
    renderer.domElement.addEventListener('pointerleave', onLeave);
    window.addEventListener('pointermove', onMove);
    window.addEventListener('pointerup', onUp);

    const injectChemical = () => {
      const longitude = seededRandom(injectionIndex * 3 + 901) * Math.PI * 2;
      const latitude = Math.acos(2 * seededRandom(injectionIndex * 3 + 902) - 1);
      const x = Math.sin(latitude) * Math.cos(longitude);
      const y = Math.cos(latitude);
      const z = Math.sin(latitude) * Math.sin(longitude);
      const threshold = Math.cos(0.075 + seededRandom(injectionIndex * 3 + 903) * 0.055);
      for (let index = 0; index < vertexCount; index += 1) {
        const offset = index * 3;
        const dot = baseDirections[offset] * x + baseDirections[offset + 1] * y + baseDirections[offset + 2] * z;
        if (dot > threshold) {
          chemicalU[index] = 0.08;
          chemicalV[index] = 0.96;
        }
      }
      injectionIndex += 1;
    };

    const animate = (now) => {
      rafId = requestAnimationFrame(animate);
      const targetMotionSpeed = hovered ? 0 : 1;
      const motionEasing = hovered ? MOTION_STOP_EASING : MOTION_START_EASING;
      motionSpeed += (targetMotionSpeed - motionSpeed) * motionEasing;
      if (motionSpeed < 0.001) motionSpeed = 0;
      if (motionSpeed > 0.999) motionSpeed = 1;

      if (now - lastInjectionAt > 2600) {
        injectChemical();
        lastInjectionAt = now;
      }
      if (now - lastSimulationAt > 33) {
        for (let step = 0; step < 8; step += 1) diffuseStep(now / 1000);
        updateSurface(now / 1000);
        lastSimulationAt = now;
      }
      if (!dragging) {
        const targetX = AUTO_SPIN_X * motionSpeed;
        const targetY = AUTO_SPIN_Y * motionSpeed;
        const easing = hovered ? HOVER_SLOWDOWN_EASING : RESTORE_EASING;
        velocityX += (targetX - velocityX) * easing;
        velocityY += (targetY - velocityY) * easing;
        orb.rotation.x += velocityX;
        orb.rotation.y += velocityY;
      }
      renderer.render(scene, camera);
    };
    rafId = requestAnimationFrame(animate);

    return () => {
      cancelAnimationFrame(rafId);
      renderer.domElement.removeEventListener('pointerdown', onDown);
      renderer.domElement.removeEventListener('pointerenter', onEnter);
      renderer.domElement.removeEventListener('pointerleave', onLeave);
      window.removeEventListener('pointermove', onMove);
      window.removeEventListener('pointerup', onUp);
      geometry.dispose();
      material.dispose();
      renderer.dispose();
      if (mount.contains(renderer.domElement)) mount.removeChild(renderer.domElement);
    };
  }, [size]);

  return <div ref={mountRef} style={{ width: size, height: size, cursor: 'grab' }} />;
}

'use client';

import { useEffect, useRef } from 'react';
import * as THREE from 'three';

const VERTEX_SHADER = /* glsl */ `
  varying vec3 vObjectPosition;
  varying vec3 vNormal;
  varying vec3 vViewPosition;

  void main() {
    vObjectPosition = normalize(position);
    vNormal = normalize(normalMatrix * normal);
    vec4 viewPosition = modelViewMatrix * vec4(position, 1.0);
    vViewPosition = -viewPosition.xyz;
    gl_Position = projectionMatrix * viewPosition;
  }
`;

const FRAGMENT_SHADER = /* glsl */ `
  uniform float time;
  varying vec3 vObjectPosition;
  varying vec3 vNormal;
  varying vec3 vViewPosition;

  float hash(vec3 p) {
    p = fract(p * 0.3183099 + 0.1);
    p *= 17.0;
    return fract(p.x * p.y * p.z * (p.x + p.y + p.z));
  }

  float noise(vec3 p) {
    vec3 cell = floor(p);
    vec3 local = fract(p);
    local = local * local * (3.0 - 2.0 * local);
    return mix(
      mix(
        mix(hash(cell), hash(cell + vec3(1.0, 0.0, 0.0)), local.x),
        mix(hash(cell + vec3(0.0, 1.0, 0.0)), hash(cell + vec3(1.0, 1.0, 0.0)), local.x),
        local.y
      ),
      mix(
        mix(hash(cell + vec3(0.0, 0.0, 1.0)), hash(cell + vec3(1.0, 0.0, 1.0)), local.x),
        mix(hash(cell + vec3(0.0, 1.0, 1.0)), hash(cell + vec3(1.0, 1.0, 1.0)), local.x),
        local.y
      ),
      local.z
    );
  }

  float fbm(vec3 p) {
    float value = 0.0;
    float amplitude = 0.5;
    mat3 rotation = mat3(
      0.00, 0.80, 0.60,
     -0.80, 0.36,-0.48,
     -0.60,-0.48, 0.64
    );
    for (int octave = 0; octave < 5; octave++) {
      value += noise(p) * amplitude;
      p = rotation * p * 2.03 + vec3(4.7, 1.3, 8.1);
      amplitude *= 0.5;
    }
    return value;
  }

  void main() {
    vec3 sphere = normalize(vObjectPosition);
    float drift = time * 0.072;
    float warpX = fbm(sphere * 3.6 + vec3(drift, 1.8, 4.2));
    float warpY = fbm(sphere * 3.9 + vec3(7.1, -drift, 2.4));
    float warpZ = fbm(sphere * 3.4 + vec3(3.7, 8.5, drift));
    vec3 warped = sphere * 10.8 + (vec3(warpX, warpY, warpZ) - 0.5) * 4.6;
    float field = fbm(warped) + fbm(warped * 1.87 + vec3(5.2, 0.7, 3.9)) * 0.34;
    float contour = abs(fract(field * 5.8 + time * 0.022) - 0.5);
    float channel = 1.0 - smoothstep(0.095, 0.18, contour);
    float fineBreakup = fbm(warped * 2.7 + 9.4);
    channel *= 0.78 + fineBreakup * 0.22;

    vec3 darkMagenta = vec3(0.19, 0.018, 0.105);
    vec3 hotPink = vec3(0.86, 0.075, 0.34);
    vec3 colour = mix(hotPink, darkMagenta, channel);

    vec3 normal = normalize(vNormal);
    vec3 viewDirection = normalize(vViewPosition);
    vec3 lightDirection = normalize(vec3(-0.55, 0.72, 1.0));
    float diffuse = 0.68 + max(dot(normal, lightDirection), 0.0) * 0.32;
    float rimShade = pow(1.0 - max(dot(normal, viewDirection), 0.0), 1.7);
    float highlight = pow(max(dot(reflect(-lightDirection, normal), viewDirection), 0.0), 42.0);
    colour *= diffuse * (1.0 - rimShade * 0.3);
    colour += vec3(1.0, 0.42, 0.64) * highlight * 0.16;
    gl_FragColor = vec4(colour, 1.0);
  }
`;

export default function LabyrinthSphere({ size = 260 }) {
  const mountRef = useRef(null);

  useEffect(() => {
    const mount = mountRef.current;
    if (!mount) return undefined;

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.6));
    renderer.setSize(size, size);
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    mount.appendChild(renderer.domElement);

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(34, 1, 0.1, 100);
    camera.position.z = 6.55;

    const geometry = new THREE.SphereGeometry(1.34, 128, 96);
    const material = new THREE.ShaderMaterial({
      uniforms: { time: { value: 0 } },
      vertexShader: VERTEX_SHADER,
      fragmentShader: FRAGMENT_SHADER,
    });
    const sphere = new THREE.Mesh(geometry, material);
    sphere.rotation.set(-0.12, 0.28, -0.06);
    scene.add(sphere);

    let rafId;
    const AUTO_SPIN_X = 0.006;
    const AUTO_SPIN_Y = 0.01;
    const HOVER_SLOWDOWN_EASING = 0.03;
    const RESTORE_EASING = 0.12;
    const MOTION_STOP_EASING = 0.075;
    const MOTION_START_EASING = 0.055;
    let dragging = false;
    let hovered = false;
    let previousX = 0;
    let previousY = 0;
    let velocityX = AUTO_SPIN_Y;
    let velocityY = AUTO_SPIN_X;
    let motionSpeed = 1;
    let surfaceTime = 0;
    const clock = new THREE.Clock();

    const onPointerDown = (event) => {
      dragging = true;
      previousX = event.clientX;
      previousY = event.clientY;
      velocityX = 0;
      velocityY = 0;
    };
    const onPointerMove = (event) => {
      if (!dragging) return;
      const dx = event.clientX - previousX;
      const dy = event.clientY - previousY;
      sphere.rotation.y += dx * 0.015;
      sphere.rotation.x += dy * 0.015;
      velocityX = dy * 0.015;
      velocityY = dx * 0.015;
      previousX = event.clientX;
      previousY = event.clientY;
    };
    const onPointerUp = () => { dragging = false; };
    const onPointerEnter = () => { hovered = true; };
    const onPointerLeave = () => { hovered = false; };
    renderer.domElement.addEventListener('pointerdown', onPointerDown);
    renderer.domElement.addEventListener('pointerenter', onPointerEnter);
    renderer.domElement.addEventListener('pointerleave', onPointerLeave);
    window.addEventListener('pointermove', onPointerMove);
    window.addEventListener('pointerup', onPointerUp);

    const animate = () => {
      rafId = requestAnimationFrame(animate);
      const delta = Math.min(clock.getDelta(), 0.05);
      const targetMotionSpeed = hovered ? 0 : 1;
      const motionEasing = hovered ? MOTION_STOP_EASING : MOTION_START_EASING;
      motionSpeed += (targetMotionSpeed - motionSpeed) * motionEasing;
      if (motionSpeed < 0.001) motionSpeed = 0;
      if (motionSpeed > 0.999) motionSpeed = 1;
      surfaceTime += delta * motionSpeed;
      material.uniforms.time.value = surfaceTime;
      if (!dragging) {
        const targetX = AUTO_SPIN_X * motionSpeed;
        const targetY = AUTO_SPIN_Y * motionSpeed;
        const easing = hovered ? HOVER_SLOWDOWN_EASING : RESTORE_EASING;
        velocityX += (targetX - velocityX) * easing;
        velocityY += (targetY - velocityY) * easing;
        sphere.rotation.x += velocityX;
        sphere.rotation.y += velocityY;
      }
      renderer.render(scene, camera);
    };
    animate();

    return () => {
      cancelAnimationFrame(rafId);
      renderer.domElement.removeEventListener('pointerdown', onPointerDown);
      renderer.domElement.removeEventListener('pointerenter', onPointerEnter);
      renderer.domElement.removeEventListener('pointerleave', onPointerLeave);
      window.removeEventListener('pointermove', onPointerMove);
      window.removeEventListener('pointerup', onPointerUp);
      geometry.dispose();
      material.dispose();
      renderer.dispose();
      if (mount.contains(renderer.domElement)) mount.removeChild(renderer.domElement);
    };
  }, [size]);

  return <div ref={mountRef} style={{ width: size, height: size, cursor: 'grab' }} />;
}

'use client';

import { useEffect, useRef } from 'react';
import * as THREE from 'three';

const VERTEX_SHADER = /* glsl */ `
  uniform float time;
  varying vec3 vObjectPosition;
  varying vec3 vViewPosition;
  varying float vShelf;
  varying float vEdge;

  float hash(vec3 p) {
    p = fract(p * 0.3183099 + 0.1);
    p *= 17.0;
    return fract(p.x * p.y * p.z * (p.x + p.y + p.z));
  }

  float noise(vec3 p) {
    vec3 cell = floor(p);
    vec3 local = fract(p);
    local = local * local * (3.0 - 2.0 * local);
    return mix(
      mix(
        mix(hash(cell), hash(cell + vec3(1.0, 0.0, 0.0)), local.x),
        mix(hash(cell + vec3(0.0, 1.0, 0.0)), hash(cell + vec3(1.0, 1.0, 0.0)), local.x),
        local.y
      ),
      mix(
        mix(hash(cell + vec3(0.0, 0.0, 1.0)), hash(cell + vec3(1.0, 0.0, 1.0)), local.x),
        mix(hash(cell + vec3(0.0, 1.0, 1.0)), hash(cell + vec3(1.0, 1.0, 1.0)), local.x),
        local.y
      ),
      local.z
    );
  }

  float fbm(vec3 p) {
    float value = 0.0;
    float amplitude = 0.5;
    mat3 rotation = mat3(
       0.36, 0.80, 0.48,
      -0.80, 0.00, 0.60,
       0.48,-0.60, 0.64
    );
    for (int octave = 0; octave < 4; octave++) {
      value += noise(p) * amplitude;
      p = rotation * p * 2.04 + vec3(3.1, 7.4, 1.8);
      amplitude *= 0.5;
    }
    return value;
  }

  void main() {
    vec3 sphere = normalize(position);
    float slowDrift = time * 0.038;
    float primaryWarp = fbm(sphere * 2.25 + vec3(slowDrift, 2.7, 5.3));
    float secondaryWarp = fbm(sphere * 4.1 + vec3(8.2, -slowDrift, 1.4));
    vec3 layerAxis = normalize(vec3(0.42, 0.88, 0.22));
    float field = dot(sphere, layerAxis) * 1.72 + primaryWarp * 0.82 + secondaryWarp * 0.18;
    float layer = fract(field * 13.5 + time * 0.014);

    float rise = smoothstep(0.035, 0.16, layer);
    float fall = 1.0 - smoothstep(0.72, 0.965, layer);
    float shelf = rise * fall;
    float leadingEdge = 1.0 - smoothstep(0.0, 0.11, abs(layer - 0.12));
    float trailingEdge = 1.0 - smoothstep(0.0, 0.12, abs(layer - 0.82));
    float edge = max(leadingEdge, trailingEdge);
    float fineRipple = (secondaryWarp - 0.5) * 0.035 * shelf;
    float displacement = shelf * 0.205 + edge * 0.055 + fineRipple - 0.035;

    vec3 transformed = position + normal * displacement;
    vec4 viewPosition = modelViewMatrix * vec4(transformed, 1.0);
    vObjectPosition = sphere;
    vViewPosition = -viewPosition.xyz;
    vShelf = shelf;
    vEdge = edge;
    gl_Position = projectionMatrix * viewPosition;
  }
`;

const FRAGMENT_SHADER = /* glsl */ `
  varying vec3 vObjectPosition;
  varying vec3 vViewPosition;
  varying float vShelf;
  varying float vEdge;

  void main() {
    vec3 normal = normalize(cross(dFdx(vViewPosition), dFdy(vViewPosition)));
    if (!gl_FrontFacing) normal *= -1.0;
    vec3 viewDirection = normalize(vViewPosition);
    vec3 keyDirection = normalize(vec3(-0.58, 0.72, 1.0));
    vec3 fillDirection = normalize(vec3(0.65, -0.15, 0.5));
    float key = max(dot(normal, keyDirection), 0.0);
    float fill = max(dot(normal, fillDirection), 0.0);
    float diffuse = 0.2 + key * 0.68 + fill * 0.16;
    float fresnel = pow(1.0 - max(dot(normal, viewDirection), 0.0), 2.1);
    float specular = pow(max(dot(reflect(-keyDirection, normal), viewDirection), 0.0), 48.0);
    float groove = (1.0 - vShelf) * 0.52;

    vec3 warmWhite = vec3(0.92, 0.925, 0.93);
    vec3 shadowGrey = vec3(0.23, 0.24, 0.26);
    vec3 colour = mix(warmWhite, shadowGrey, groove);
    colour *= diffuse;
    colour += vEdge * vec3(0.14) + fresnel * vec3(0.12) + specular * vec3(0.55);
    gl_FragColor = vec4(clamp(colour, 0.025, 1.0), 1.0);
  }
`;

export default function MushroomGills({ size = 260 }) {
  const mountRef = useRef(null);

  useEffect(() => {
    const mount = mountRef.current;
    if (!mount) return undefined;

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.6));
    renderer.setSize(size, size);
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    mount.appendChild(renderer.domElement);

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(33, 1, 0.1, 100);
    camera.position.z = 7.55;

    const geometry = new THREE.IcosahedronGeometry(1.31, 6);
    const material = new THREE.ShaderMaterial({
      uniforms: { time: { value: 0 } },
      vertexShader: VERTEX_SHADER,
      fragmentShader: FRAGMENT_SHADER,
      side: THREE.DoubleSide,
      extensions: { derivatives: true },
    });
    const sphere = new THREE.Mesh(geometry, material);
    sphere.rotation.set(-0.16, 0.34, -0.12);
    scene.add(sphere);

    let rafId;
    const AUTO_SPIN_X = 0.006;
    const AUTO_SPIN_Y = 0.01;
    const HOVER_SLOWDOWN_EASING = 0.03;
    const RESTORE_EASING = 0.12;
    const MOTION_STOP_EASING = 0.075;
    const MOTION_START_EASING = 0.055;
    let dragging = false;
    let hovered = false;
    let previousX = 0;
    let previousY = 0;
    let velocityX = AUTO_SPIN_Y;
    let velocityY = AUTO_SPIN_X;
    let motionSpeed = 1;
    let surfaceTime = 0;
    const clock = new THREE.Clock();
    const onPointerDown = (event) => {
      dragging = true;
      previousX = event.clientX;
      previousY = event.clientY;
      velocityX = 0;
      velocityY = 0;
    };
    const onPointerMove = (event) => {
      if (!dragging) return;
      const dx = event.clientX - previousX;
      const dy = event.clientY - previousY;
      sphere.rotation.y += dx * 0.015;
      sphere.rotation.x += dy * 0.015;
      velocityX = dy * 0.015;
      velocityY = dx * 0.015;
      previousX = event.clientX;
      previousY = event.clientY;
    };
    const onPointerUp = () => { dragging = false; };
    const onPointerEnter = () => { hovered = true; };
    const onPointerLeave = () => { hovered = false; };
    renderer.domElement.addEventListener('pointerdown', onPointerDown);
    renderer.domElement.addEventListener('pointerenter', onPointerEnter);
    renderer.domElement.addEventListener('pointerleave', onPointerLeave);
    window.addEventListener('pointermove', onPointerMove);
    window.addEventListener('pointerup', onPointerUp);

    const animate = () => {
      rafId = requestAnimationFrame(animate);
      const delta = Math.min(clock.getDelta(), 0.05);
      const targetMotionSpeed = hovered ? 0 : 1;
      const motionEasing = hovered ? MOTION_STOP_EASING : MOTION_START_EASING;
      motionSpeed += (targetMotionSpeed - motionSpeed) * motionEasing;
      if (motionSpeed < 0.001) motionSpeed = 0;
      if (motionSpeed > 0.999) motionSpeed = 1;
      surfaceTime += delta * motionSpeed;
      material.uniforms.time.value = surfaceTime;
      if (!dragging) {
        const targetX = AUTO_SPIN_X * motionSpeed;
        const targetY = AUTO_SPIN_Y * motionSpeed;
        const easing = hovered ? HOVER_SLOWDOWN_EASING : RESTORE_EASING;
        velocityX += (targetX - velocityX) * easing;
        velocityY += (targetY - velocityY) * easing;
        sphere.rotation.x += velocityX;
        sphere.rotation.y += velocityY;
      }
      renderer.render(scene, camera);
    };
    animate();

    return () => {
      cancelAnimationFrame(rafId);
      renderer.domElement.removeEventListener('pointerdown', onPointerDown);
      renderer.domElement.removeEventListener('pointerenter', onPointerEnter);
      renderer.domElement.removeEventListener('pointerleave', onPointerLeave);
      window.removeEventListener('pointermove', onPointerMove);
      window.removeEventListener('pointerup', onPointerUp);
      geometry.dispose();
      material.dispose();
      renderer.dispose();
      if (mount.contains(renderer.domElement)) mount.removeChild(renderer.domElement);
    };
  }, [size]);

  return <div ref={mountRef} style={{ width: size, height: size, cursor: 'grab' }} />;
}

'use client';

import { useEffect, useRef } from 'react';
import * as THREE from 'three';
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';

export default function DiscoBall({ size = 260 }) {
  const mountRef = useRef(null);

  useEffect(() => {
    const mount = mountRef.current;
    if (!mount) return undefined;

    const AUTO_SPIN_X = 0.006;
    const AUTO_SPIN_Y = 0.01;
    const HOVER_SLOWDOWN_EASING = 0.03;
    const RESTORE_EASING = 0.12;
    const MOTION_STOP_EASING = 0.075;
    const MOTION_START_EASING = 0.055;

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.6));
    renderer.setSize(size, size);
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.15;
    mount.appendChild(renderer.domElement);

    const scene = new THREE.Scene();
    const environmentScene = new RoomEnvironment();
    const environmentGenerator = new THREE.PMREMGenerator(renderer);
    const environmentTexture = environmentGenerator.fromScene(environmentScene, 0.04).texture;
    scene.environment = environmentTexture;
    const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
    camera.position.z = 4.8;

    scene.add(new THREE.AmbientLight(0xffffff, 0.22));
    const keyLight = new THREE.DirectionalLight(0xffffff, 1.5);
    keyLight.position.set(3, 3.5, 5);
    scene.add(keyLight);
    const cyanLight = new THREE.PointLight(0x67e8f9, 9, 10, 1.5);
    const pinkLight = new THREE.PointLight(0xf472b6, 8, 10, 1.5);
    const violetLight = new THREE.PointLight(0x8b5cf6, 7, 10, 1.5);
    scene.add(cyanLight, pinkLight, violetLight);

    const group = new THREE.Group();
    group.rotation.set(-0.14, 0.3, -0.05);
    scene.add(group);

    const coreGeometry = new THREE.SphereGeometry(1.17, 64, 48);
    const coreMaterial = new THREE.MeshStandardMaterial({
      color: 0xc5cbd2,
      metalness: 0.98,
      roughness: 0.07,
      envMapIntensity: 1.65,
    });
    group.add(new THREE.Mesh(coreGeometry, coreMaterial));

    const radius = 1.205;
    const latitudeBands = 28;
    const tileData = [];
    for (let band = 0; band < latitudeBands; band += 1) {
      const latitude = -Math.PI / 2 + ((band + 0.5) / latitudeBands) * Math.PI;
      const latitudeRadius = Math.max(0.08, Math.cos(latitude));
      const tilesInBand = Math.max(8, Math.round(54 * latitudeRadius));
      const tileHeight = (radius * Math.PI / latitudeBands) * 1.08;
      const tileWidth = (radius * latitudeRadius * Math.PI * 2 / tilesInBand) * 1.08;
      const offset = band % 2 === 0 ? 0 : Math.PI / tilesInBand;

      for (let tile = 0; tile < tilesInBand; tile += 1) {
        const longitude = (tile / tilesInBand) * Math.PI * 2 + offset;
        tileData.push({ latitude, longitude, tileWidth, tileHeight });
      }
    }
    const poleTileSize = (radius * Math.PI / latitudeBands) * 1.2;
    tileData.push(
      { latitude: Math.PI / 2, longitude: 0, tileWidth: poleTileSize, tileHeight: poleTileSize },
      { latitude: -Math.PI / 2, longitude: 0, tileWidth: poleTileSize, tileHeight: poleTileSize },
    );

    const tileGeometry = new THREE.PlaneGeometry(1, 1);
    const tileMaterial = new THREE.MeshPhysicalMaterial({
      color: 0xffffff,
      vertexColors: true,
      metalness: 1,
      roughness: 0.055,
      clearcoat: 1,
      clearcoatRoughness: 0.045,
      envMapIntensity: 1.9,
      side: THREE.FrontSide,
    });
    const tiles = new THREE.InstancedMesh(tileGeometry, tileMaterial, tileData.length);
    const matrix = new THREE.Matrix4();
    const normal = new THREE.Vector3();
    const position = new THREE.Vector3();
    const quaternion = new THREE.Quaternion();
    const scale = new THREE.Vector3();
    const forward = new THREE.Vector3(0, 0, 1);
    const colour = new THREE.Color();

    tileData.forEach((tile, index) => {
      normal.set(
        Math.cos(tile.latitude) * Math.cos(tile.longitude),
        Math.sin(tile.latitude),
        Math.cos(tile.latitude) * Math.sin(tile.longitude),
      ).normalize();
      position.copy(normal).multiplyScalar(radius);
      quaternion.setFromUnitVectors(forward, normal);
      scale.set(tile.tileWidth, tile.tileHeight, 1);
      matrix.compose(position, quaternion, scale);
      tiles.setMatrixAt(index, matrix);

      const brightness = 0.82 + ((index * 37) % 17) / 100;
      const tint = ((index * 17) % 9) / 420;
      colour.setRGB(brightness - tint, brightness, Math.min(1, brightness + tint));
      tiles.setColorAt(index, colour);
    });
    tiles.instanceMatrix.needsUpdate = true;
    tiles.instanceColor.needsUpdate = true;
    group.add(tiles);

    let isDragging = false;
    let isHovered = false;
    let lastX = 0;
    let lastY = 0;
    let velocityX = AUTO_SPIN_Y;
    let velocityY = AUTO_SPIN_X;
    let motionSpeed = 1;
    let lightTime = 0;
    const onPointerDown = (event) => {
      isDragging = true;
      lastX = event.clientX;
      lastY = event.clientY;
      velocityX = 0;
      velocityY = 0;
    };
    const onPointerMove = (event) => {
      if (!isDragging) return;
      const dx = event.clientX - lastX;
      const dy = event.clientY - lastY;
      group.rotation.y += dx * 0.015;
      group.rotation.x += dy * 0.015;
      velocityX = dy * 0.015;
      velocityY = dx * 0.015;
      lastX = event.clientX;
      lastY = event.clientY;
    };
    const onPointerUp = () => { isDragging = false; };
    const onPointerEnter = () => { isHovered = true; };
    const onPointerLeave = () => { isHovered = false; };
    renderer.domElement.addEventListener('pointerdown', onPointerDown);
    renderer.domElement.addEventListener('pointerenter', onPointerEnter);
    renderer.domElement.addEventListener('pointerleave', onPointerLeave);
    window.addEventListener('pointermove', onPointerMove);
    window.addEventListener('pointerup', onPointerUp);

    const clock = new THREE.Clock();
    let rafId;
    const animate = () => {
      rafId = requestAnimationFrame(animate);
      const delta = Math.min(clock.getDelta(), 0.05);
      const targetMotionSpeed = isHovered ? 0 : 1;
      const motionEasing = isHovered ? MOTION_STOP_EASING : MOTION_START_EASING;
      motionSpeed += (targetMotionSpeed - motionSpeed) * motionEasing;
      if (motionSpeed < 0.001) motionSpeed = 0;
      if (motionSpeed > 0.999) motionSpeed = 1;
      lightTime += delta * motionSpeed;

      cyanLight.position.set(Math.cos(lightTime * 0.82) * 3, Math.sin(lightTime * 0.63) * 2.4, 2.1);
      pinkLight.position.set(Math.sin(lightTime * 0.58 + 2.1) * 3.2, Math.cos(lightTime * 0.76) * 2.2, 1.4);
      violetLight.position.set(Math.cos(lightTime * 0.71 + 4.2) * 2.6, Math.sin(lightTime * 0.91) * 2.5, 2.5);

      if (!isDragging) {
        const targetX = AUTO_SPIN_X * motionSpeed;
        const targetY = AUTO_SPIN_Y * motionSpeed;
        const easing = isHovered ? HOVER_SLOWDOWN_EASING : RESTORE_EASING;
        velocityX += (targetX - velocityX) * easing;
        velocityY += (targetY - velocityY) * easing;
        group.rotation.x += velocityX;
        group.rotation.y += velocityY;
      }
      renderer.render(scene, camera);
    };
    animate();

    return () => {
      cancelAnimationFrame(rafId);
      renderer.domElement.removeEventListener('pointerdown', onPointerDown);
      renderer.domElement.removeEventListener('pointerenter', onPointerEnter);
      renderer.domElement.removeEventListener('pointerleave', onPointerLeave);
      window.removeEventListener('pointermove', onPointerMove);
      window.removeEventListener('pointerup', onPointerUp);
      coreGeometry.dispose();
      coreMaterial.dispose();
      tileGeometry.dispose();
      tileMaterial.dispose();
      environmentTexture.dispose();
      environmentGenerator.dispose();
      environmentScene.dispose();
      renderer.dispose();
      if (mount.contains(renderer.domElement)) mount.removeChild(renderer.domElement);
    };
  }, [size]);

  return <div ref={mountRef} style={{ width: size, height: size, cursor: 'pointer' }} />;
}