AgentBuild: 30 AI Agent bauen die Seite vor den Augen des Betra…

AgentBuild: 30 AI Agent bauen die Seite vor den Augen des Betrachters

Beim Betreten der Seite werden die Blöcke der Seite hinter einem Drahtmodell versteckt. Ein Schwarm benannter Cursor fliegt herein, zieht Auswahlrahmen und „baut“ den Block auf. Verwendet werden nur DOM und CSS-Transitionen (kein Canvas, keine Bibliothek). Die 30 Cursor verbrauchen so gut wie keine Ressourcen.

Dateien im Ordner assets/:

Datei	Verwendungszweck
agent-build.js	Kern. Nutzung via <script> (erzeugt window.AgentBuild) oder import im Bundler (CommonJS).
agent-build.css	Zwingend erforderlich, gehört zum Kern. Farben über --ab-*-Variablen anpassbar.
agent-build.d.ts	TypeScript-Typen für den Kern.
AgentBuild.tsx	React/Next-Wrapper (Client-Komponente).
demo.html	Eigenständige Demo-Seite, direkt im Browser ausführbar.

Einbindung

Normales HTML-Web

1. Kopiere agent-build.js und agent-build.css in dein Projekt.
2. Binde CSS im <head> ein, Skript am Ende des <body>, rufe dann start nachdem der Inhalt im DOM vorhanden ist:

<link rel="stylesheet" href="agent-build.css" />
<script src="agent-build.js"></script>
<script>
  AgentBuild.start({
    root: "main",                       // Bereich, der aufgebaut wird; Cursor-Layer liegt in diesem Bereich
    targets: "main h1, main p, .card",  // Die Blöcke, in der Reihenfolge der Priorität
    seenKey: "home",                    // Pro Seite ein Schlüssel
    labels: { status: "{agents} Agenten · {edits} Bearbeitungen", building: "Seite wird aufgebaut", done: "Fertig aufgebaut", skip: "Überspringen" },
  });
</script>

React / Next.js (App Router)

1. Kopiere agent-build.js, agent-build.d.ts und AgentBuild.tsx in dasselbe Verzeichnis, z. B. src/components/agent-build/.
2. Importiere agent-build.css einmalig im globalen Stylesheet (@import "../components/agent-build/agent-build.css";).
3. Platziere die Komponente als erstes Kind des Bereichs, der aufgebaut werden soll. Die Komponente verwendet das übergeordnete Element als Wurzel:

<div className="landing">
  <AgentBuild targets=".landing h1, .landing p, .card" seenKey="landing" />
  ...
</div>

Die serverseitig gerenderte Seite funktioniert trotzdem, da die Komponente nur clientseitig läuft und die Blöcke im useLayoutEffect (vor dem ersten Paint) ausblendet – es gibt kein Flackern des Inhalts.

Auswahl der targets – entscheidend für die Qualität des Effekts

• Wähle bedeutungsvolle Blöcke: Überschriften, Absätze, Buttons, Karten, Bilder. Keine div-Container, die eine ganze Sektion umfassen – ein riesiger Rahmen sieht aus wie ein Fehler.
• Liste sie in der Reihenfolge der Priorität. Elemente, die innerhalb eines bereits ausgewählten Elements liegen, werden automatisch ignoriert. Beispiel: Wurde .card gewählt, wird ein p in dieser Karte nicht einzeln aufgebaut. Soll auch die Karte selbst aufgebaut werden, setze .card vor p.
• Ignoriere Bereiche, die bereits einen eigenen Effekt haben (z. B. scrollgesteuerter Text, Canvas) mit skipInside: ".tagline".
• Elemente mit einer Breite oder Höhe von 0 zu Beginn werden ignoriert.
• Etwa 30 bis 140 Blöcke sehen gut aus. maxTargets ist standardmäßig 140.
• Falls das Projekt bereits einen „Einblenden beim Scrollen“-Effekt hat, deaktiviere ihn während der Agentenlaufzeit, sonst überlagern sich die Effekte. Beispiel: [data-agent-build] .reveal { opacity: 1; transform: none; transition: none; } (das Attribut data-agent-build wird während der Laufzeit auf die Wurzel gesetzt).

Optionen

Option	Standardwert	Bedeutung
root	document.body	Element oder Selektor. Während der Laufzeit wird position: relative gesetzt.
targets	h1, h2, h3, p, img, figure, li, button, .card	Liste der Blöcke.
count	30 (16 bei Bildschirmbreite unter 640px)	Anzahl der Agenten.
once / seenKey	true / "agent-build"	Pro Tab nur einmal ausführen.
forceParam	"agents"	Fügt ?agents zur URL hinzu, um die Ausführung zu erzwingen – praktisch beim Aufnehmen von Videos.
respectReducedMotion	true	Keine Ausführung, wenn der Benutzer reduzierte Bewegung aktiviert hat.
pill	true	Statusleiste mit Schaltfläche „Überspringen“.
labels	Englisch	status (mit {agents}, {edits}), building, done, skip.
colors, roles	8 Farben, 10 Rollen	Farbe und Name der Agenten (z. B. layout-07).

start() gibt ein Objekt mit { skip(), destroy(), started } zurück. destroy() setzt die Seite in den Ursprungszustand zurück. Rufe es beim Verlassen der Seite (SPA) oder beim Unmounten der Komponente auf.

Gestalte die Oberfläche mit CSS-Variablen: --ab-wire (Drahtgitter-Farbe), --ab-pill-bg, --ab-pill-text, --ab-pill-muted, --ab-mono, --ab-ease.

Testen mit Zahlen – kein ständiges Screenshot-Machen

Verwende Playwright, um die Seite mit ?agents zu öffnen, und lese dann:

({
  cursors: document.querySelectorAll(".ab-cursor:not([data-hidden])").length, // ~30 zu Beginn
  waiting: document.querySelectorAll('[data-ab="wait"]').length,              // nimmt beim Scrollen ab
  on: !!document.querySelector("[data-agent-build]"),                          // false, wenn fertig
})

Scrolle mit window.scrollTo schrittweise (verwende nicht mouse.wheel, falls die Seite Lenis Smooth Scroll hat) und warte einige Sekunden. Korrektes Ergebnis: waiting wird 0 und on wird false. Prüfe die Schaltfläche „Überspringen“: Klicke .ab-skip, danach gibt es kein [data-ab] mehr. Mache ein Screenshot nur, wenn das visuelle Erscheinungsbild beurteilt werden muss.

Bekannte Fehler

• Rahmen oder Cursor falsch positioniert: Die Wurzel umschließt nicht alle Blöcke. Wähle als Wurzel das Element, das alle targets enthält.
• fill-Bilder (Next/Image) überdecken die ganze Seite: Kein Fehler dieses Skills. Der übergeordnete Container des fill-Bildes benötigt position: relative.
• Effekt wird nicht erneut ausgeführt: Wurde bereits einmal im Tab ausgeführt. Füge ?agents zur URL hinzu oder öffne einen neuen Tab.
• React StrictMode (führt den Effekt zweimal in der Entwicklung aus): Der Kern setzt „bereits ausgeführt“ erst nach 1,2 Sekunden, daher läuft der zweite Mount normal.