Skip to content
Get packs

Globe Particles

Adds a glowing 3D particle globe with an orbital ring to web designs using WebGL/Three.js

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When installed, the agent can build a premium-looking animated 3D visual: a dense sphere made of thousands of tiny glowing dots, surrounded by a thinner ring of dots, shown on a dark background. It writes the HTML, CSS, shader code and Three.js setup for this effect, using your design's primary colour for the glow, and leaves the rest of the page alone. Non-experts can think of it as a recipe that lets the agent produce a specific, polished sci-fi style graphic rather than a generic starfield.

Great for

  • Web designers building a landing page hero section with a planetary or data-globe look
  • Front-end developers who want a ready-made WebGL particle effect they can adapt
  • Teams creating infrastructure, networking, or AI-themed marketing visuals

Skip it if

  • Projects that need a full page layout or copy changes, since the skill explicitly limits itself to the globe visual (it is scoped to avoid this)
  • Low-power devices or pages where many animated WebGL canvases would hurt performance, as the effect runs a continuous animation loop
  • Sites that cannot run WebGL or do not load the Three.js library

Try asking

  • “Add a premium globe particle visualization to my hero section using our brand accent colour”
  • “Create an orbital data-globe graphic with a flattened ring for our infrastructure product page”
  • “Build a Three.js particle sphere canvas that respects reduced-motion preferences”
Step-by-step guide: how to use Globe ParticlesInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    globe-particles.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip globe-particles.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip globe-particles.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name your brand accent colour in a CSS variable such as --brand-accent so the globe picks it up automatically
  • Check the demo/index.html file to preview the effect before integrating it into a real site
  • Tune particle counts and point size for mobile devices to keep frame rates smooth

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • demo/source.json
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.