NinA AI Agency

Zaklamp-reveal

Een donkere hero waarin je cursor een zaklamp is. Waar je schijnt, verschijnt een kleurrijke scène en een verborgen boodschap.

Volgt je muisReact + 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: Zaklamp-reveal.

Wat het is: Een donkere hero waarin je cursor een zaklamp is. Waar je schijnt, verschijnt een kleurrijke scène en een verborgen boodschap.

Gedrag:
- Twee lagen op elkaar: onder een kleurrijke scène (gradiënten, vormen en een kop), boven een bijna zwarte laag met een gedimde versie van dezelfde kop.
- De bovenlaag krijgt een mask-image met een radial-gradient rond de cursor (straal ongeveer 160 px, zachte rand), zodat je door het donker heen de scène ziet. De lichtvlek loopt vloeiend achter de cursor aan (lerp in requestAnimationFrame).
- Bij indrukken (pointerdown) wordt de lichtbundel groter, bij loslaten weer klein; ook met touch te bedienen.
- Zonder muis dwaalt de lichtvlek langzaam over het vlak (een Lissajous-baan), zodat de pagina nooit stil oogt.
- Bij prefers-reduced-motion staat de lichtvlek stil in het midden en volgt hij de muis direct, zonder naloop.

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/zaklamp". Laat die staan.

Meer effecten