Cursors

A near-white card with one word, "Multiplayer", set large in a plain serif as frosted glass, and three collaborator cursors flying around it: an indigo, a red and a green pointer arrow, each with a rounded name tag that hangs off its tip and a 300px blurred blush of its colour that tints the word as it passes, blended with soft-light so the ink is coloured without washing out.

Each cursor rides its own ellipse around a centre spread across the card, alternating high and low, with radii of about a sixth of the width and a fifth of the height, phase-shifted by a third of a turn and running at 0.5, 0.68 and 0.86 times a shared clock, with the vertical term at 1.15 times the horizontal so the loops never close into circles. Each eases 12 percent of the way to its target per frame. Within 220px of the real pointer the target is pushed up to 120px straight away from it, so moving over the card scatters them and leaving lets them drift home.

The glass is stacked copies of the word: a sharp copy masked to fade out toward the bottom, a 2px blurred copy masked the opposite way, two faint offset and blurred twins for refraction depth, a 9px backlit halo, a specular sheen on the top third, and a rounded chip of white gradient, inset bevels and a soft drop shadow over it all. The word is tilted one degree, with a radial glow of the ground behind it.

The cursors are built as plain DOM by a framework-free class, positioned in design pixels at a 600px card and scaled up with a wider one; the word sizes with the card width.

• Create each cursor as an SVG arrow plus a name span, and a separate 300px radial blush in its colour with mix-blend-mode soft-light, all absolutely placed in an untransformed layer.
• Give cursor i an ellipse: centre x at 0.32 + 0.36 (i + 0.5) / n of the width, centre y alternating 0.34 and 0.66 of the height, and speed 0.5 + 0.18 i.
• Each frame, advance the clock by 0.006, take the point on the ellipse with the vertical term at 1.15 times the angle, and push it away from the pointer by (1 - d / 220) times 120px.
• Ease each cursor 12 percent toward its point and write translate and scale straight to its transform.
• Build the frosted word from stacked, masked and blurred copies under a gradient glass chip.
• Under reduced motion, draw every cursor at one fixed time of its orbit, without easing, and never start the loop.

• CURSORS (Wexel, Orbo and Visitor in indigo, red and green): The collaborators: names and colours.
• WORD ("Multiplayer"): The frosted word in the middle.
• GROUND (#fcfcfc): The card colour, also the glow behind the word.
• INK (#1b1b1b): The word's colour.
• WORD_FONT (ui-serif, Georgia, serif): The word's family.
• FONT_VAR (--visual-sans): The CSS variable holding the name tags' family.
• DESIGN_WIDTH (600): The card width the cursor sizes and orbits are tuned at.