Swarm Rebuild: 커서 떼가 웹페이지를 처음부터 다시 그리는 크롬 확장
커서 수십 개가 웹페이지를 지우고 다시 짓는 화면, 이걸 찍은 인스타 릴스가 2만 번 넘게 재생됐어요
- 누가
- Dhvanil(@DhvanilPatel)이 만들었어요. Joel Califa의 사이트 Swarm에 바치는 작품이고, 모션 디자인은 Califa의 것이라고 README에 밝혔어요.
- 언제
- 2026년 10월 14일에 저장소가 열렸고, 다음 날 소리와 영상 재건을 넣은 v1.1.0이 올라왔어요. 릴리스 태그는 없어요.
- 어디서
- 크롬 확장 프로그램이에요. 웹 스토어에는 아직 없어서 개발자 모드로 직접 불러오고, 아무것도 수집하거나 보내지 않는다고 적혀 있어요.
이게 불편했어요
내 사이트나 랜딩 페이지를 소개하는 짧은 영상에 화면이 하나씩 지어지는 장면을 넣으려면, 그 장면을 애니메이션으로 따로 만들어야 했어요. 요소마다 움직임을 하나씩 잡아야 해서, 이미 만들어 둔 페이지를 그대로 쓰기가 어려웠어요.
그래서 이렇게 풀어요
Swarm Rebuild는 지금 열린 페이지를 그대로 재료로 써요. 클릭한 순간의 DOM을 박스, 글, 선, 가이드, 복제본으로 된 설계도로 바꾸고, 페이지를 지운 뒤 커서들이 그 설계도를 보며 디자인 툴에서처럼 하나씩 다시 그려요. 스크롤하면 커서가 따라오고 빨리 내릴수록 더 많은 커서가 붙어요.
이걸로 만든 사람들
웹페이지가 커서 떼에게 다시 지어지는 화면을 82초 릴스로 올렸어요. 캡션은 인도네시아어로 "에이전트가 하게 두자"이고, 댓글에 저장소 링크와 "어떻게 써요?"가 이어졌어요.
biarin agent yang ngerjain 😴
자기 사이버보안 포트폴리오에 로컬로 돌려 봤다며, 방문자가 누를 때만 도는 "Watch it rebuild" 버튼으로 넣어도 되는지 크레딧 조건과 함께 허락을 구한 이슈예요.
I ran it locally on my cybersecurity portfolio and loved the result.
안에서는 이렇게 돌아가요
- 1
나 → background.js
툴바 아이콘 또는 Alt+Shift+S서비스 워커가 이 탭에서 이미 돌고 있는지, 화면에 영상 · 캔버스 · iframe이 있는지부터 확인해요. 돌고 있으면 꺼요.swarm-rebuild/background.js - 2
background.js → swarm.js
미디어만 남긴 스크린샷 + swarm.js 주입DOM으로 못 가져오는 WebGL 캔버스, 재생 중 영상, 다른 도메인 iframe만 보이게 한 채 한 장 찍어 넘겨요.swarm-rebuild/background.js - 3
swarm.js → 블루프린트
라이브 DOM을 블루프린트로열린 shadow root까지 훑어 박스는 rect, 글은 text, 한쪽 테두리는 선, 반복되는 형제는 원본과 복제로 나눠요.swarm-rebuild/swarm.js - 4
블루프린트 → swarm.js
위에서부터 열리는 작업들페이지를 같은 배경색 레이어로 덮고, 커서마다 작업을 맡겨요. 자식은 부모 박스를, 복제는 원본을 기다려요.swarm-rebuild/swarm.js - 5
swarm.js → Web Audio API
조각이 놓일 때마다 음 하나타자는 기계식 키보드 소리, 박스와 이미지는 E장조 5음계 유리 피아노 음이에요. 오디오 파일 없이 합성해요.swarm-rebuild/swarm.js - 6
swarm.js → 다시 지어진 페이지
Go live로 클릭되는 원래 페이지다 지어지면 커서들이 마우스 쪽으로 모이고, Go live를 누르면 진짜 페이지로 돌아가요. Replay로 다시 지을 수 있어요.swarm-rebuild/swarm.js
넣으면 이렇게 나와요
나한테 맞을까요
이럴 때 좋아요
- 내 사이트나 랜딩 페이지 소개 영상에 지어지는 장면을 넣고 싶을 때
- Tour 모드로 자동 스크롤하며 화면 녹화를 뜨고 싶을 때
- 릴스나 쇼츠에 쓸, 소리까지 들어간 화면 소재가 필요할 때
이건 안 돼요
- 라이선스가 아직 없어요. 확장을 써 보는 건 되지만, 코드를 가져다 쓰려면 만든 사람과 원작자 Joel Califa에게 먼저 확인해 달라고 README에 적혀 있어요.
- AI 도구는 아니에요. 커서들은 미리 짠 애니메이션 엔진으로 움직이고, 에이전트나 모델을 부르지 않아요.
- 똑같은 복제가 아니라 눈에 보이는 재건이에요. 애니메이션은 클릭한 순간에 멈추고, 첫 화면 아래의 캔버스 · 영상 · iframe은 자리 표시로 바뀌어요.
- chrome:// 페이지, 웹 스토어, PDF 뷰어에서는 돌지 않고, 아주 긴 페이지는 레이어 약 4,000개 · 40,000px까지만 지어요.
Swarm Rebuild: a cursor swarm redraws any web page
A reel of a cursor swarm wiping a web page and building it back has passed 20,000 plays on Instagram
- Who
- Made by Dhvanil (@DhvanilPatel) as a tribute to Joel Califa’s Swarm site; the README credits the motion design to Califa.
- When
- The repository opened on 14 October 2026; v1.1.0 with sound and live video rebuilds came the next day. No release tags.
- Where
- A Chrome extension, not on the Web Store yet, loaded unpacked in developer mode. Its listing says nothing is collected or sent.
What was hard
Putting a page-being-built moment into a short video about your site meant animating it separately, one element at a time. The page you already had couldn’t simply be used as it was.
What it does about it
Swarm Rebuild takes the page that is open right now as its material. It turns the DOM at click time into a blueprint of boxes, text, lines, guides and duplicates, wipes the page, and lets the cursors redraw it from that blueprint the way a design tool would. Scroll and the swarm follows, with more cursors the faster you go.
What people made with it
An 82-second reel of a web page being rebuilt by the cursor swarm. The caption, in Indonesian, says to let the agent do the work; the comments link the repo and ask how to use it.
biarin agent yang ngerjain 😴
They ran it locally on their cybersecurity portfolio and asked permission, with credit, to add it as an optional "Watch it rebuild" button that runs only when a visitor clicks.
I ran it locally on my cybersecurity portfolio and loved the result.
How it runs inside
- 1
You → background.js
Toolbar icon or Alt+Shift+SThe service worker checks if the swarm already runs here (then it stops) and if video, canvas or iframes are on screen.swarm-rebuild/background.js - 2
background.js → swarm.js
Media-only screenshot, then swarm.js injectedWebGL canvases, playing video and cross-origin iframes aren’t in the DOM, so it shows only those and screenshots them.swarm-rebuild/background.js - 3
swarm.js → Blueprint
Live DOM into a blueprintShadow roots included: boxes become rects, text text layers, single borders lines, repeats a master and copies.swarm-rebuild/swarm.js - 4
Blueprint → swarm.js
Tasks unlocking top downA layer in the page’s background covers it; each cursor takes a task. Children wait for parents, copies for masters.swarm-rebuild/swarm.js - 5
swarm.js → Web Audio API
One note each time a piece landsTyping clicks like a keyboard; boxes and images play a glass-piano note in E major pentatonic. No audio files.swarm-rebuild/swarm.js - 6
swarm.js → The rebuilt page
Go live: back to the clickable pageWhen it’s done the cursors flock to your mouse; Go live fades back to the real page, and Replay builds it again.swarm-rebuild/swarm.js
What goes in, what comes out
Is it for you
Good for
- Adding a page-being-built moment to a video about your site
- Screen recordings with Tour auto-scrolling at the swarm’s pace
- A clip with its own sound for Reels or Shorts
Not for
- No license yet. Using the extension is fine, but the README asks you to check with its author and with Joel Califa before reusing the code.
- Not an AI tool: the cursors run on a scripted animation engine and call no agent or model.
- A visual rebuild, not a clone: animations freeze at click time, and canvases, videos and iframes below the first screen become placeholders.
- It can’t run on chrome:// pages, the Web Store or the PDF viewer, and very long pages stop at about 4,000 layers / 40,000px.