site-motion

Was macht site-motion?

Szenen, die mit Pro gekennzeichnet sind oder in diesen Notizen genannt, aber in scenes/ fehlen, sind site-motion Pro-Szenen. Lerne aus dem, was die Notizen über sie sagen; baue aus den Szenen, die hier sind (site-motion list).

Eine Szene ist eine reine Funktion der Zeit. render(t) zeichnet denselben Frame für dieselbe t, unabhängig davon, was zuvor passiert ist. Diese eine Regel ist der Grund, warum dieselbe Datei live auf einer Website abgespielt und frame-genau als Video gerendert werden kann: Der Exporter sucht einfach zu jedem Frame-Zeitpunkt und macht einen Screenshot.

Repo-Root: Der Ordner, der diese Datei enthält (installiere sie mit git clone https://github.com/Shivraj97/site-motion ~/.claude/skills/site-motion, oder verlinke einen Klon dorthin). Node 22+, Chrome, ffmpeg. Kein npm install. Führe die CLI von einem beliebigen Projekt aus mit ihrem vollständigen Pfad aus; Builds und Renderings landen im out/-Verzeichnis des Projekts, und --tokens / --content akzeptieren Pfade relativ dazu:

SM=~/.claude/skills/site-motion/bin/site-motion.mjs
node $SM init card-story --tokens ledger          # schreibt ./brand.json (aus dem Preset) und ./card-story.json zum Bearbeiten
node $SM make card-story --tokens ./brand.json --content ./card-story.json --out public/motion/story.html

Um eine Szene in den eigenen Quellcode des Projekts zu integrieren, damit das Team sie bearbeiten kann, verwende add anstelle von make. Es kopiert scene.js, scene.css, content.json und tokens.json nach public/motion/<scene>/ (oder motion/<scene>/, wenn es kein public/ gibt), den Player und die Vendor-Bibliotheken nach runtime/ und schreibt <scene>.html, einen Ein-Datei-Embed. Der kopierte Ordner ist eine gültige Szene für build, render und make:

node $SM add ledger-stamp --tokens ./brand.json --content ./ledger.json          # → public/motion/ledger-stamp/ + ledger-stamp.html
node $SM make public/motion/ledger-stamp --tokens public/motion/ledger-stamp/tokens.json --formats png,sheet

Innerhalb des Repos selbst funktioniert die Kurzform:

node bin/site-motion.mjs list                                   # Szenen und Token-Presets
node bin/site-motion.mjs make iso-blocks --tokens mint          # baue + rendere mp4, webp, poster
node bin/site-motion.mjs make card-story --tokens ./brand.json --content ./my-story.json --formats mp4,webm,webp,gif,png,sheet
node bin/site-motion.mjs build window-stack --tokens night --out public/hero.html   # nur Live-Embed
node bin/site-motion.mjs render out/hero.html --formats mp4 --scale 2 --range loop        # exportiere einen bestehenden Build

Ausgaben landen in out/<content>-<tokens>/. --range loop exportiert nur die nahtlose Schleife (Standard für GIF und WebP); full ist Intro plus eine Schleife (Standard für MP4 und WebM). sheet schreibt ein 4×3-Kontaktblatt: Erstelle immer eines und lies es.

Workflow

Eine ganze Website (mehrere Abschnitte oder Seiten) beginnt mit einem Plan, nicht mit einer Szene. Führe node $SM plan im Projekt aus:

• mit --brief brief.md, wenn du die Abschnitte kennst. Das ist der beste Input. Schreibe das Briefing aus dem echten Copy der Website:

  # Acme: Was das Produkt tut, in einem Satz
  ## startseite
  - hero: Die Hero-Überschrift
  - feature: Die Überschrift jedes Feature-Abschnitts und eine Zeile darunter
  ## preise
  - hero: …
  

• oder mit --url https://ihre-website.de[,https://ihre-website.de/preise], um die Überschriften der Live-Seiten zu lesen;
• oder mit --pages startseite,funktionen,preise --about "…", wenn es nichts anderes gibt (generische Auswahl; sage das).

Es ordnet jeden Abschnitt einer Szene zu, jede einmal verwendet, alle in einem Look. Der Look ist der der Home-Hero und wird in site-motion.json festgehalten. Es zeichnet site-motion-plan.png: Jeder Abschnitt als Frame seiner Szene in der Marke und im Look, mit der Bewertung des Scores oben drauf. Zeige dem Benutzer das Blatt und hole die Zustimmung ein, bevor du plan apply ausführst.

• Eine mit ? gekennzeichnete Auswahl hatte keine starke Übereinstimmung. Lese ihre Notiz ("ledger-stamp passt besser, ist aber bei home.hero") und entweder tauschen (plan swap <slot> <scene>), die bessere Szene wiederverwenden oder dem Benutzer sagen, dass die Bibliothek noch keine Szene für diese Geschichte hat.
• Wende niemals eine schwache Auswahl an, ohne es zu sagen.

plan apply fügt jede Szene hinzu und gibt den Embed-Code für jeden Abschnitt aus. Schreibe dann den Text jeder Szene in ihrem content.json, führe sync aus und schließe mit score --project ab.

Für eine einzelne Szene befolge die folgenden Schritte.

1. Hole zuerst das Designsystem. Tokens sind die einzige Quelle für Farbe und Schrift. Finde sie in dieser Reihenfolge: die tokens/theme-Datei des Projekts (CSS-Variablen, Tailwind-Konfiguration, tokens.json), dann die Live-Website (messe berechnete Styles), dann frage nach. Schreibe sie als tokens/<marke>.json (Shape unten). Erfinde niemals eine Farbe, sobald die Palette existiert; leite Schattierungen mit h.mix(a, b, p) aus Tokens ab.
2. Wähle den Archetypen, der die Geschichte des Produkts erzählt, oder schreibe eine neue Szene:

   Szene	Geschichte, die sie erzählt	Renderer
   iso-blocks	Infrastruktur, Plattformen, "viele Teile arbeiten zusammen": Blöcke mit Live-Daten auf ihren Flächen über einem gefliesten Boden	SVG
   card-story	Ein Workflow, der Arbeit entfernt: Eine Feature-Liste treibt eine Produktkarte durch Zustände	DOM
   window-stack	"Funktioniert dort, wo du arbeitest": App-Fenster über einem gemalten Canvas-Hintergrund, ein Agent, der Schritte ausführt	Canvas + DOM
   live-room Pro	Multiplayer: Benannte Cursor über einem App-Fenster, ein Vorschlag, eine Abstimmung, die bestanden wird, eine Änderung, die ausgeliefert wird, ein Aktivitätsticker	Canvas + DOM
   leaderboard	Anerkennung und Rangliste: Beiträge landen auf Zeilen, Punkte zählen hoch, Zeilen sortieren neu	DOM
   bloom-flow	Automatisierung: Ein Ereignis durchläuft einen Workflow-Graphen und jeder Schritt erblüht zu generativen Blumen	Canvas + SVG
   signal-field	Unordentlich → strukturiert: Verrauschte Stränge passieren ein Tor und verlassen es als saubere Spuren	p5.js
   drop-pile	Viele → eins: Arbeitselemente fallen mit echter Physik in ein Tablett, ein Zähler zählt sie	Matter.js (gebaked)
   galton-router	Routing, Genehmigungen, A/B: Zahlungen fallen durch ein Nagelbrett; eine Regel schaltet einen Schalter und der Flow bewegt sich zu den besten Fächern	SVG (gesäter Zufallsgang)
   receipt-printer	Unordentlich → strukturiert: Dokumente füttern einen Schlitz, ein Bon druckt jedes extrahierte Feld mit seiner Konfidenz	DOM + SVG
   score-sheet	Orchestrierung, Multi-Agent: Ein Lauf, geschrieben als Partitur, Notenlinien vibrieren, während jeder Agent arbeitet	SVG
   css3d-stack	Architektur, Schichten: Echte HTML-Boxen in CSS 3D heben sich auseinander, während eine Anfrage durchfällt	CSS 3D
   loom	Viele → eins, Integrationen: Jedes Werkzeug ist ein Band aus Kettfäden, die zu einem Köpergewebe verwoben werden, das auf den Balken des Produkts rollt	Canvas 2D
   domino-run	Automatisierung, Auslöser: Eine Kugel kippt eine Kette von Domino-Steinen, gruppiert in Schritte, jeder Schritt leuchtet auf, wenn die Welle ihn erreicht	Matter.js (gebaked)
   weather-board	Zuverlässigkeit, Failover: Ein Sturm (Shader-Wolken, Regen, Blitze) baut sich über einer Region einer Statuskarte auf, der Verkehr wird umgeleitet, es klart mit 0 fehlgeschlagenen Anfragen	WebGL Shader + DOM
   ledger-stamp	Genehmigungen, Compliance, Vertrauen: Zahlungen reiten auf einem indizierten Band an einem Policy-Scanner vorbei, einem APPROVED-Stempel und einer Sign-and-Seal-Presse in einen Prüfpfad; eine über dem Limit wird als HELD gestempelt und wartet auf einen zweiten Genehmiger	SVG + DOM
   grain-tally	Metriken, Skalierung: Tausende von Körnern (jedes ein fester Batch echter Ereignisse) atmen als Staubring, gießen sich in die Ziffern der Summe, sortieren sich dann in einen Balken pro Quelle mit ihrer genauen Anzahl; die Zahl wird aus ihren Daten gebaut, nicht hochgezählt	Canvas 2D (Partikel, reines t)
   lens-of-order	Unordentlich → strukturiert, Klassifikation, KI, die sieht: Ein 1-Bit-gedithertes Feld von treibenden Blobs (noch nicht verstanden); eine Lupe füllt jeden Blob in seiner Klassenfarbe, umrandet ihn und beschriftet ihn mit einer Konfidenz, hinterlässt eine verblassende farbige Spur	Canvas 2D (Pro-Zellen-Feld, Bayer-Dither)
   water-slide-funnel	Conversion-Funnel: Fahrer rutschen eine Rampe pro Stufe hinunter; der Pool jeder Lippe fängt die Drop-offs dieser Stufe	SVG
   gold-pan Pro	Search-as-you-type: Jeder Tastendruck wirbelt die Pfanne, bis drei bepreiste Nuggets übrig sind	Canvas 2D
   museum-heatmap Pro	Produktanalytik: Besucher-Fußabdrücke erwärmen den Boden um die Funktionen, an denen Leute anhalten; das Ranking kommt von der Hitze	Canvas 2D
   cell-division	Datenbank-Branching: Main teilt sich in Branches, einer wird verworfen, einer merged zurück mit seiner Änderung	Canvas 2D (Metaballs)
   scratch-off Pro	Vorhersage: Folie kratzt die tatsächliche Abfahrtszeit ab, bevor die Anzeigetafel der Airline aufholt	Canvas 2D
   sieve-tray Pro	Früherkennung: Marker fallen durch ein feines Sieb; die wenigen, die hängen bleiben, werden herausgehoben und markiert	Matter.js (gebaked)
   rube-goldberg Pro	Vorher / Nachher: Eine Quittungsmarmelade klemmt in fünf alten Apparaten, fällt dann in einer Sekunde einen Schacht hinunter	SVG
   language-balloons Pro	Lokalisierung: Wortblasen in acht Schriften schweben auf und setzen den Satz jeder Locale zusammen, inklusive RTL	Matter.js (gebaked)
   balloon-deploy Pro	Deployments: Jeder Build-Schritt bläht die Hülle auf; bei 100% hebt die Veröffentlichung ab	SVG
   pufferfish Pro	Autoscaling: Ein Kugelfisch bläht sich auf, um jeder Verkehrswelle zu entsprechen, während ein Fisch mit fester Kapazität herumgeworfen wird	SVG
   gear-tiers Pro	Preise: Pläne dargestellt als Camping-Ausrüstung, vom Zelt bis zum Basislager, mit einem monatlichen / jährlichen Umschalter	SVG
   permission-chessboard Pro	Rollen und Berechtigungen: Jede Rollenfigur landet auf dem Brett und beleuchtet nur die Felder, die sie verwenden darf	SVG
   tree-rings	Jahresrückblick: Ein Ring pro Jahr, so breit wie das Jahr beschäftigt war, mit Kerben für die ersten Male	SVG
   parchment-changelog	Changelog: Eine Schriftrolle entrollt eine Veröffentlichung nach der anderen, jede getuscht, während sie ausgeliefert wird	SVG + DOM
   moving-boxes	Migration: Ein Sackkarren trägt die Kiste jedes alten Werkzeugs in das neue Gebäude, nichts geht verloren	SVG + DOM
   privacy-pebbles Pro	PII-Schwärzung: Ein Rakel verwandelt jedes persönliche Detail in einen identischen Kieselstein; der Satz bleibt lesbar	SVG + DOM
   ant-trail Pro	Automatische Kategorisierung: Ameisen tragen die Quittung, Notiz und Genehmigung jedes Swipe in den richtigen Ledger-Slot	Canvas 2D
   sunrise-payroll Pro	Globales Gehaltsabrechnung: Ein Sonnenaufgang durchquert acht Zeitzonen und bezahlt jede Stadt um ihre eigene 9 Uhr	SVG
   whiteout Pro	Ruhe: Ein geschäftiges Dashboard löst sich in Nebel auf und lässt die eine Zahl zurück, die zählt	WebGL Shader + DOM
   ink-flood Pro	Theming, White-Label: Ein Farbchip flutet das gesamte Produkt in einem neuen Farbschema	SVG
   integration-deck Pro	Integrationen: Jedes Werkzeug ist eine Taste auf einem isometrischen Makro-Pad; ein Workflow spielt als Akkord, während ein Run-Log jeden Schritt eintippt	Three.js
   margin-rails Pro	Herkunft: Eine Notiz schreibt sich selbst, während Passagen, die aus früheren Dateien übernommen wurden, auf Schienen hereingleiten, die ihre Quelle nennen	SVG + DOM
   pigeonhole-wall	Gedächtnis: Dokumente archivieren in beschrifteten Fächern, und eine Anfrage zieht die drei Quellen, die sie braucht	SVG + DOM
   redline-front Pro	Vertragsprüfung: Eine Prüffront überstreicht das Dokument und gibt es als fertige Redline mit verifizierten Behörden zurück	SVG + DOM
   step-rail	So funktioniert's, Onboarding: Ein Token reist nummerierte Schritte entlang; jede Karte öffnet sich zu dem, was ihr Schritt produziert hat, und der letzte landet das Ergebnis	SVG + DOM
   pipeline-board	Workflows, Pipeline: Karten rücken Spalte für Spalte auf einem Kanban-Board vor, während Zählungen und Summen ihnen folgen	DOM
   account-health	Kundenbindung, Customer Success: Eine Gesundheitstabelle spielt den Monat nach; ein Konto rutscht in Gefahr, ein Playbook wird ausgelöst und es erholt sich	SVG
   split-wipe	Vorher / Nachher, Konsolidierung: Ein Teiler streift über verstreute manuelle Arbeit und jedes Fragment schnappt in eine Produktoberfläche	DOM
   roadmap-rail	Roadmap, Meilensteine: Ein Heute-Marker wandert auf der Zeitachse; ausgelieferte Meilensteine füllen sich und der wichtigste Launch öffnet sich zu einer Karte	SVG
   trust-rings	Sicherheit, Compliance: Anfragen passieren konzentrische Kontrollringe um die Daten; die Unbefugte wird gestoppt und protokolliert	SVG
   balance-scale	Preise, Qualität vs. Kosten: Drei Balkenwaagen, jede Neigung berechnet aus den Scores; unsere kippt zur Qualität	SVG
   crate-discrepancy	Abgleich: Tabletts heben sich aus einer Kiste und haken den Packzettel ab; das kurze schwebt mit seiner Notiz auf	SVG + DOM
   press-qa	Testen, CI: Builds rollen von einer Presse; ein Arm schnippt den mit einem fehlgeschlagenen Test einen Schacht hinunter und er besteht beim erneuten Durchlauf	SVG
   radar-sweep	Observability: Jeder laufende Job ist ein Blip auf einem Radarschirm; ein Cursor greift hinein und pausiert den fehlschlagenden	Canvas 2D + DOM
   agent-checkout	Produkt-UI-Demo, Agent-Zahlungen: Eine Kaufanfrage, eine maskierte virtuelle Karte wird automatisch ausgefüllt, der Limit-Meter bewegt sich um den Betrag, die Quittung kommt zur Liste	DOM + ui-kit
   click-to-done	Produkt-UI-Demo, jede Ein-Aktions-Funktion (einladen, senden, genehmigen, veröffentlichen): Ein echter Bildschirm in einem Browser-Frame, der Cursor tippt, wählt und klickt, die Kamera zoomt auf das Ergebnis und zieht sich zurück	DOM + ui-kit
   dashboard-push	Produkt-UI-Demo, Analytik und Reporting: Die Hauptkennzahl baut sich aus dem Diagramm auf, während es gezeichnet wird, der Cursor wischt über einen Tooltip, die Kamera zoomt auf den Moment, der zählt, ein Bereichswechsel verwandelt jede Serie	DOM + SVG + ui-kit
   phone-stack	Produkt-UI-Demo, Mobilgeräte und Benachrichtigungen: Warnungen landen auf einem Sperrbildschirm mit jeweils einem Signalring, ein Tippen öffnet die neueste im App-Bildschirm, ein Wischen nach Hause löscht sie	DOM + ui-kit
   shot-demo	Produkt-UI-Demo aus einem Screenshot: Der eigene Screenshot des Kunden in einem Frame; der Cursor tippt in seine echten Felder und klickt auf seinen echten Button, Werte ändern sich im Gesicht der Marke, ein Spotlight und ein Callout landen auf dem Ergebnis	DOM + Screenshot + ui-kit
   integration-deck ist der 3D-Standard: Ein taktiles Objekt, eine physische Aktion, flache Toon-Bänder, eine Tintenkontur, eine echte isometrische Kamera und Labels in der Schriftart der Marke. Die anderen Three.js-Objektszenen (ein Orbit-Hub, eine Sortierwand, ein extrudiertes Logo, eine glTF-Showcase) leben außerhalb des öffentlichen Satzes, bis sie überarbeitet werden; die 3D-Tooling (vendor/three-full.min.js, `ve

…