Simulate a Figma-like multiplayer environment. Automatically interpolates position data using spring physics to ensure buttery smooth movement across the screen. Includes an AI 'Ghost Mode'.
Live Preview
Collaborative Cursors
Move your mouse around. Ghost users will follow along.
Ghost Mode Active
Installation
npx kinetic-ui-cli@latest add Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { MultiplayerCursorEcosystem } from "@/components/creative/multiplayer-cursor-ecosystem";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { MultiplayerCursorEcosystem } from "@/components/creative/multiplayer-cursor-ecosystem";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<MultiplayerCursorEcosystem
cursors{/* value */}
ghostMode{true}
>
<div>Content goes here</div>
</MultiplayerCursorEcosystem>
</div>
);
}