REFERENCE
- Gallery page: https://magpui.com/en/i/site-assembled-by-40-live-cursors-b4c5f7
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/site-assembled-by-40-live-cursors-b4c5f7/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/site-assembled-by-40-live-cursors-b4c5f7/clip.mp4
- Original post: https://x.com/TONASY99/status/2117240889424941511 by @TONASY99
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A single-page event site (a 48-hour web jam) that appears to be assembled live by about 40 collaborators in a multiplayer design editor. Colorful cursors with name tags swarm the page: they carry oversized headline letters in from off-screen and drop them into place, select and highlight paragraphs, drag a section title into a drop zone to switch the page content, and idle at the bottom like an audience. The visitor's own cursor appears as a black "You" cursor and can grab any element and move it. It should feel chaotic but choreographed, funny and alive, like watching a crowded Figma file.
DESIGN SYSTEM
- Canvas: warm off-white #EDEBE6, full viewport, content column max 1100px with 24px gutters.
- Top bar: small monospace project label left ("Now Editing" + "039 - 2026.11" in 12px gray #8A8A8A), nav links right (About, Teams, Venue, Schedule) 14px, active link underlined 1px.
- Kicker: monospace uppercase 13px, letter-spacing .08em, #1A1A1A.
- Headline: ultra-heavy grotesk, 150-190px, line-height .85, tight tracking -0.04em, #111.
- Body: 16px sans, 1.5 line-height, plus a second-language paragraph below in the same size.
- CTA band: full-width block #F2542D, white bold 28px label with arrow, small uppercase kicker above it.
- Cursors: 14px arrow in a random saturated color (pink #E94C8B, teal #13A89E, orange #F39C12, violet #8E6CF0, green #2EAD5B, blue #2D7FF9) with a pill name tag (11px white text, radius 8px, padding 2px 6px) offset 10px down-right. The user's cursor is black with a "You" tag.
- Selection boxes: 1.5px solid in the cursor's color, 4px corner handles; text highlights use the cursor color at 25% opacity.
- Drop zone: dashed 2px #2D7FF9 rounded 12px with a pill label "Release to open Venue" (#2D7FF9 bg, white 14px).
MOTION
- Intro (0-4s): cursors fly in from all edges along curved bezier paths, 600-1200ms each, staggered 40ms, cubic-bezier(.25,.8,.25,1). Each headline letter is carried by 1-2 cursors and lands with a slight overshoot (spring stiffness 260, damping 20) while its selection box flashes then fades in 300ms.
- Text editing: a cursor selects a paragraph by sweeping a highlight from left to right over 500ms linear, then another cursor types a caret blink at the end.
- Section switch: a cursor grabs a nav label (e.g. "Venue"), drags it into the headline area; the headline goes 30% opacity with a dashed drop zone, on drop the old letters scatter out with cursors (400ms) and the new word's letters are carried in letter by letter (stagger 60ms). Body copy and the CTA label crossfade 250ms.
- Idle crowd: when not working, cursors drift in small random walks (Perlin noise, 4-12px amplitude, 2-4s period) near the bottom of the page.
- User interaction: pointerdown on any letter, word or block lets the visitor drag it; nearby bot cursors react by moving 20-40px away, and after 3s idle a bot cursor quietly puts the element back (700ms ease-in-out).
SECTIONS
1. Top bar with label and nav.
2. Hero: kicker line, giant headline (2 lines), two short paragraphs (one in a second language), CTA band.
3. Cursor layer above everything (pointer-events none except for the user's grab).
States per page: About, Teams, Venue, Schedule, each with its own headline word, body copy and CTA label ("Join the jam", "Get directions", "Add to calendar").
IMPLEMENTATION
Plain DOM + TypeScript (or React) with absolutely positioned letter spans and a single requestAnimationFrame loop that drives a scripted timeline of cursor tasks (move, grab, drop, select, idle). Keep cursors as transformed divs (translate3d) so 40 of them stay at 60fps; animate letters with transforms only. A small task scheduler assigns free cursors to the next job so the choreography loops endlessly. Use pointer events for the user's drag with setPointerCapture. prefers-reduced-motion: show the finished page with static cursors and no scripted movement. Keep real text in the DOM so the content is readable and selectable by assistive tech; the cursor layer is aria-hidden. Pause the loop when the tab is hidden.
ADAPT TO THE PROJECT
Reuse the project's existing fonts, color tokens and spacing scale; map the cursor colors to the closest accent tokens. Use placeholder event names, dates and names on the cursor tags. Do not copy logos, brand names, photos or illustrations from the original.
SUCCESS CHECK
- On load, cursors fly in and visibly assemble the headline letter by letter, then the page settles into a readable state.
- Dragging a nav label into the drop zone switches the headline, body and CTA, carried in by cursors.
- The visitor can grab and move any letter with their own "You" cursor, and the animation stays smooth with 40 cursors on screen.
