NinA AI Agency

Deeltjesbol

Een draaiende bol van honderden lichtpuntjes. Sleep hem rond; puntjes bij je cursor lichten op en wijken uit.

SlepenReact + Tailwind, geen extra pakkettenGratis
Werkt inClaude CodeChatGPT CodexGemini CLIGitHub CopilotCursorLovablev0

Prompt plus werkende code in één keer. Plak het in Claude Code, Codex, Gemini, Copilot of Cursor.

Bouw een cinematic website-effect: Deeltjesbol.

Wat het is: Een draaiende bol van honderden lichtpuntjes. Sleep hem rond; puntjes bij je cursor lichten op en wijken uit.

Gedrag:
- Canvas 2D met ongeveer 900 punten op een bol (Fibonacci-verdeling), geprojecteerd met eenvoudige perspectief; achterliggende punten kleiner en donkerder, voorliggende groter en helderder.
- De bol draait langzaam om de y-as. Slepen draait hem in beide richtingen; bij loslaten draait hij door met traagheid en remt hij af tot de rusttraagheid.
- Punten binnen ongeveer 80 px van de cursor lichten op in de accentkleur en worden iets naar buiten geduwd; ze veren terug als de cursor weggaat.
- Een zachte gloed achter de bol en een dun ringetje eromheen geven diepte. Op een donkere achtergrond, met een titel eronder.
- Rendert alleen in beeld, scherp op retina, en draait niet vanzelf bij prefers-reduced-motion.

Eisen:
- Werk in de stack van dit project. Is het React met Tailwind CSS, maak dan één component zonder extra pakketten; anders gewone HTML, CSS en JavaScript.
- Volledig bedienbaar met toetsenbord en touch, met de juiste aria-attributen.
- Respecteer prefers-reduced-motion: minder of geen beweging.
- Neem de kleuren, lettertypes en afrondingen van mijn project over.
- Laat me aan het eind zien waar het component staat en hoe ik het gebruik.
- Zet bovenaan het bestand een korte bronvermelding als commentaar: "Gebaseerd op de AI Toolkit van NinA AI Agency, https://www.nina-ai.nl/toolkit/cinematic/deeltjesbol". Laat die staan.

Meer effecten