Particle Sphere9,000 particles arranged on a sphere with warm gold and cool silver tones, slowly spinning in Three.js.
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/particle-sphereFor dark mode, add the dark class to your <html> element:
<html class="dark">Install with AI Canvas MCP
With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.
About Particle Sphere
Particle Sphere renders 9,000 particles distributed across the surface of a sphere using spherical coordinates and additive blending in Three.js. The top hemisphere fades from warm gold to orange, the bottom from cool white to silver, and the whole structure rotates slowly on a slight tilt. Because each particle is a simple Points instance with a sprite map, the GPU handles thousands of additive draws comfortably even on integrated cards. It is a striking hero element for AI products, landing pages with a cosmic feel, or 404 pages that need something memorable.
Built with
Frequently asked questions
- Is Particle Sphere free to use?
- Yes. Particle Sphere is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
- How do I install Particle Sphere?
- One command: npx shadcn@latest add https://aicanvas.me/r/particle-sphere.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Particle Sphere for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
- What is Particle Sphere built with?
- Particle Sphere is built with React and TypeScript, using Three.js, Canvas, and Tailwind CSS.
- Where would I use Particle Sphere?
- Common uses include Hero section, Marketing site, and 404 page. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Particle Sphere with AI?
- Yes. Particle Sphere ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas