NinA AI Agency

Particle globe

A spinning globe of hundreds of light points. Drag it around; points near your cursor light up and move aside.

DragReact + Tailwind, no extra packagesFree
Works inClaude CodeChatGPT CodexGemini CLIGitHub CopilotCursorLovablev0

Prompt plus working code in one go. Paste it into Claude Code, Codex, Gemini, Copilot or Cursor.

Build a cinematic website effect: Particle globe.

What it is: A spinning globe of hundreds of light points. Drag it around; points near your cursor light up and move aside.

Behaviour:
- Canvas 2D with about 900 points on a sphere (Fibonacci distribution), projected with simple perspective; points at the back are smaller and darker, points at the front larger and brighter.
- The globe slowly spins around the y axis. Dragging turns it in both directions; on release it keeps spinning with inertia and slows down to its resting speed.
- Points within about 80 px of the cursor light up in the accent colour and are pushed slightly outwards; they spring back when the cursor leaves.
- A soft glow behind the globe and a thin ring around it add depth. On a dark background, with a title underneath.
- Only renders while visible, sharp on retina, and does not spin on its own with prefers-reduced-motion.

Requirements:
- Work in this project's stack. If it is React with Tailwind CSS, make a single component without extra packages; otherwise plain HTML, CSS and JavaScript.
- Fully operable with keyboard and touch, with the right aria attributes.
- Respect prefers-reduced-motion: less or no movement.
- Use the colours, fonts and border radii of my project.
- At the end, show me where the component lives and how to use it.
- Put a short credit at the top of the file as a comment: "Based on the AI Toolkit by NinA AI Agency, https://www.nina-ai.nl/en/toolkit/cinematic/deeltjesbol". Keep it there.

More effects