Two styles for multiplayer. Your app passes the position, the avatar comes with it.
npm i @craftedstudios/shaders
For multiplayer, show where people are with their avatar built in. There are two styles: arrow puts the avatar beside the name, and avatar makes the avatar itself the pointer. Your app already knows where each cursor is, so pass x and y and the tip lands there, inside the nearest positioned element.
arrow
avatar
x
y
import { Cursor } from '@craftedstudios/shaders/react'; <Cursor seed={user.id} name={user.name} variant="avatar" x={x} y={y} />
The seed decides how the cursor looks. name is the text on its tag: pass whatever your app shows for that person. Leave it out and the cursor gets an anonymous name from its seed, like Swift Otter. The same seed always gets the same name, so for visitors who aren't signed in, a session ID gives each one their own. Set name to false for no tag at all.
name
false
nameFor(seed) returns the same anonymous name, for showing it elsewhere, like a list of who's here.
nameFor(seed)
Without React, cursor() returns a cursor you move as positions arrive. move() is cheap enough to call on every update.
cursor()
move()
import { cursor } from '@craftedstudios/shaders'; const c = cursor(canvas, { seed: user.id, name: user.name, variant: 'arrow' }); c.move(x, y);
zoom draws a cursor larger, with its avatars still sharp.
zoom