Particle sphere in three.js

A particle sphere in three.js is a few dozen lines: points spread evenly over a sphere, PointsMaterial and a slow spin. The free React component below does exactly that. Particle Morph starts from the same sphere and adds pointer scatter and a click that morphs it into your word.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Three.js particle sphere: a free React component

components/ParticleSphere.tsx

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

type Props = { count?: number; radius?: number; color?: string; size?: number; className?: string };

// Points spread evenly over a sphere: a Fibonacci (golden-angle) spiral.
// Each point sits at its own height, so there are no clumps at the poles.
export function fibonacciSphere(count: number, radius: number) {
  const a = new Float32Array(count * 3);
  const golden = Math.PI * (3 - Math.sqrt(5)); // about 2.39996 rad
  for (let i = 0; i < count; i++) {
    const y = 1 - (i / (count - 1)) * 2; // 1 at the top, -1 at the bottom
    const r = Math.sqrt(1 - y * y);
    const t = i * golden;
    a[i * 3] = Math.cos(t) * r * radius;
    a[i * 3 + 1] = y * radius;
    a[i * 3 + 2] = Math.sin(t) * r * radius;
  }
  return a;
}

export default function ParticleSphere({
  count = 4000,
  radius = 2.6,
  color = "#C6FF3D",
  size = 0.06,
  className = "",
}: Props) {
  const host = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = host.current!;
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
    renderer.setSize(el.clientWidth, el.clientHeight);
    el.append(renderer.domElement);
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(45, el.clientWidth / el.clientHeight, 0.1, 100);
    camera.position.z = 9;

    // PointsMaterial draws squares; a small white circle as the map makes round dots
    const dot = document.createElement("canvas");
    dot.width = dot.height = 32;
    const g = dot.getContext("2d")!;
    g.beginPath();
    g.arc(16, 16, 15, 0, Math.PI * 2);
    g.fillStyle = "#fff";
    g.fill();
    const map = new THREE.CanvasTexture(dot);

    const geo = new THREE.BufferGeometry();
    geo.setAttribute("position", new THREE.BufferAttribute(fibonacciSphere(count, radius), 3));
    const mat = new THREE.PointsMaterial({
      color, size, map, transparent: true, alphaTest: 0.5, depthWrite: false,
      blending: THREE.AdditiveBlending, // overlapping dots glow
    });
    const points = new THREE.Points(geo, mat);
    points.rotation.x = 0.35; // tilt so the spiral reads as a globe
    scene.add(points);

    const reduced = matchMedia("(prefers-reduced-motion: reduce)");
    let raf = 0;
    let onScreen = true;
    const frame = (now: number) => {
      raf = 0;
      points.rotation.y = (now / 1000) * 0.25;
      renderer.render(scene, camera);
      loop();
    };
    const loop = () => {
      if (raf) return;
      if (reduced.matches) { renderer.render(scene, camera); return; } // still frame
      if (onScreen && !document.hidden) raf = requestAnimationFrame(frame);
    };
    const stop = () => { cancelAnimationFrame(raf); raf = 0; };

    const io = new IntersectionObserver(([e]) => {
      onScreen = e.isIntersecting;
      if (onScreen) loop(); else stop();
    });
    io.observe(el);
    const onVis = () => (document.hidden ? stop() : loop());
    document.addEventListener("visibilitychange", onVis);
    const onResize = () => {
      camera.aspect = el.clientWidth / el.clientHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(el.clientWidth, el.clientHeight);
      renderer.render(scene, camera);
    };
    addEventListener("resize", onResize);
    loop();

    return () => {
      stop();
      io.disconnect();
      document.removeEventListener("visibilitychange", onVis);
      removeEventListener("resize", onResize);
      geo.dispose();
      mat.dispose();
      map.dispose();
      renderer.dispose();
      renderer.domElement.remove();
    };
  }, [count, radius, color, size]);

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

app/page.tsx

import ParticleSphere from "@/components/ParticleSphere";

export default function Page() {
  return (
    <section className="h-[70vh] bg-black">
      <ParticleSphere count={4000} color="#8B6CFF" />
    </section>
  );
}

Good to know

fibonacciSphere() gives point i the height y = 1 - 2i/(n - 1) and turns each point by the golden angle (about 2.39996 rad) from the one before, so the points spread evenly with no clumps at the poles.
PointsMaterial draws square points. The 32 px white circle used as map, with alphaTest 0.5, makes them round.
Additive blending makes overlapping dots glow, so the back of the sphere shows through the front. For a solid look, use NormalBlending and set depthWrite back to true.
Point size is in world units and shrinks with distance, because sizeAttenuation is on by default. Raise size if the dots vanish on small screens.
It stops while scrolled away or with the tab hidden, and with Reduce Motion on it draws one still frame.
All the three.js code runs inside useEffect, so the component renders in a normal server page without next/dynamic.

Particle sphere from SphereGeometry, and why points bunch at the poles

The shortest particle sphere in three.js is one line: new THREE.Points(new THREE.SphereGeometry(2.6, 64, 32), material). It works and it's a fine start. The catch is where the points land. In three 0.186.1 that geometry has 2,145 vertices but only 2,017 distinct positions: 65 vertices sit on the top pole, 65 on the bottom, and one column is doubled along the seam. Rings near the poles are also packed tighter, so the dots bunch up at the top and bottom.
That's fine for a latitude-and-longitude look. For an even dusting, the Fibonacci spiral above puts every point at its own height.
In React Three Fiber, the same buffer goes into a <points> element, or drei's <Points>. The React Three Fiber particles guide has that version with useFrame.
If all you need is a rotating dotted sphere, ParticleSphere.tsx or the one-liner is the better fit, and you don't need to buy anything.

Interactive particle sphere: pointer scatter and a morph

Particle Morph's resting shape is the same Fibonacci sphere: radius 2.6, 9,000 points by default, coloured by x from colorA to colorB. Move the pointer and the points within reach are pushed away, then springs pull them back. A click turns the sphere into your word, then a torus knot, then back to the sphere. The sphere and the knot spin slowly and the word holds still so it stays readable.
Pick it when the hero sphere should react to the visitor and turn into your brand name. The spring loop runs in JavaScript for every particle each frame, so it's built for thousands of points, not hundreds of thousands. For morphing between shapes in general (morph targets, a shader, sampling meshes), see the blog post on three.js particles that morph between shapes.

What we ran on this particle sphere code

On October 25, 2026, ParticleSphere.tsx and app/page.tsx type-checked against three 0.186.1 (the current npm release), @types/three 0.186.0, @types/react 19.3.0 and TypeScript 5.9.3. The SphereGeometry vertex counts above come from running three 0.186.1 in Node.
We ran the compiled component in headless Chromium with software WebGL at 900 x 500, with and without Reduce Motion. It drew the sphere with round dots and logged no errors. Not tested: Safari and Firefox WebGL (our headless Firefox had no WebGL), real phones and GPUs, frame rates, and a full Next.js build with these files.
Tailwind v4: Particle Morph ships no CSS file. The component's only styling is four Tailwind classes on its wrapper div (relative h-full w-full cursor-crosshair), and our Tailwind 4.3.3 check of every paid piece found it works as-is, with no change in computed styles. It doesn't touch shadcn or daisyUI styles, so no scoping edit is needed. The free component on this page uses h-full w-full and nothing else.

Install

Copy from the zipPut react/src/components into src/, then npm i three && npm i -D @types/three.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

count: number of particles (9,000 by default)
colorA / colorB: the gradient across x
word: the word the sphere morphs into
font: font used for the word

How qodesign compares

qodesign vs React BitsReact Bits is best for: text animations, animated backgrounds and creative effects.
qodesign vs Aceternity UIAceternity UI is best for: teams building many marketing pages who want one big library.

All comparisons, with prices read on each library's own site.

From the blog: Three.js Particles That Morph Between Shapes in React

Questions

Why are my three.js particles squares?

PointsMaterial draws squares. Give it a small circle texture as map and set alphaTest, as ParticleSphere.tsx does, or draw the circle in a ShaderMaterial.

Why do the points bunch up at the poles?

SphereGeometry places vertices on latitude rings, so the poles get many vertices in one spot. A Fibonacci sphere spreads them evenly.

Can the particle sphere react to the mouse?

Particle Morph does: the pointer pushes particles away and springs pull them back. In the free component you could start by tilting points.rotation with the pointer position.

Will it change my shadcn styles?

No. Particle Morph ships no CSS file, only four Tailwind classes on its own div, so your shadcn or daisyUI styles stay as they are.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.

Three.js particle sphere: a free React component

components/ParticleSphere.tsx

"use client"; import { useEffect, useRef } from "react"; import * as THREE from "three"; type Props = { count?: number; radius?: number; color?: string; size?: number; className?: string }; // Points spread evenly over a sphere: a Fibonacci (golden-angle) spiral. // Each point sits at its own height, so there are no clumps at the poles. export function fibonacciSphere(count: number, radius: number) { const a = new Float32Array(count * 3); const golden = Math.PI * (3 - Math.sqrt(5)); // about 2.39996 rad for (let i = 0; i < count; i++) { const y = 1 - (i / (count - 1)) * 2; // 1 at the top, -1 at the bottom const r = Math.sqrt(1 - y * y); const t = i * golden; a[i * 3] = Math.cos(t) * r * radius; a[i * 3 + 1] = y * radius; a[i * 3 + 2] = Math.sin(t) * r * radius; } return a; } export default function ParticleSphere({ count = 4000, radius = 2.6, color = "#C6FF3D", size = 0.06, className = "", }: Props) { const host = useRef<HTMLDivElement>(null); useEffect(() => { const el = host.current!; const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); renderer.setSize(el.clientWidth, el.clientHeight); el.append(renderer.domElement); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, el.clientWidth / el.clientHeight, 0.1, 100); camera.position.z = 9; // PointsMaterial draws squares; a small white circle as the map makes round dots const dot = document.createElement("canvas"); dot.width = dot.height = 32; const g = dot.getContext("2d")!; g.beginPath(); g.arc(16, 16, 15, 0, Math.PI * 2); g.fillStyle = "#fff"; g.fill(); const map = new THREE.CanvasTexture(dot); const geo = new THREE.BufferGeometry(); geo.setAttribute("position", new THREE.BufferAttribute(fibonacciSphere(count, radius), 3)); const mat = new THREE.PointsMaterial({ color, size, map, transparent: true, alphaTest: 0.5, depthWrite: false, blending: THREE.AdditiveBlending, // overlapping dots glow }); const points = new THREE.Points(geo, mat); points.rotation.x = 0.35; // tilt so the spiral reads as a globe scene.add(points); const reduced = matchMedia("(prefers-reduced-motion: reduce)"); let raf = 0; let onScreen = true; const frame = (now: number) => { raf = 0; points.rotation.y = (now / 1000) * 0.25; renderer.render(scene, camera); loop(); }; const loop = () => { if (raf) return; if (reduced.matches) { renderer.render(scene, camera); return; } // still frame if (onScreen && !document.hidden) raf = requestAnimationFrame(frame); }; const stop = () => { cancelAnimationFrame(raf); raf = 0; }; const io = new IntersectionObserver(([e]) => { onScreen = e.isIntersecting; if (onScreen) loop(); else stop(); }); io.observe(el); const onVis = () => (document.hidden ? stop() : loop()); document.addEventListener("visibilitychange", onVis); const onResize = () => { camera.aspect = el.clientWidth / el.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(el.clientWidth, el.clientHeight); renderer.render(scene, camera); }; addEventListener("resize", onResize); loop(); return () => { stop(); io.disconnect(); document.removeEventListener("visibilitychange", onVis); removeEventListener("resize", onResize); geo.dispose(); mat.dispose(); map.dispose(); renderer.dispose(); renderer.domElement.remove(); }; }, [count, radius, color, size]); return <div ref={host} className={`h-full w-full ${className}`} />; }

app/page.tsx

import ParticleSphere from "@/components/ParticleSphere";

export default function Page() {
  return (
    <section className="h-[70vh] bg-black">
      <ParticleSphere count={4000} color="#8B6CFF" />
    </section>
  );
}

Good to know

fibonacciSphere() gives point i the height y = 1 - 2i/(n - 1) and turns each point by the golden angle (about 2.39996 rad) from the one before, so the points spread evenly with no clumps at the poles.

PointsMaterial draws square points. The 32 px white circle used as map, with alphaTest 0.5, makes them round.

Additive blending makes overlapping dots glow, so the back of the sphere shows through the front. For a solid look, use NormalBlending and set depthWrite back to true.

Point size is in world units and shrinks with distance, because sizeAttenuation is on by default. Raise size if the dots vanish on small screens.

It stops while scrolled away or with the tab hidden, and with Reduce Motion on it draws one still frame.

All the three.js code runs inside useEffect, so the component renders in a normal server page without next/dynamic.

Particle sphere from SphereGeometry, and why points bunch at the poles

The shortest particle sphere in three.js is one line: new THREE.Points(new THREE.SphereGeometry(2.6, 64, 32), material). It works and it's a fine start. The catch is where the points land. In three 0.186.1 that geometry has 2,145 vertices but only 2,017 distinct positions: 65 vertices sit on the top pole, 65 on the bottom, and one column is doubled along the seam. Rings near the poles are also packed tighter, so the dots bunch up at the top and bottom.

That's fine for a latitude-and-longitude look. For an even dusting, the Fibonacci spiral above puts every point at its own height.

In React Three Fiber, the same buffer goes into a <points> element, or drei's <Points>. The React Three Fiber particles guide has that version with useFrame.

If all you need is a rotating dotted sphere, ParticleSphere.tsx or the one-liner is the better fit, and you don't need to buy anything.

Interactive particle sphere: pointer scatter and a morph

Particle Morph's resting shape is the same Fibonacci sphere: radius 2.6, 9,000 points by default, coloured by x from colorA to colorB. Move the pointer and the points within reach are pushed away, then springs pull them back. A click turns the sphere into your word, then a torus knot, then back to the sphere. The sphere and the knot spin slowly and the word holds still so it stays readable.

Pick it when the hero sphere should react to the visitor and turn into your brand name. The spring loop runs in JavaScript for every particle each frame, so it's built for thousands of points, not hundreds of thousands. For morphing between shapes in general (morph targets, a shader, sampling meshes), see the blog post on three.js particles that morph between shapes.

What we ran on this particle sphere code

On October 25, 2026, ParticleSphere.tsx and app/page.tsx type-checked against three 0.186.1 (the current npm release), @types/three 0.186.0, @types/react 19.3.0 and TypeScript 5.9.3. The SphereGeometry vertex counts above come from running three 0.186.1 in Node.

We ran the compiled component in headless Chromium with software WebGL at 900 x 500, with and without Reduce Motion. It drew the sphere with round dots and logged no errors. Not tested: Safari and Firefox WebGL (our headless Firefox had no WebGL), real phones and GPUs, frame rates, and a full Next.js build with these files.

Tailwind v4: Particle Morph ships no CSS file. The component's only styling is four Tailwind classes on its wrapper div (relative h-full w-full cursor-crosshair), and our Tailwind 4.3.3 check of every paid piece found it works as-is, with no change in computed styles. It doesn't touch shadcn or daisyUI styles, so no scoping edit is needed. The free component on this page uses h-full w-full and nothing else.

Questions

Why are my three.js particles squares?

PointsMaterial draws squares. Give it a small circle texture as map and set alphaTest, as ParticleSphere.tsx does, or draw the circle in a ShaderMaterial.

Why do the points bunch up at the poles?

SphereGeometry places vertices on latitude rings, so the poles get many vertices in one spot. A Fibonacci sphere spreads them evenly.

Can the particle sphere react to the mouse?

Particle Morph does: the pointer pushes particles away and springs pull them back. In the free component you could start by tilting points.rotation with the pointer position.

Will it change my shadcn styles?

No. Particle Morph ships no CSS file, only four Tailwind classes on its own div, so your shadcn or daisyUI styles stay as they are.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.