Three.js Particles That Morph Between Shapes in React

import * as THREE from "three";
import { MeshSurfaceSampler } from "three/addons/math/MeshSurfaceSampler.js";

export type PointList = Float32Array; // x, y, z, x, y, z, ...

// Any list of points -> exactly `count` points. Every shape ends up the same length,
// so particle i always has a target in the next shape.
export function resample(src: PointList, count: number, jitter = 0): PointList {
  const n = src.length / 3;
  const out = new Float32Array(count * 3);
  for (let i = 0; i < count; i++) {
    const j = Math.floor(Math.random() * n) * 3;
    out[i * 3] = src[j] + (Math.random() - 0.5) * jitter;
    out[i * 3 + 1] = src[j + 1] + (Math.random() - 0.5) * jitter;
    out[i * 3 + 2] = src[j + 2] + (Math.random() - 0.5) * jitter;
  }
  return out;
}

// Even spread over a sphere (Fibonacci lattice): no clumps at the poles.
export function sphere(count: number, radius = 2): PointList {
  const out = new Float32Array(count * 3);
  const golden = Math.PI * (3 - Math.sqrt(5));
  for (let i = 0; i < count; i++) {
    const y = 1 - (i / (count - 1)) * 2;
    const r = Math.sqrt(1 - y * y);
    const a = i * golden;
    out[i * 3] = Math.cos(a) * r * radius;
    out[i * 3 + 1] = y * radius;
    out[i * 3 + 2] = Math.sin(a) * r * radius;
  }
  return out;
}

// Points spread over the surface of any mesh, weighted by triangle area.
export function surface(geometry: THREE.BufferGeometry, count: number): PointList {
  const mesh = new THREE.Mesh(geometry);
  const sampler = new MeshSurfaceSampler(mesh).build();
  const out = new Float32Array(count * 3);
  const p = new THREE.Vector3();
  for (let i = 0; i < count; i++) {
    sampler.sample(p);
    out[i * 3] = p.x;
    out[i * 3 + 1] = p.y;
    out[i * 3 + 2] = p.z;
  }
  geometry.dispose();
  return out;
}

// Draw the word on a 2D canvas, keep every filled pixel on a grid, then resample.
export function text(word: string, count: number, font = "700 160px system-ui, sans-serif"): PointList {
  const w = 1000;
  const h = 240;
  const canvas = document.createElement("canvas");
  canvas.width = w;
  canvas.height = h;
  const ctx = canvas.getContext("2d", { willReadFrequently: true });
  if (!ctx) return sphere(count);
  ctx.fillStyle = "#fff";
  ctx.font = font;
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(word, w / 2, h / 2);
  const data = ctx.getImageData(0, 0, w, h).data;
  const pts: number[] = [];
  const step = 3;
  for (let y = 0; y < h; y += step) {
    for (let x = 0; x < w; x += step) {
      if (data[(y * w + x) * 4 + 3] > 128) pts.push((x - w / 2) / 110, -(y - h / 2) / 110, 0);
    }
  }
  if (pts.length === 0) return sphere(count);
  return resample(new Float32Array(pts), count, 0.03);
}

"use client";

import { useEffect, useRef } from "react";
import * as THREE from "three";
import { resample, sphere, surface, text } from "@/lib/shapes";

type Props = { word?: string; count?: number; className?: string };

export default function ParticleMorph({ word = "morph", count = 6000, className = "" }: Props) {
  const hostRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const host = hostRef.current;
    if (!host) return;

    // Every shape has exactly `count` points, so index i always has a target.
    const shapes = [
      sphere(count),
      text(word, count),
      resample(surface(new THREE.TorusKnotGeometry(1.3, 0.4, 200, 24), count * 2), count),
    ];
    let current = 0;

    const renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
    renderer.setSize(host.clientWidth, host.clientHeight);
    host.appendChild(renderer.domElement); // canvas made here, so Strict Mode can't reuse a dead one

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(45, host.clientWidth / host.clientHeight, 0.1, 100);
    camera.position.z = 8;

    const positions = Float32Array.from(shapes[0]);
    const velocity = new Float32Array(count * 3);
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
    const material = new THREE.PointsMaterial({
      size: 0.035,
      color: "#c6ff3d",
      transparent: true,
      opacity: 0.85,
      blending: THREE.AdditiveBlending,
      depthWrite: false,
    });
    const points = new THREE.Points(geometry, material);
    scene.add(points);

    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)");
    let visible = true;
    let raf = 0;

    const step = () => {
      raf = 0;
      const target = shapes[current];
      for (let i = 0; i < positions.length; i++) {
        velocity[i] += (target[i] - positions[i]) * 0.012; // spring toward the target
        velocity[i] *= 0.88; // damping
        positions[i] += velocity[i];
      }
      geometry.attributes.position.needsUpdate = true;
      points.rotation.y += current === 1 ? -points.rotation.y * 0.05 : 0.004;
      renderer.render(scene, camera);
      if (visible && !document.hidden && !reduce.matches) raf = requestAnimationFrame(step);
    };

    const drawStill = () => {
      positions.set(shapes[current]);
      velocity.fill(0);
      points.rotation.y = 0;
      geometry.attributes.position.needsUpdate = true;
      renderer.render(scene, camera);
    };

    const start = () => {
      if (reduce.matches) {
        cancelAnimationFrame(raf); // a loop that is already running must stop too
        raf = 0;
        return drawStill();
      }
      if (!raf && visible && !document.hidden) raf = requestAnimationFrame(step);
    };

    const onClick = () => {
      current = (current + 1) % shapes.length;
      start();
    };

    const io = new IntersectionObserver(([entry]) => {
      visible = entry.isIntersecting;
      start();
    });
    io.observe(host);

    const onResize = () => {
      camera.aspect = host.clientWidth / host.clientHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(host.clientWidth, host.clientHeight);
      if (reduce.matches) drawStill();
    };
    const ro = new ResizeObserver(onResize);
    ro.observe(host);

    host.addEventListener("click", onClick);
    document.addEventListener("visibilitychange", start);
    reduce.addEventListener("change", start);
    start();

    return () => {
      cancelAnimationFrame(raf);
      io.disconnect();
      ro.disconnect();
      host.removeEventListener("click", onClick);
      document.removeEventListener("visibilitychange", start);
      reduce.removeEventListener("change", start);
      geometry.dispose();
      material.dispose();
      renderer.dispose();
      renderer.forceContextLoss();
      renderer.domElement.remove();
    };
  }, [word, count]);

  return <div ref={hostRef} className={`h-full w-full cursor-pointer ${className}`} />;
}

import ParticleMorph from "@/components/ParticleMorph";

export default function Page() {
  return (
    <main className="mx-auto max-w-5xl px-6 py-16">
      <h1 className="text-3xl font-semibold">Click the particles</h1>
      <div className="mt-8 h-[520px] rounded-2xl border border-white/10">
        <ParticleMorph word="hello" />
      </div>
    </main>
  );
}