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
- Vloeiend kleurverloopEen levende achtergrond op de GPU: kleuren die traag door elkaar vloeien en buigen rond je cursor. Zonder library, in pure WebGL.
- Zaklamp-revealEen donkere hero waarin je cursor een zaklamp is. Waar je schijnt, verschijnt een kleurrijke scène en een verborgen boodschap.
- Cinematic diepte-heroEen filmisch landschap in lagen: bergen, mist, zon en vogels die elk anders meebewegen met je muis. Diepte zonder 3D-model.