[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-105368":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":8,"htmlUrl":8,"language":9,"languages":8,"totalLinesOfCode":8,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":14,"stars7d":14,"stars30d":14,"stars90d":13,"forks30d":13,"starsTrendScore":15,"compositeScore":16,"rankGlobal":8,"rankLanguage":8,"license":8,"archived":17,"fork":17,"defaultBranch":18,"hasWiki":19,"hasPages":17,"topics":20,"createdAt":8,"pushedAt":8,"updatedAt":21,"readmeContent":22,"aiSummary":8,"trendingCount":13,"starSnapshotCount":13,"syncStatus":23,"lastSyncTime":24,"discoverSource":25},105368,"swarm-cursors","DhvanilPatel\u002Fswarm-cursors","DhvanilPatel",null,"JavaScript",168,9,53,0,92,276,82.2,false,"main",true,[],"2026-11-01 00:15:13","# Swarm Rebuild\n\nA Chrome extension that wipes any web page to a blank canvas and lets a swarm of multiplayer cursors build it back, live: crosshair-drawn boxes, typed text, pen-tool lines, ruler guides and ⌥-drag duplicates, until the page looks just like it did before.\n\n![Swarm Rebuild rebuilding a page](media\u002Fdemo.gif)\n\n[Full demo video (36s)](media\u002Fdemo.mp4) · [Demo with sound (60s)](media\u002Fdemo-with-sound.mp4)\n\n## Credit\n\nThis is a tribute to **[Swarm](https:\u002F\u002Fcalifa.github.io\u002Fswarm-site\u002F)** by **[Joel Califa](https:\u002F\u002Fjoelcalifa.com)** ([@califa](https:\u002F\u002Fgithub.com\u002Fcalifa), [source](https:\u002F\u002Fgithub.com\u002Fcalifa\u002Fswarm-site)), a website that builds itself as you scroll.\n\nThe motion design is his: the cursor set, the swarm and flocking physics, the build choreography (rects, typing, guides, duplicates), the rulers and the overall look. Large parts of the animation engine here are adapted directly from his site. What this project adds is the part that points it at *any* page: snapshotting a live DOM into a blueprint the swarm can rebuild, plus the extension around it.\n\nGo look at the original. It's better than this.\n\n## Install\n\nIt isn't on the Chrome Web Store yet, so load it unpacked:\n\n1. Clone or download this repo.\n2. Open `chrome:\u002F\u002Fextensions` and turn on **Developer mode** (top right).\n3. Click **Load unpacked** and choose the [`swarm-rebuild\u002F`](swarm-rebuild) folder.\n4. Pin it (puzzle icon → pin).\n\n## Use\n\n- Click the toolbar icon or press **Alt+Shift+S** on any page.\n- The page fades out and the cursors orbit the site's favicon, then fan out and start building.\n- **Scroll** and the swarm chases you, with more agents joining the faster you go.\n- **Tour** auto-scrolls at the pace the swarm can keep up with. Good for screen recordings.\n- **1× \u002F 2× \u002F 3×** changes build speed.\n- **Sound** is on by default (🔊 in the toolbar, or press **M**). If the page hasn't been clicked yet, Chrome keeps audio locked and the button says **Tap for sound**; one click anywhere starts it.\n- When it's done, the cursors flock to your mouse. **Go live** fades back to the real, clickable page; **Replay** builds it again.\n- **Esc**, **✕**, or clicking the icon again exits at any time.\n\nThere's a self-contained test page in [`demo\u002Findex.html`](demo\u002Findex.html) (an inner-scrolling app shell with floats, forms, cards and media). Opening local files needs **Allow access to file URLs** enabled for the extension.\n\n## How it works\n\n1. **Snapshot.** [`swarm.js`](swarm-rebuild\u002Fswarm.js) walks the live DOM, including open shadow roots, and turns it into a blueprint:\n   - boxes with fills, borders, radii, shadows, gradients, masks and backdrop blur → **rects**\n   - text blocks → **text layers**, cloned with their computed styles (fonts, links, inline code, icons, `::before`\u002F`::after`)\n   - single-side borders and `\u003Chr>` → **pen-tool lines**\n   - `\u003Cimg>`, `\u003Csvg>`, `\u003Cvideo>`, `\u003Ccanvas>`, iframes → **media**. WebGL canvases, playing video and cross-origin iframes are cropped from a screenshot taken at click time while only those elements are visible.\n   - repeated siblings (nav links, cards, list rows, logos) → one **master** plus **duplicates**\n   - shared left edges and baselines → **ruler guides** that text snaps to\n2. **Blank.** A full-viewport layer, isolated from the page's CSS in a shadow root, covers the page with its own background color. A quick hidden scroll pass first triggers lazy images and reveal-on-scroll content.\n3. **Rebuild.** Each cursor runs a small generator script per task. Tasks unlock top-down as you scroll, children wait for their parent box, and duplicates wait for their master:\n   - **rect \u002F media:** crosshair drag with a live `W × H` badge and a gray placeholder, then the real fill fades in (images sweep top to bottom)\n   - **text:** drag a text box, type with an I-beam and a blinking caret; big headings start at 18px and step up\n   - **lines:** pen tool, anchor points, rubber band to the cursor\n   - **guides:** Figma-style rulers slide in, a red guide is dragged out, and text snaps onto it\n   - **duplicates:** select the master, ⌥-drag a copy with red spacing measurements, then retype its text, swap its image or restyle it\n   - **swarm physics:** orbiting, alignment and mouse-avoiding flocking for the intro and the finale\n4. **Sound.** Synthesized live with the Web Audio API (no audio files), mostly clicky, a little musical:\n   - typing is a mechanical keyboard (a sharp click over a short thock, deeper on spaces), and every mouse press is a press-and-release click\n   - guides snap with a crisp click, and growing headings tick up in pitch\n   - boxes, images and duplicates add a sparse, quiet glass-piano note from the E major pentatonic, on an eighth-note grid: big sections play low, small things high, pitch rises left to right, and every sound is panned to its cursor\n   - an airy swell as the page dissolves, a short arpeggio as the swarm fans out, a soft E major chord when the page is done, and a falling sweep for Go live\n\n### Files\n\n| Path | What it is |\n| --- | --- |\n| `swarm-rebuild\u002Fmanifest.json` | Manifest V3; permissions are `activeTab` and `scripting` only |\n| `swarm-rebuild\u002Fbackground.js` | Toolbar click → media-only screenshot → inject `swarm.js` (or toggle off) |\n| `swarm-rebuild\u002Fswarm.js` | Snapshot, renderer and swarm engine (one dependency-free content script) |\n| `demo\u002Findex.html` | Edge-case test page |\n| `store\u002F` | Chrome Web Store listing copy, screenshots and promo tile |\n| `scripts\u002Fpackage.sh` | Builds the zip to upload to the Web Store |\n\n## Limits\n\n- Chrome doesn't let extensions run on `chrome:\u002F\u002F` pages, the Web Store or the PDF viewer. The icon shows a red × there.\n- It's a visual rebuild, not a clone. Animations freeze at the moment you click, decorative pseudo-elements are skipped when their position can't be worked out, and canvases, videos and iframes below the first screen become placeholders.\n- Web components are rebuilt as plain styled elements, so none of the page's scripts run inside the swarm's layer.\n- Very long pages are capped at about 4,000 layers \u002F 40,000px.\n\n## Publishing\n\n`.\u002Fscripts\u002Fpackage.sh` writes `dist\u002Fswarm-rebuild-\u003Cversion>.zip` for the [Chrome Web Store Developer Dashboard](https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdevconsole). Listing text, permission justifications and assets are in [`store\u002F`](store), and the privacy policy is [`PRIVACY.md`](PRIVACY.md).\n\n## License\n\nNone yet. The original Swarm site is published without a license and this project adapts parts of it, so please don't reuse this code without checking with [Joel Califa](https:\u002F\u002Fjoelcalifa.com) as well.\n",2,"2026-10-31 04:26:33","CREATED_QUERY"]