Build a dark product hero for a reading lamp called Halden lamp no. 3 where the cursor is a warm beam of light. Background #0c0a08. Centre a small uppercase label with a glowing amber dot, the headline "Light only where you are looking" (92px on desktop, 800 weight, tight tracking), one line about a 2700K dimmable beam, an amber (#ffb35c) pill "Reserve for £148" and a dark pill "Watch the beam". Text rests dim (#7a6c5c) until the light reaches it: give each text block a 300px radial gradient from #fff6e6 through #ffc477 to the dim colour, clipped to the text and centred on the beam through CSS variables updated every frame. The beam is a 960px soft radial glow with a 14px hot core that eases toward the pointer at 0.085 per frame, plus a dot pattern masked to the beam and dust motes on a canvas that only show inside it. The primary button glows more as the light nears it, and Watch the beam sweeps the light across the headline over 3s. On touch, a finger drag moves the light, and after 2.6s idle it drifts in a slow loop over the headline. Keep focus rings, and for reduced motion move the light without easing or dust.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
- Copy the prompt with the button above.
- Paste it into your tool, such as v0, Lovable, Bolt or Claude.
- Make it yours by swapping the lamp for your own product and the amber for your brand colour.
About this cursor glow effect
Most cursor glow effects put a coloured halo behind the pointer and stop there. This one treats the cursor as a lamp. The text is printed dim, and only the letters inside the beam turn warm and bright, so reading the headline feels like running a torch along a shelf. A fine dot pattern and slow dust motes appear only where the light falls, which gives the beam depth without any 3D.
The beam eases toward the pointer instead of sticking to it, and the Reserve button glows harder the closer the light gets. Press Watch the beam and the light sweeps the headline on its own. On a phone, drag a finger to move it; leave it alone and it drifts in a slow loop over the words.
Why the prompt works
- It explains the text trick, a radial gradient clipped to the letters and moved with CSS variables, which is what makes the words light up rather than the background.
- It sizes everything, a 960px glow, a 300px text light and an easing of 0.085 per frame.
- It plans the phone, with a finger drag and an idle loop.
- It keeps the copy readable when unlit and for reduced motion.
Where to use it
Launch pages for lighting, night photography, hospitality or anything sold on mood. Keep the page dark and the copy short, so the beam has room to do the talking.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
