Interactive 3D Particle Globe for Webflow, Framer and Any Website

A rotating globe made of dots is a favorite for hero sections: it says "global" without a stock photo. The good ones are interactive: you can drag them, and they plot real places with arcs flying between them. This post covers how to add one, with or without data, to Webflow, Framer, React, or any site that allows a script tag.

Video loop vs. a real globe

There are two common ways to put a globe on a page.

A pre-rendered video looks fine until someone tries to touch it. You can't drag it, and the markers can't be your cities.

A WebGL globe draws the points live: it responds to the pointer, the data comes from your own list, and labels can stay real text.

Particle Sphere is the second kind: one interactive globe, rather than a particle cloud that morphs between shapes.

What it does

Drag to spin, with inertia, by mouse or touch. On touch, sideways swipes spin it and vertical swipes still scroll the page.
Cursor reaction: points ripple, rise toward the pointer, or part around it. Every click or tap sends a shockwave across the surface.
Scroll modes: zoom, explode, assemble or spin.
Continents built in, from a Natural Earth land map (public domain). Or use your own equirectangular image to shape the points.
Data mode: markers that pulse and arcs along great circles, from a list of lat/lng.

Plain HTML

Upload particle-sphere.min.js and particle-sphere-extras.js to the same folder. The extras file holds the continents and demo cities, and loads only when a sphere uses them. Add the script once, then place the tag:

<script src="/js/particle-sphere.min.js" defer></script>

<pf-particle-sphere preset="globe" style="height: 640px"></pf-particle-sphere>

Give it a height with CSS; without one it is 480 px tall. For a hero with text on top, use scroll="explode" and pointer-events: none on the text so drags reach the sphere.

There are 12 presets, including globe, data-network, aurora-orb, wireframe, hologram and night-lights.

Data globes: markers and arcs

The data is JSON with markers (lat, lng, optional label, color, size) and arcs (from and to, referring to a marker's id or label, or a coordinate pair):

<pf-particle-sphere preset="data-network" longitude="-40">
  <script type="application/json">
    { "markers": [ { "id": "nyc", "lat": 40.71, "lng": -74.01, "label": "New York" },
                   { "id": "lon", "lat": 51.51, "lng": -0.13, "label": "London" } ],
      "arcs": [ { "from": "nyc", "to": "lon" } ] }
  </script>
</pf-particle-sphere>

Labels are real, selectable, translatable text. Markers pulse, arcs follow the great circle, and a markerclick event fires on click. data="demo" loads 14 sample cities to try it.

From JavaScript, el.flyTo(lat, lng) turns the globe to a place.

Webflow

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 globe goes, inside a section with a height:

<pf-particle-sphere preset="globe" style="height: 100%; min-height: 520px"></pf-particle-sphere>

Publish. Custom code runs on the published site, not in the Designer, and needs a paid Webflow site plan.

Framer

Go to Assets → Code → + → New component file and name it ParticleSphere.
Replace its contents with framer/ParticleSphere.tsx from the download.
Drag it onto the canvas, pick a preset, and set Data to Demo Cities or paste your JSON. Marker Click is a Framer interaction.

On the canvas you see a still frame; press Preview to see it move.

React and Next.js

Copy react/ParticleSphere.tsx into your project (React 18+). Settings are props in camelCase, and data takes an object or a JSON string:

import ParticleSphere, { type ParticleSphereHandle } from "./ParticleSphere"

const cities = {
  markers: [{ lat: 40.71, lng: -74.01, label: "New York" }, { lat: 35.68, lng: 139.69, label: "Tokyo" }],
  arcs: [{ from: "New York", to: "Tokyo" }],
}
const ref = useRef<ParticleSphereHandle>(null)

<div style={{ height: 640 }}>
  <ParticleSphere ref={ref} preset="data-network" data={cities}
    onMarkerClick={(m) => ref.current?.flyTo(m.lat, m.lng)} />
</div>

On Next.js the server renders a CSS sphere in the preset's colors, so nothing jumps, and WebGL takes over in the browser.

Performance and accessibility

Size: the script is 14.9 KB gzipped with no dependencies. The extras file is a further 5.1 KB gzipped.
Polite: it pauses offscreen and in background tabs.
Reduce Motion: visitors get a still frame. Without WebGL it draws the sphere once with Canvas 2D.
The canvas is aria-hidden. If the globe carries meaning, give the element an aria-label and role="img".

When not to use it

As the only place your data appears. Repeat the locations as plain text or a list for readers who never see the canvas.
Anywhere you can't add custom code.

See it in context

Particle Sphere is one of the Parallel Studio web effects on /effects. The Particle Sphere page lets you drag the globe and try each preset yourself.

Pricing

Particle Sphere is $12 one-time for one website or project, with free updates to v1.x and a 14-day refund. If you'd rather have the whole catalog, the All-Access Pass is $49.

Start with the plain globe, test the drag on a phone, and add data once the base looks right.