Sections / Gems / 3D and WebGL data pieces
Numeral Swarm
Your key figures drawn by thousands of particles in 3D. Every few seconds the swarm breaks apart, arcs out through depth and settles into the next number; the pointer pushes particles aside and tilts the cloud towards it. The figures are real text underneath, so they stay readable, indexable and announced.
Included with Full Access
- Kind
- 3D and WebGL data pieces
- Interaction
- WebGL · particles · autoplay · pointer repel · keyboard · stats
- Dependencies
- three 0.180.0
- Licence
- Licensed with Full Access, for the sites you build; do not resell the gem itself
Formats
- HTML
- Claude Code
- React
HTML is one module and one stylesheet (Webflow: paste it into an Embed). React is one typed file for Next.js and Framer. The Claude Code prompt carries the exact files and where they go, so your agent installs this gem, not a lookalike. With the MCP server, ask your agent for get_section("numeral-swarm").
Behaviour and accessibility
- Each figure is shaped from real text at run time, so any short value works: 99.98%, 4.2M, 38ms, 120+, $1.2B.
- The label under the figure and a visually hidden copy of the value sit in a polite live region; the dots are labelled buttons and arrow keys step through the figures.
- Autoplay pauses while the pointer is over it; drawing stops entirely off screen or in a background tab.
- With prefers-reduced-motion: no burst, drift, tilt or autoplay; a change redraws the figure in place.
- three.js 0.180.0: the vanilla build imports it from jsDelivr, the React build from npm.
Options
| Option | Type | Default | What |
|---|---|---|---|
stats | SwarmStat[] | 4 built in | The figures, in order. |
particles | number | 0 | Particle count. 0 picks by width: 4,500 under 640 px, else 9,000. |
interval | number | 4200 | Milliseconds each figure holds; 0 turns autoplay off. |
duration | number | 1700 | Milliseconds a morph takes. |
colorA | string | "#8fb0ff" | Colour on the left of the figure. |
colorB | string | "#ffc9a3" | Colour on the right of the figure. |
background | string | "#07080c" | Background behind the swarm (any CSS colour, or transparent). |
weight | number | 800 | Font weight used to shape the figures. |
pointer | boolean | true | Particles flee the pointer and the cloud tilts towards it. |
label | string | "Key figures" | Accessible name of the whole piece. |
onChange | (index: number) => void | Called after every change with the new index. |
Free