Particle Sphere · an interactive 3D particle globe · v1.0
Put a living world on your site.
Thousands of points on a globe you can spin, poke and scroll. Continents built in, your data as markers and flying arcs, 12 looks from a dotted Earth to a glowing nebula. A script tag, a React component or a Framer component, for every platform.
One-time payment · Instant download · Single-project license · Free v1.x updates
- Drag, hover, click, scroll
- Continents and data arcs built in
- Crisp at any pixel density
- No dependencies · 14.9 KB gzipped
Showcase: all 12 presets
Globe
The world in dots. Continents from a built-in land map, a navy body, a blue atmosphere. Drag it to spin.
preset="globe"Open Globe in the playground →Data network
Markers that pulse and arcs that fly between them, from a list of lat/lng. Labels are real text.
preset="data-network" data="demo"Open Data network in the playground →Aurora orb
Northern-lights colors drifting over a slowly breathing orb. Points rise toward the cursor.
preset="aurora-orb" cursor="attract"Open Aurora orb in the playground →Wireframe
Meridians and parallels drawn in points. See-through, so the far side turns behind the near.
preset="wireframe"Open Wireframe in the playground →Nebula
A scattered cloud of glowing points in pink, violet and blue, twinkling as it turns.
preset="nebula"Open Nebula in the playground →Mono
Fine dark points on off-white. Quiet enough for any brand; the far side fades away.
preset="mono" cursor="repel"Open Mono in the playground →Solar
A wobbling orange sun with a hot atmosphere. Click it for a shockwave.
preset="solar"Open Solar in the playground →Hologram
Cyan rows of latitude, see-through, colored from pole to pole.
preset="hologram"Open Hologram in the playground →Night lights
Continents in warm city-light amber, no oceans, on a dark planet.
preset="night-lights"Open Night lights in the playground →Terminal
Green square pixels in rows, like an old radar screen.
preset="terminal"Open Terminal in the playground →Frost
Pale blue diamonds that glint. A cold, crisp orb for winter launches and clean tech.
preset="frost"Open Frost in the playground →Pastel
Pink, amber and blue from pole to pole on cream. Soft and friendly on light pages.
preset="pastel"Open Pastel in the playground →
Your data, on a globe
Markers, pulsing rings and arcs that fly along great circles, from a list of latitudes and longitudes. Labels are real text. Pick a city, or click a marker on the globe.
Fly to a city
Or click a marker on the globe.
{ "markers": [
{ "lat": 40.71, "lng": -74.01, "label": "New York" },
{ "lat": 51.51, "lng": -0.13, "label": "London" } ],
"arcs": [ { "from": "New York", "to": "London" } ] }Drag it, poke it, scroll it
Every sphere on this page is live. Drag one to spin it, hover to see the cursor modes, click for a shockwave. The hero bursts apart as you scroll away from it.
Drag to spin
Flick it: it keeps turning, then eases back.
Cursor ripple
Rings spread from under the pointer.
Attract
The surface rises toward the pointer.
Repel
Points part around the pointer.
Click shockwave
Click or tap anywhere on it.
Continents
Built in, or your own equirectangular image.
Playground
Pick a preset, then change its colors, density, points, glow and interaction, and turn the data on. The code under the preview follows along: copy it for a script tag, React or Framer.
Drag it, hover it, click it. Scroll modes react to the page's scroll.
<script src="/particle-sphere.min.js" defer></script>
<!-- particle-sphere-extras.js goes next to it (continents, demo data) -->
<pf-particle-sphere preset="globe" style="height: 600px"></pf-particle-sphere>Like what you made? The snippet runs with the script from the download.
Buy Particle Sphere · $12Works with
- FramerCode component with a properties panel: presets, data (demo or JSON), Marker ClickIn the v1.0 download
- WebflowPaste the footer code (extras included), then a Code Embed with <pf-particle-sphere>In the v1.0 download
- Plain HTML / any siteOne script + <pf-particle-sphere preset="globe">In the v1.0 download
- WordPressCustom HTML block with the script and the tagIn the v1.0 download
- ShopifyTheme assets + a Custom Liquid sectionIn the v1.0 download
- Squarespace, WixCode Injection / embed block (plan must allow custom code)In the v1.0 download
- React, Next.js, Vite<ParticleSphere data={...} onMarkerClick={...} />, server-rendered placeholderIn the v1.0 download
What it does
- A globe you can touch. Drag it to spin, with inertia: a flick keeps it turning, then it eases back to its idle rotation. Works with a mouse and with touch (sideways swipes spin it, vertical ones still scroll the page).
- Alive under the cursor. The points under the pointer ripple, rise toward it or part around it, and every click or tap sends a shockwave across the surface.
- Scroll-driven. Zoom in as the page scrolls past, burst apart as it scrolls away, gather as it scrolls in, or turn with the page.
- Data globes. Markers, pulsing rings and animated great-circle arcs from lat/lng JSON: an attribute, a <script> inside the tag, or from JavaScript. Labels are real text. Click a marker for an event; flyTo() turns the globe to it.
- Continents built in. A land map from Natural Earth (public domain) turns the points into the world. Or use your own equirectangular image: its brightness shapes the points, its colors can color them.
- 12 looks, endless variations. Globe, data network, aurora orb, wireframe, nebula, mono, solar, hologram, night lights, terminal, frost, pastel. Or your own: colors by depth, latitude, noise or image; fibonacci, rings, random or wireframe; 200 to 60,000 points; circles, rings, squares, diamonds or sparks; glow, atmosphere, a solid body, twinkle and wobble.
- Crisp at any pixel density. Always the full device pixel ratio, round anti-aliased points (never square), a stable minimum size so nothing flickers, premultiplied alpha and dithered glows. On a slow device it draws fewer points; it never blurs.
- Polite. Pauses offscreen, shares the WebGL budget with our other components, shows a still frame with Reduce Motion, falls back to Canvas 2D without WebGL. Audio reactivity (microphone or an <audio> element) is opt-in only.
What's in the download
- particle-sphere.min.js: drop-in script for any website (34 KB, 14.9 KB gzipped)
- particle-sphere-extras.js: the continents, texture images, demo cities and audio, loaded only when used (5.1 KB gzipped)
- particle-sphere.esm.js + TypeScript types, for bundlers
- react/ParticleSphere.tsx: React component (React 18+, one file, server-rendered placeholder)
- framer/ParticleSphere.tsx: the Framer code component, with data and Marker Click
- demo.html, a data-mode JSON example, and quick starts for each platform
- Free updates to v1.x
Single-project license (LICENSE.md in the download): one website or project per license. The land map is made with Natural Earth (public domain).
Install in about a minute
Upload particle-sphere.min.js and particle-sphere-extras.js from the download to the same folder on your site.
Add the script once, and the tag where the sphere goes. Give it a height.
Pick a preset, or set colors, points, cursor, scroll and the rest as attributes.
<script src="/js/particle-sphere.min.js" defer></script>
<pf-particle-sphere preset="globe" data="demo" style="height: 640px"></pf-particle-sphere>Paste script/webflow/footer-code.html from the download into Site settings → Custom code → Footer code (the extras are included, nothing to host).
Add a Code Embed where the sphere goes, with the tag below. Give its section a height.
Publish. Custom code runs on the published site.
<pf-particle-sphere preset="aurora-orb" scroll="explode" style="height: 100%; min-height: 520px"></pf-particle-sphere>Custom code needs a paid Webflow site plan.
Upload both .js files to your theme folder (or with a file manager plugin) and copy the URL.
Add a Custom HTML block with the script and the tag.
<script src="https://your-site.com/wp-content/themes/your-theme/js/particle-sphere.min.js" defer></script>
<pf-particle-sphere preset="hologram" style="height: 560px"></pf-particle-sphere>On WordPress.com, you need a plan that allows custom code.
Online Store → Themes → Edit code → Assets: upload both .js files, and add the script tag before </body> in theme.liquid.
Add a Custom Liquid section with the tag.
<script src="{{ 'particle-sphere.min.js' | asset_url }}" defer></script>
<pf-particle-sphere preset="night-lights" style="height: 600px"></pf-particle-sphere>Copy react/ParticleSphere.tsx into your project. It needs only React 18+.
Put it in a box with a height; pass data as an object.
import ParticleSphere from "./ParticleSphere"
<div style={{ height: 640 }}>
<ParticleSphere preset="data-network" data={{ markers, arcs }} onMarkerClick={(m) => console.log(m.label)} />
</div>Next.js: the server renders a CSS sphere in the preset's colors; WebGL takes over in the browser.
In your Framer project, go to Assets → Code → + → New component file, and name it ParticleSphere.
Replace the file's contents with framer/ParticleSphere.tsx from the download, and save.
Drag ParticleSphere onto the canvas, pick a preset, and set Data to Demo Cities or paste your JSON.
On the Framer canvas you see a still frame, which keeps the editor fast. Set On Canvas to Live to see it move there.
Squarespace and Wix: add the script and the tag in a Code or Embed block (your plan must allow custom code). The download's README has a quick start for every platform and the full settings reference.
Particle Sphere
$12 one-time
- Script tag, React and Framer builds
- All 12 presets, data mode, continents and every setting
- Free v1.x updates
- Single-project license
Secure checkout by Polar. Instant download after payment.
FAQ
Where does it work?
Anywhere you can add a script tag: Webflow, WordPress, Shopify, Squarespace, Wix, plain HTML. Also React/Next.js and Framer. Site builders need a plan that allows custom code.
How is this different from Particle Forms?
Particle Forms morphs a cloud of particles between shapes as you scroll. Particle Sphere is one interactive globe: you spin it, poke it, put your data and the continents on it. Different jobs; they can share a page.
I bought the old Particle Sphere Framer component. Is this the same?
No, this is a new, rebuilt product: it works on every platform (script tag, React and Framer), adds data markers and arcs, continents, textures, scroll and audio modes and 12 presets, and is anti-aliased at every pixel density.
How do I put my own data on it?
A JSON list of markers (lat, lng, label, color, size) and arcs (from, to), as an attribute, a <script type="application/json"> inside the tag, or el.data from JavaScript. React and Framer take the same object. data-example.json in the download shows the format.
Will it slow my page down?
The script is 14.9 KB gzipped with no dependencies (the continents, demo cities and audio are a separate 5.1 KB file, loaded only when used). It draws only while on screen, and on slow devices it draws fewer points instead of lowering the resolution. On a GPU it's a few draw calls per frame.
Does it work on phones?
Yes. Sideways swipes spin it and vertical swipes scroll the page; a tap sends a shockwave. It renders at the phone's full pixel density.
What about Reduce Motion and old browsers?
With Reduce Motion on, visitors see a still frame. Without WebGL it draws the same sphere once with Canvas 2D.
Does it use my visitors' microphone?
Only if you turn on audio="mic", and then only after a visitor clicks or taps the sphere (the browser asks them first). Otherwise no audio is touched.
What's the license?
Single project: one website or project per purchase. The details are in LICENSE.md in the download. The land map is Natural Earth, which is public domain.
Do I get updates?
Yes, free updates for v1.x.
Questions before buying?
Email hi@gunnargray.com.
Hear about updates
The launch, new presets, v1.x releases and the occasional new tool. No more than that.