LiveMove the cursor and watch every needle swing round
The prompt
Build one of those mouse cursor effects where a whole field of compass needles turns to face the pointer, for a sailing forecast app called Gale. Deep sea background, a radial gradient from #0f2a31 to #0a1a1f. On a canvas, place a needle every 36px (28px on phones), each a short line with a round tip. Every needle turns toward the pointer on a damped spring (stiffness 0.035 plus up to 0.09 nearby, damping 0.8), so a change of direction ripples outward. Within 380px the needles grow from 5 to 16px long and brighten from #1d4d55 to aqua #5eead4, and within 110px they turn amber #fbbf24. A click or tap sends a ring outward at 0.9px per millisecond that kicks the needles it passes. Centre the copy over a dark radial halo: a mint label with a small compass icon, the headline "Read the wind before you sail" (88px, 800 weight), a line about 340 harbours, and three small stat tiles, From, Wind and Gusts, which update live as if the pointer were the wind, bearing from the centre and speed from the distance. End with an aqua pill "Check tomorrow's sailing" that sends a pulse when pressed. On touch, dragging steers the field, and after 2.6s idle the target drifts in a slow loop. For reduced motion, point the needles without springs.
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 changing the forecast tiles to your own live numbers.
About these mouse cursor effects
Most mouse cursor effects decorate the pointer. This one makes the whole page respond to it. A grid of small compass needles covers the background, and every one of them swings to face the cursor. They turn on springs, so the nearest needles snap round first and the far ones follow a moment later, which sends a visible wave across the field each time you change direction.
Needles close to the pointer grow longer and brighter, and the ones right beside it turn amber. A click sends a ring outward that knocks the needles as it passes. The forecast tiles under the headline read the cursor as if it were the wind, giving a bearing and a speed that change as you move, which ties the effect to what the app actually does.
Why the prompt works
It defines the spring, stiffness and damping, which is what creates the ripple instead of an instant snap.
It gives distance bands, 380px to brighten and 110px to turn amber.
It protects the copy with a dark halo so the needles never fight the text.
It makes the numbers live, turning a decoration into a demo of the product.
Where to use it
Weather, sailing, maps, navigation and data products, or any hero where direction matters. Keep the needles subtle and let the copy lead.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
We use cookies to measure how the site is used and, if you allow it, to show advertising. Prompts you copy and previews you try are never collected. See our privacy policy.
