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
- Flowing mesh gradientA living background on the GPU: colours that slowly flow into each other and bend around your cursor. No library, pure WebGL.
- Flashlight revealA dark hero where your cursor is a flashlight. Wherever you shine, a colourful scene and a hidden message appear.
- Cinematic depth heroA cinematic layered landscape: mountains, mist, sun and birds that each move differently with your mouse. Depth without a 3D model.