Cursor interaction prompts

Radius, strength, decay

The radius is how far from the pointer the surface responds, in pixels. The strength is how much it changes: how far type bends, how bright a glow gets, how much of a hidden layer shows. The decay is how long the change lasts after the pointer has moved on, in seconds. A reveal brush with a long decay leaves a trail you can draw with. A ripple with a short one feels like water.

Ask for the pointer position to be smoothed before it is used. Raw pointer events arrive unevenly, and an effect tied directly to them jitters. A follower that closes part of the distance to the real pointer each frame gives the motion weight.

Design the untouched state first

The surface should be a finished picture before any input. Then give it a small idle motion of its own, so the visitor learns that it is alive: a slow breath, a drift, one automatic pass of the effect a few seconds after load. This idle pass is also the answer for touch screens, where there is no hover at all.

On touch, decide between two honest options. Let a finger drag do what the pointer does, accepting that it competes with scrolling, or run the effect on its own and leave the finger for the page. Say which in the prompt, and say that the effect must never block vertical scroll.

What it costs, and the fallback

A pointer effect on one canvas costs little while idle if the loop stops when everything has settled. Ask for exactly that: render while something is moving, then stop until the next input. Trails need a second, off-screen buffer that fades each frame; keep it at a low resolution, since a soft trail does not need full detail.

The fallback is the untouched state. With reduced motion, drop the idle pass and keep a mild, instant response to the pointer or none at all. Never hide content that only a pointer can reveal: if the brush uncovers something that matters, a keyboard and a phone need another way to it.

What a cursor interaction prompt should contain

• The surface and what it looks like untouched.
• Radius in px, strength as a number or angle, decay in seconds.
• Pointer smoothing: how quickly the follower catches up.
• Idle behaviour: the automatic pass that shows the surface is alive.
• Touch: finger drag or autonomous, and that scrolling is never blocked.
• Stopping: the loop ends when the surface has settled.

A prompt to start from

Build one full-screen section for [brand], [what it is], where the background reacts to the pointer.

The surface: a field of short line segments on a 2D <canvas>, like iron filings on paper. Segments sit on a grid 22px apart, each 12px long and 1.5px thick, colour #1b1b1f on a ground of #efece6. Untouched, they all lie at 20° and the field looks like a calm woven texture.

The interaction: within 260px of the pointer, each segment turns to point at it, fully at the centre and falling off smoothly to nothing at the edge. Segments within 80px also darken to #000 and lengthen to 16px. When the pointer leaves, each segment swings back to 20° over 1.2 seconds with a slight overshoot. Smooth the pointer: the follower closes 12% of the distance each frame.

Idle: 3 seconds after load, and whenever the pointer has been still for 8 seconds, an invisible point crosses the screen from left to right in 5 seconds so the field visibly responds.

Text in HTML above the canvas, centred: headline "[headline]" in [typeface], 88px desktop / 40px phone, colour #1b1b1f on a solid #efece6 plate with 24px padding so it stays readable. Under it, 18px: "[one sentence]". One button, background [#hex accent]: "[label]".

Stack: Vite + React + TypeScript, plain CSS, canvas 2D. No three.js.

Budget: pixel ratio capped at 2. Redraw only while any segment is moving; stop the loop when the field has settled.

Touch screens: grid spacing 30px. The idle pass runs every 8 seconds; a finger drag attracts the segments but must not block vertical scrolling. With prefers-reduced-motion, no idle pass and segments turn instantly with no overshoot.

Run it, move the pointer in fast circles and confirm it holds 60 frames a second, then check 390px wide.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• Fallbacks for phones and reduced motionWhat to ask for when there is no cursor, a weak graphics chip or prefers-reduced-motion: the three fallback tiers and a block to add to any prompt.
• What makes a website immersiveDepth, continuity and response to input are what make a website immersive. What each means in a prompt, and the cases where you should not do it.

• Scroll storytelling
• 3D products
• WebGL heroes
• Particles
• 3D galleries
• Cloth and materials