Live Cursors
NewInstallation
npx shadcn@latest add https://uibrik.com/r/live-cursors.jsonInstall the packages
npm install motionAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/live-cursors/live-cursors.tsx"use client"; // A shared document with three teammates at work: one selects a word in the // title, one types at the end of a paragraph, one drags a card to the other // column. Each moves on its own, on curved paths, so it reads as real people // rather than a loop. Runs while on screen; reduced motion shows one still frame. import { animate, motion, useInView, useMotionValue, useReducedMotion, type MotionValue, } from "motion/react"; import { useEffect, useRef, useState, type RefObject } from "react"; import { cn } from "@/lib/utils"; const EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1]; export type Collaborator = { name: string; color: string }; export type LiveCursorsProps = { /** Three people: the first selects, the second types, the third drags. */
Adds the files to
components/uibrik/live-cursors and installs motion. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/live-cursors.Props
LiveCursors- docTitle
- Type string
- "Q4 launch plan"
- Document title; its second word is the one that gets selected.
- typed
- Type string
- " Copy review moves to Friday."
- Typed at the end of the paragraph.
- pace
- Type number
- 1
- Multiplies every pause and movement; higher is slower.
- people
- Type [{ name; color }, { name; color }, { name; color }]
- Ada, Ben, Cleo
- The first selects, the second types, the third drags.
- className
- Type string
- –
- Classes for the panel.
