v0.2 Open source, MIT, zero dependencies

Your page, assembled live by a swarm of AI agents.

Drop in one script and every visitor watches a crew of agent cursors frame, sketch and fill in your layout, layer by layer, like a multiplayer design session. Then it gets out of the way.

GitHub

Press Esc or the × in the pill to skip. Respects reduced motion. This demo plays on every load; on your site the intro plays once per session by default.

landing.html

0runtime dependencies

1script tag to install

0.00layout shift (CLS)

~50 sa full session at 1×, 5× or skip on demand

Features

Theatre for the first visit. Plain HTML for everyone else.

The effect only hides and reveals what is already in your markup. Crawlers, screen readers and people who prefer less motion get the page as it is.

Zero dependencies

One file, vanilla JavaScript. Works from a script tag or as an ES module in any bundler.

SEO safe

Content is in the DOM from the first byte. Bots are detected and simply see the finished page.

Accessible by default

Overlay is aria-hidden and never takes clicks, reduced motion turns it off, Esc skips, and keyboard focus shows the focused element at once.

A camera that follows

The page scrolls with the work so the whole layout gets built. When the visitor scrolls, the camera is theirs and the crew builds what is on screen.

Framework friendly

Plain HTML, React, Next.js, Vue, Astro, Svelte. Start it after hydration and it never fights your renderer.

Tunable

Agent count, palette, names, speed, duration cap, layer selector, sound, HUD and once-per-session.

How it works

Scan, claim, reveal.

A small scheduler hands layers to agents in document order and fits the whole show into the time you allow.

01 · scan

Find the layers

Headings, text, media, buttons and cards are collected and faded to transparent. Their boxes stay exactly where they are.

02 · claim

Agents draw frames

Each agent flies to a layer, drags out a selection with live dimensions, and drops a skeleton placeholder inside.

03 · reveal

Content wipes in

A scan line sweeps across the frame, real content replaces the skeleton, and the agent moves on to the next job.

Install

One line. No build step.

Put the script in your <head> so layers are hidden before the first paint. Everything else is optional.

Script tag

<!-- in <head> -->
<script src="agent-swarm-build.min.js"
        data-autostart
        data-agents="14"></script>

ES module

import AgentSwarm from 'agent-swarm-build';

AgentSwarm.start({
  agents: 14,
  colors: ['#8b74ff', '#4cc9f0'],
  onComplete: (r) => console.log(r)
});

“We wanted the first ten seconds on our site to feel like peeking into the studio while the work happens. This is exactly that, and it costs us nothing on SEO.”

Placeholder testimonial, Example Studio

Playground

Tune the swarm.

Change the options and replay. The page scrolls back to the top and the agents rebuild it.

// events show up here

FAQ

Questions

Does it hurt SEO?

No content is removed or injected. Everything is in your HTML from the start and only made transparent while it plays. Known crawlers and prerender bots skip the effect entirely.

What about Core Web Vitals?

There is no layout shift: visibility is controlled with opacity and clip-path only. Revealing content later can delay Largest Contentful Paint in lab tools, so it plays once per session by default and you can exclude your hero with data-swarm-skip.

Can visitors skip it?

Yes. The × in the pill or the Esc key reveal everything instantly, and 5× speeds it up. Scrolling never skips: the camera becomes yours and the crew builds what is on screen. After the build the crew keeps flying until you close the pill.

Does it work without JavaScript?

Yes, nothing is hidden until the script runs. If it fails midway a CSS failsafe brings the page back after three seconds.