FreeVideo
App window with zoom
- 365365 downloads
- 125125 likes
- 188188 saves
Works with
+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
3D particle globe with WebGL v1.0.0
Use this resource to add a 3D particle globe to a web page hero
New
- 322 downloads
- 217 likes
- 143 saves
$4.99
Lifetime access to this resource, with its updates.
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install globe-particles-webglWith no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.
First time: connect the CLI with
npx --yes palatekit@latest loginThe agent builds a globe from real Three.js particles: a dense spherical core and an orbital ring, with a circular-point shader and additive blending. It tunes density, tilt and the accent color from your brand's primary color. You get a ready-to-use component that respects reduced motion and cleans up after itself.
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Uses
- Three.js
- WebGL-capable browser
- Licence
- MIT
Similar resources
View all- Free
FreeVideo
One big number
- 463463 downloads
- 223223 likes
- 100100 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
PalateKit Motion, the library
- 338338 downloads
- 198198 likes
- 249249 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three bars head to head
- 348348 downloads
- 133133 likes
- 182182 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Before / after slider
- 322322 downloads
- 248248 likes
- 238238 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three-card carousel
- 418418 downloads
- 157157 likes
- 101101 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Chat exchange
- 564564 downloads
- 127127 likes
- 161161 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Checklist ticking off
- 442442 downloads
- 233233 likes
- 160160 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- SKILL.md: full recipe (HTML, CSS, shaders, Three.js code), tuning knobs, taste rules and checks
- demo/index.html: a demo page to open and see the expected result
- demo/PROMPT.md and source.json: sample prompts to recreate the demo
Good fit for
- A homepage hero for an infrastructure, data or tech product
- A launch page that wants a dark, restrained planetary visual
- A light animated backdrop for an online presentation
Not for
- Redoing a page's whole layout or copy
- A generic starfield with no globe structure
- Sites aimed at devices without WebGL
Tags
- webgl
- three.js
- particles
- globe
- hero
About
You say
"Add a particle globe to my page hero, using my purple #8b5cf6 as the accent."
Skill published by MengTo under the MIT license.
Show moreShow less
Prerequisites
- You bring
- Your brand's primary color and The web project where the globe goes
- Dependencies
- Three.js and WebGL-capable browser
How to use it
- Install the skill in your agent.
- Ask for the globe and give your brand's primary color.
- Open the page and adjust density and rotation speed.
Content preview
Files
- demo/index.html46 KB
- demo/preview.jpg56.6 KB
- demo/PROMPT.md3.2 KB
- demo/source.json4 KB
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.4 KB
- SKILL.md9.9 KB
Origin and licence
Modified by PalateKit
- Author
- MengTo
- Source
- github.com/MengTo/Skills/tree/a45892d2fdadab75b31fb16abecc02f101b31c43/agent-skills/web-design/globe-particles
- Licence
- MIT
Notice
Version modifiée de « globe-particles » (MengTo, MIT) : traduction française et fiche par PalateKit.
User reviews
–
No ratings yet
Loading reviews…
Frequently asked questions
Do I need to install Three.js?
Yes, the code imports the "three" package: install it in your project before adding the component.
Will the globe slow the page down?
Lower the particle count or cap the pixel ratio (maxDpr); the skill explains both settings.