CrystalCore

"use client";

import { useEffect, useRef } from "react";
import { useReducedMotion } from "motion/react";

type CrystalCoreProps = {
  /** Six-digit hex colour of the quartz. */
  tint?: string;
  /** Six-digit hex colour of the light inside. */
  glow?: string;
  /** 1 is the default pace; 2 is twice as fast. */
  speed?: number;
  /** Name read out by screen readers. */
  label?: string;
  /** Set the size here. */
  className?: string;
};

const MAX_PIXELS = 1200000;
const VERTEX = `attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}`;

/* Every crystal is a true convex solid: 6 sides, 6 tip faces and a foot, cut by planes. So facets stay sharp at any size and light can bounce inside. */
const FRAGMENT = `precision highp float;
uniform vec2 res,turn;
uniform vec3 tint,glow;
uniform float time,charge,wave,pulse;
uniform vec4 pA[7],pB[7],rock[14];
const vec3 H=vec3(0.,-.25,0.);
vec3 orbit(vec3 v){
  float c=cos(turn.y),s=sin(turn.y);
  v=vec3(v.x,c*v.y-s*v.z,s*v.y+c*v.z);
  c=cos(turn.x);s=sin(turn.x);
  return vec3(c*v.x+s*v.z,v.y,-s*v.x+c*v.z);
}
vec3 toLocal(vec3 v,vec3 a){
  vec3 u=normalize(cross(a,vec3(.31,.17,.93))),w=cross(a,u);
  return vec3(dot(v,u),dot(v,a),dot(v,w));
}
vec3 toWorld(vec3 v,vec3 a){
  vec3 u=normalize(cross(a,vec3(.31,.17,.93))),w=cross(a,u);
  return u*v.x+a*v.y+w*v.z;
}
void cut(vec3 ro,vec3 rd,vec3 n,float h,inout float tN,inout float tF,inout vec3 nN,inout vec3 nF){
  float den=dot(n,rd),num=h-dot(n,ro);
  if(abs(den)<1e-5){if(num<0.)tN=1e6;return;}
  float t=num/den;
  if(den<0.){if(t>tN){tN=t;nN=n;}}
  else if(t<tF){tF=t;nF=n;}
}
bool prism(vec3 ro,vec3 rd,float r,float L,out float tN,out float tF,out vec3 nN,out vec3 nF){
  tN=-1e5;tF=1e5;nN=vec3(0.,1.,0.);nF=nN;
  float top=L+r*1.15;
  for(int i=0;i<6;i++){
    float k=float(i),a=k*1.0472+.2,slope=mod(k,2.)<.5?1.:1.45;
    vec2 e=vec2(cos(a),sin(a));
    cut(ro,rd,vec3(e.x,0.,e.y),r,tN,tF,nN,nF);
    float size=length(vec2(slope,1.));
    cut(ro,rd,vec3(e.x*slope,1.,e.y*slope)/size,top/size,tN,tF,nN,nF);
  }
  cut(ro,rd,vec3(0.,-1.,0.),0.,tN,tF,nN,nF);
  return tN<tF;
}
float hash(vec3 p){return fract(sin(dot(p,vec3(12.9898,78.233,37.719)))*43758.5453);}
float noise(vec3 p){
  vec3 i=floor(p),f=fract(p);
  f=f*f*(3.-2.*f);
  return mix(mix(mix(hash(i),hash(i+vec3(1.,0.,0.)),f.x),mix(hash(i+vec3(0.,1.,0.)),hash(i+vec3(1.,1.,0.)),f.x),f.y),
             mix(mix(hash(i+vec3(0.,0.,1.)),hash(i+vec3(1.,0.,1.)),f.x),mix(hash(i+vec3(0.,1.,1.)),hash(i+vec3(1.,1.,1.)),f.x),f.y),f.z);
}
vec3 room(vec3 v){
  float up=.5+.5*v.y;
  vec3 c=mix(vec3(.006,.006,.009),tint*.15,up*up*up);
  c+=vec3(1.,.96,.9)*pow(max(dot(v,normalize(vec3(-.5,.7,.5))),0.),30.)*4.2;
  c+=tint*pow(max(dot(v,normalize(vec3(.8,.2,.3))),0.),12.)*.55;
  c+=vec3(.9,.86,.8)*smoothstep(.9,.96,sin(v.y*11.+v.x*5.+v.z*3.)*.5+.5)*.5;
  c+=glow*smoothstep(-.1,-.9,v.y)*.3*charge;
  return c;
}
vec3 inside(vec3 p,vec3 r,vec4 A,vec4 B){
  vec3 heart=toLocal(H-B.xyz,A.xyz),absorb=-log(max(tint,vec3(.05)))*.36,sum=vec3(0.),keep=vec3(1.);
  for(int i=0;i<3;i++){
    float a,b;vec3 na,nb;
    prism(p,r,A.w,B.w,a,b,na,nb);
    vec3 h=heart-p;
    float s=clamp(dot(h,r),0.,b),gap=length(h-r*s);
    sum+=keep*glow*charge*.1/(.05+gap*gap);
    float ring=length(p+r*b*.5-heart)-wave;
    sum+=keep*glow*exp(-ring*ring*4.)*pulse*1.5;
    keep*=exp(-absorb*b);
    vec3 e=p+r*b,leave=refract(r,-nb,1.55);
    if(dot(leave,leave)>.01){sum+=keep*room(toWorld(leave,A.xyz))*.75;keep*=.3;}
    r=reflect(r,nb);
    p=e-nb*.001;
  }
  return sum;
}
void main(){
  vec2 uv=(gl_FragCoord.xy-.5*res)/(.5*min(res.x,res.y));
  vec3 o=orbit(vec3(0.,0.,7.2))+vec3(0.,.42,0.),d=orbit(normalize(vec3(uv,-2.6)));
  float best=1e5;vec3 nHit=vec3(0.);vec4 hA=vec4(0.),hB=vec4(0.);bool stone=false;
  for(int i=0;i<7;i++){
    vec4 A=pA[i],B=pB[i];
    vec3 c=B.xyz+A.xyz*B.w*.6-o;
    float k=dot(c,d),rad=B.w*.7+A.w*1.6;
    if(dot(c,c)-k*k>rad*rad)continue;
    float a,b;vec3 na,nb;
    if(prism(toLocal(o-B.xyz,A.xyz),toLocal(d,A.xyz),A.w,B.w,a,b,na,nb)&&a>0.&&a<best){
      best=a;nHit=toWorld(na,A.xyz);hA=A;hB=B;
    }
  }
  float tN=-1e5,tF=1e5;vec3 nN=vec3(0.,1.,0.),nF=nN;
  for(int i=0;i<14;i++)cut(o,d,rock[i].xyz,rock[i].w,tN,tF,nN,nF);
  if(tN<tF&&tN>0.&&tN<best){best=tN;nHit=nN;stone=true;}
  vec4 col;
  if(best>9e4){
    float halo=exp(-dot(uv-vec2(0.,-.2),uv-vec2(0.,-.2))*1.5)*.11*charge;
    col=vec4(glow*halo,halo);
  }else{
    vec3 p=o+d*best,c;
    if(stone){
      float grain=noise(p*5.)*.6+noise(p*19.)*.4;
      float key=max(dot(nHit,normalize(vec3(-.5,.7,.5))),0.);
      float near=exp(-length(p-vec3(0.,-.8,0.))*1.5);
      c=vec3(.022,.02,.021)*(.25+1.1*key)*(.45+grain)+glow*near*(.22+grain*.3)*charge*.65;
      c+=glow*exp(-pow(length(p-H)-wave,2.)*5.)*pulse*.5*grain;
    }else{
      float f=.09+.91*pow(1.-max(dot(-d,nHit),0.),5.);
      vec3 l=toLocal(p-hB.xyz,hA.xyz);
      vec3 r=refract(toLocal(d,hA.xyz),toLocal(nHit,hA.xyz),.645);
      c=room(reflect(d,nHit))*f+inside(l+r*.001,r,hA,hB)*(1.-f);
    }
    c=1.-exp(-c*1.5);
    col=vec4(pow(c,vec3(.75)),1.);
  }
  gl_FragColor=col;
}`;

/* axis x, y, z, radius, then foot x, y, z, length */
const CRYSTALS = [
  [0.02, 1, 0.05, 0.55, 0, -1.1, 0, 2.2],
  [-0.38, 0.9, 0.2, 0.38, -0.5, -1, 0.2, 1.5],
  [0.42, 0.88, -0.15, 0.42, 0.55, -1.05, -0.1, 1.7],
  [0.7, 0.7, 0.25, 0.24, 0.9, -1, 0.35, 1],
  [-0.75, 0.62, -0.25, 0.26, -0.85, -1, -0.3, 1],
  [0.1, 0.8, 0.6, 0.3, 0.1, -1, 0.5, 1.1],
  [-0.2, 0.85, -0.55, 0.28, -0.2, -1, -0.55, 1.25],
];

/* The rock: 14 flat cuts around a squashed ball, each a little deeper than the last, so it reads as broken stone. */
function rockPlanes() {
  return Array.from({ length: 14 }, (_, i) => {
    const y = 1 - (2 * (i + 0.5)) / 14;
    const round = Math.sqrt(1 - y * y);
    const x = Math.cos(i * 2.39996) * round;
    const z = Math.sin(i * 2.39996) * round;
    const reach = Math.hypot(x * 2.05, y * 0.92, z * 1.75);
    return [x, y, z, -1.55 * y + reach * (0.84 + 0.16 * ((i * 0.618) % 1))];
  }).flat();
}

const rgb = (hex: string) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);

function program(gl: WebGLRenderingContext) {
  const made = gl.createProgram();
  for (const [type, text] of [[gl.VERTEX_SHADER, VERTEX], [gl.FRAGMENT_SHADER, FRAGMENT]] as const) {
    const shader = gl.createShader(type);
    if (!made || !shader) return null;
    gl.shaderSource(shader, text);
    gl.compileShader(shader);
    gl.attachShader(made, shader);
  }
  if (!made) return null;
  gl.linkProgram(made);
  return gl.getProgramParameter(made, gl.LINK_STATUS) ? made : null;
}

/* CrystalCore: a quartz cluster on broken rock with a slow light inside. Drag or arrow keys turn it; a press sends a pulse of light out through the stone. Runs only while on screen. */
export function CrystalCore({
  tint = "#d8a874",
  glow = "#ff6a24",
  speed = 1,
  label = "A quartz crystal cluster with a light inside. Drag or use arrow keys to turn it, press to pulse.",
  className = "aspect-square w-80",
}: CrystalCoreProps) {
  const reduce = useReducedMotion();
  const boxRef = useRef<HTMLButtonElement>(null);
  const plainRef = useRef<HTMLSpanElement>(null);

  useEffect(() => {
    const box = boxRef.current;
    const plain = plainRef.current;
    if (!box || !plain) return;
    const canvas = document.createElement("canvas");
    canvas.setAttribute("aria-hidden", "true");
    canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%";
    const gl = canvas.getContext("webgl", { alpha: true, antialias: false });
    const made = gl && program(gl);
    if (!gl || !made) return;
    gl.useProgram(made);
    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
    const corner = gl.getAttribLocation(made, "p");
    gl.enableVertexAttribArray(corner);
    gl.vertexAttribPointer(corner, 2, gl.FLOAT, false, 0, 0);
    const at = (name: string) => gl.getUniformLocation(made, name);

    gl.uniform3fv(at("tint"), rgb(tint));
    gl.uniform3fv(at("glow"), rgb(glow));
    gl.uniform4fv(at("pA"), CRYSTALS.flatMap(([x, y, z, r]) => {
      const size = Math.hypot(x, y, z);
      return [x / size, y / size, z / size, r];
    }));
    gl.uniform4fv(at("pB"), CRYSTALS.flatMap((c) => c.slice(4)));
    gl.uniform4fv(at("rock"), rockPlanes());

    let raf = 0;
    let last = 0;
    let inView = false;
    let time = reduce ? 4 : 0;
    let yaw = 0.5;
    let pitch = 0.1;
    let spin = 0.14;
    let age = reduce ? 0.45 : 9;
    let held = false;
    let moved = 0;
    let lastX = 0;
    let lastY = 0;

    const draw = () => {
      gl.uniform2f(at("turn"), yaw, pitch);
      gl.uniform1f(at("time"), time % 1000);
      gl.uniform1f(at("charge"), 0.75 + 0.16 * Math.sin(time * 1.1) + 0.08 * Math.sin(time * 2.3));
      gl.uniform1f(at("wave"), age * 3.4);
      gl.uniform1f(at("pulse"), Math.max(0, 1 - age / 1.15));
      gl.drawArrays(gl.TRIANGLES, 0, 3);
    };

    const frame = (now: number) => {
      const dt = Math.min(0.05, (now - last) / 1000 || 0);
      last = now;
      time += dt * speed;
      age += dt;
      if (!held) {
        yaw += spin * dt;
        spin += (0.14 * speed - spin) * Math.min(1, dt * 2.4);
      }
      draw();
      raf = inView ? requestAnimationFrame(frame) : 0;
    };

    const start = () => {
      if (inView && !raf && !reduce) raf = requestAnimationFrame(frame);
    };

    const fit = () => {
      const { width, height } = box.getBoundingClientRect();
      if (!width || !height) return;
      const scale = Math.min(Math.max(window.devicePixelRatio, 1.5), 2, Math.sqrt(MAX_PIXELS / (width * height)));
      canvas.width = Math.round(width * scale);
      canvas.height = Math.round(height * scale);
      gl.viewport(0, 0, canvas.width, canvas.height);
      gl.uniform2f(at("res"), canvas.width, canvas.height);
      draw();
    };

    const press = (e: PointerEvent) => {
      held = true;
      moved = 0;
      lastX = e.clientX;
      lastY = e.clientY;
      box.setPointerCapture(e.pointerId);
    };
    const drag = (e: PointerEvent) => {
      if (!held) return;
      const dx = e.clientX - lastX;
      const dy = e.clientY - lastY;
      lastX = e.clientX;
      lastY = e.clientY;
      moved += Math.abs(dx) + Math.abs(dy);
      yaw += dx * 0.009;
      pitch = Math.min(0.5, Math.max(-0.12, pitch + dy * 0.005));
      spin = dx * 0.4;
      if (reduce) draw();
    };
    const release = () => {
      held = false;
    };
    const click = () => {
      if (moved > 6) {
        moved = 0;
        return;
      }
      age = reduce ? 0.45 : 0;
      if (reduce) draw();
    };
    const key = (e: KeyboardEvent) => {
      const turn = { ArrowLeft: -1, ArrowRight: 1 }[e.key] ?? 0;
      const tilt = { ArrowUp: -1, ArrowDown: 1 }[e.key] ?? 0;
      if (!turn && !tilt) return;
      e.preventDefault();
      yaw += turn * 0.2;
      spin = turn * 1.4 || spin;
      pitch = Math.min(0.5, Math.max(-0.12, pitch + tilt * 0.08));
      if (reduce) draw();
    };

    fit();
    box.append(canvas);
    plain.hidden = true;
    const sized = new ResizeObserver(fit);
    sized.observe(box);
    const watch = new IntersectionObserver(([entry]) => {
      inView = entry.isIntersecting;
      start();
    });
    watch.observe(box);
    const lost = () => {
      canvas.remove();
      plain.hidden = false;
    };
    canvas.addEventListener("webglcontextlost", lost);
    box.addEventListener("pointerdown", press);
    box.addEventListener("pointermove", drag);
    box.addEventListener("pointerup", release);
    box.addEventListener("pointercancel", release);
    box.addEventListener("click", click);
    box.addEventListener("keydown", key);

    return () => {
      cancelAnimationFrame(raf);
      sized.disconnect();
      watch.disconnect();
      canvas.removeEventListener("webglcontextlost", lost);
      box.removeEventListener("pointerdown", press);
      box.removeEventListener("pointermove", drag);
      box.removeEventListener("pointerup", release);
      box.removeEventListener("pointercancel", release);
      box.removeEventListener("click", click);
      box.removeEventListener("keydown", key);
      gl.getExtension("WEBGL_lose_context")?.loseContext();
      canvas.remove();
      plain.hidden = false;
    };
  }, [tint, glow, speed, reduce]);

  return (
    <button ref={boxRef} type="button" aria-label={label} className={`relative block cursor-grab touch-pan-y overflow-hidden active:cursor-grabbing ${className}`}>
      <span
        ref={plainRef}
        className="absolute left-1/2 top-[18%] h-[64%] w-[26%] -translate-x-1/2"
        style={{ background: `linear-gradient(160deg, ${tint}, ${glow})`, clipPath: "polygon(50% 0, 100% 22%, 100% 100%, 0 100%, 0 22%)" }}
      />
    </button>
  );
}