SIX — Scrolling Immersive Xploration

Was macht SIX — Scrolling Immersive Xploration?

Erzeugt eine Landingpage, bei der Scrollen eine Kamera steuert: Sie taucht von außen in eine Szene ein, fliegt dann hinaus und in die nächste Szene hinein – kontinuierlich, ohne sichtbare Schnitte. Die Bilder werden von KI generiert (MuAPI); die Seite spielt lediglich vorgerenderte Videos entsprechend der Scrollposition ab. Dies ist dieselbe Technik, die hinter den scrollbaren Apple-Produktseiten steckt – die Kamera bewegt sich wirklich, das Scrollen steuert nur die Zeit.

Was Sie generieren: N Szenenbilder → N 'Dive-in'-Kameraclips → N-1 'Verbindungsclips', die aufeinanderfolgende Szenen nahtlos verbinden → eine portable Scrub-Engine, die die gesamte Kette als einen Flug abspielt.

Die eine Regel, die über Erfolg oder Misserfolg entscheidet: Die Übergänge müssen frame-identisch sein. Lesen Sie Die nahtlose Kette vor der Erzeugung von Verbindungsclips. Dies falsch zu machen, ist der häufigste Fehler und führt zu einem sichtbaren 'Sprung' zwischen den Szenen.

Gehen Sie nicht von einem Frontend-Framework aus. Die Scrub-Engine in resources/scrub-engine.js ist ein eigenständiges, reines JavaScript-Modul (es baut sein eigenes DOM auf und injiziert sein eigenes CSS in einen Container, den Sie übergeben, und stellt sich als mountSIX zur Verfügung), das in einfaches HTML, Next.js, Vue, eine Python-Seite oder alles andere eingebettet werden kann. Der Wert dieser Fähigkeit liegt in der MuAPI-Pipeline, den Prompts und der Nahtstellenmethode – nicht im Framework.

Dateizuordnung: SKILL.md (diese Datei) → scripts/pipeline.md (Copy-Paste-Bash für den gesamten Generierungslauf) + scripts/knockout.py (Hintergrundentfernung) → references/prompts.md (Checkliste für die Aufnahme + jede Prompt-Vorlage) + references/muapi-model-roster.md (verifizierte Modell-/Tier-/Endpunkt-Zuordnung – lesen Sie dies, wenn etwas unten überprüft werden muss) → resources/scrub-engine.js + resources/index-template.html (einsatzbereite Engine + minimale Seite).

---

Schritt 0 – Bootstrap

1. MuAPI-CLI. Wenn muapi nicht im $PATH ist, installieren Sie es gemäß dem üblichen Paketablauf Ihrer Umgebung und führen Sie dann muapi auth configure aus (schreibt MUAPI_API_KEY/seine Konfigurationsdatei – interaktiv, Sie können den Authentifizierungsablauf selbst nicht ausführen, wenn er einen Browser erfordert). Bestätigen Sie, dass es funktioniert, mit muapi auth status. Es gibt keinen dokumentierten CLI-Befehl für das Credits-Guthaben. Wenn ein Batch mit einem credits-bezogenen Fehler stoppt, überprüfen Sie das MuAPI-Dashboard direkt.
2. ffmpeg / ffprobe im $PATH (Frame-Extraktion und -Kodierung).
3. Ein Bildbearbeitungswerkzeug für die Hintergrundentfernung, wenn Sie schwebende Szenen wünschen: PIL (python3 -c "import PIL") oder cwebp/sips. Optional – siehe Schritt 3.
4. jq im $PATH – im gesamten Pipeline-Ablauf verwendet, um --output-json-Antworten zu parsen und hochgeladene Asset-URLs zu extrahieren.
5. Besonderheiten: macOS liefert bash 3.2 (kein declare -A); verwenden Sie keine assoziativen Arrays in Skripten. MuAPI-Generierungen dauern Minuten – führen Sie sie immer getrennt (im Hintergrund) aus und fragen Sie ab (--async + muapi predict wait <request_id>), niemals als blockierenden Aufruf im Vordergrund. MuAPI-Video-/Bildendpunkte akzeptieren gehostete URLs, keine lokalen Dateipfade – dies ist das Gegenteil der Higgsfield-Konvention und der wahrscheinlichste Migrationsfehler: Jedes lokale Referenzbild (ein Szenenbild, ein extrahierter Grenzframe) muss zuerst über muapi upload file <path> --output-json --jq '.url' laufen, und die zurückgegebene URL wird an --start-image/--end-image/--image-urls übergeben. Die genauen Flag-Namen und Auflösungs-/Qualitätsoptionen sind nicht für jedes Modell einheitlich dokumentiert – überprüfen Sie mit muapi video from-image --help / muapi image generate --help vor dem Batching, und sehen Sie references/muapi-model-roster.md für das, was bereits gegengeprüft wurde.

---

Schritt 1 – Befragen Sie den Benutzer

Das Thema muss der Benutzer nennen – fragen Sie es als offene Frage in einfachem Prosa, niemals als erfundene Mehrfachauswahl. Eine erfundene Liste von Branchen verzerrt die Auswahl und wirkt, als würden Sie über das Geschäft des Benutzers entscheiden; lassen Sie ihn in seinen eigenen Worten antworten (sein echtes Geschäft, das eines Kunden oder eine beliebige Idee). Reservieren Sie strukturierte Mehrfachauswahl (AskUserQuestion in Claude Code; eine einfache Entweder-Oder-Frage anderswo) für die wirklich aufzählbaren, weniger folgenreichen Entscheidungen unten – Kunstrichtung und Markenkit-Ansatz – und selbst dort signalisieren Sie, dass sie ihren eigenen Weg gehen können ("Andere"). Fragen Sie nur das, was Sie nicht sinnvoll standardmäßig vorgeben können. Abdecken:

1. Thema (offen fragen, nicht als Mehrfachauswahl) – "Worum soll es in dieser Welt gehen? Ihr Unternehmen, das eines Kunden oder eine beliebige Idee – ein Wort oder ein Satz ist in Ordnung." Erfassen Sie die Branche/das Produkt + einen einzeiligen Werbeslogan (z.B. "ein Bubble-Tea-Unternehmen, vom Blatt bis zum letzten Schluck") und einen Markennamen, falls vorhanden; andernfalls werden Sie unten einen vorschlagen.
2. Markenkit – bieten Sie drei Wege an, wählen Sie einen aus:
   • Importieren von einer URL: Holen Sie die Seite selbst (Web-Fetch) und lesen Sie die sichtbare Palette, den Namen und den Ton ab – es gibt kein dediziertes MuAPI-Markenkit-Import-Tool; dieser Schritt ist Ihre Extraktion, kein CLI-Aufruf. Sagen Sie dies klar, wenn der Benutzer einen Ein-Befehl-Import erwartet.
   • Der Benutzer gibt Ihnen Palette + Name + Ton direkt.
   • Sie schlagen eine Palette + einen Namen vor und lassen sie vom Benutzer genehmigen. Erfassen Sie 4–6 benannte Hex-Werte, einen Anzeigenamen und ein oder zwei Ton-Wörter.
3. Kunstrichtung – Standard ist "soft matte low-poly clay diorama, isometric, tilt-shift miniature, warm light". Bieten Sie Alternativen an (flach Papierbasteln, glänzendes Spielzeug, Knetanimation, Neon-Nacht, fotorealistische Architektur). Was auch immer gewählt wird, wird zur gemeinsamen Stilpräambel, die in jedem Szenen-Prompt wörtlich wiederverwendet wird (das macht die Welt kohäsiv).
4. Die Reise (Abschnitte) – die geordneten Szenen, durch die die Kamera fliegt. Schlagen Sie einen Satz vor, der von der eigenen Wertschöpfungskette des Themas abgeleitet ist, und lassen Sie den Benutzer ihn bearbeiten. 5–7 funktioniert gut. Boba-Beispiel: Bauernhöfe → Perlküche → Flaggschiff-Geschäft → Lieferung → Gemeinschaftsplatz → das Heldenprodukt. Jeder Abschnitt benötigt: eine kurze Themenbeschreibung (was IST im Diorama), eine Überschrift, eine Schlagzeile, eine Textzeile und 0–3 Tag-Pillen. Der letzte Abschnitt ist normalerweise das Heldenprodukt + der CTA.
5. Mobile Version (Beta) – IMMER danach fragen; niemals stillschweigend beide generieren. Fragen Sie als Zwei-Optionen-Wahl (AskUserQuestion in Claude Code; eine einfache Frage anderswo): "Möchten Sie auch eine mobiloptimierte Version? Der mobile Support ist in der Beta – der Scroll-Scrub-Mechanismus ist Desktop-nativ; auf dem Handy erhalten Sie leichtere Encodes und eine gehärtete Engine, aber das Hochformat schneidet das 16:9-Bild ab, und Geräte mit niedriger Leistung können immer noch ruckeln." Optionen: "Nur Desktop" / "Desktop + mobil (Beta)". Der Beta-Hinweis muss dem Benutzer mitgeteilt werden, nicht nur impliziert. Was die Antwort steuert:
   • Ja → produzieren Sie die -m.mp4-Mobil-Encodes (Schritt 6) und verdrahten Sie clipMobile/connectorsMobile (Schritt 7); führen Sie die vollständige mobile Qualitätssicherung durch (Schritt 8). Wenn das fokale Motiv einer Szene außermittig ist, bieten Sie die 9:16-Helden-Variante als Ausweichmöglichkeit an (zusätzliche MuAPI-Credits – sagen Sie es).
   • Nein → überspringen Sie die Mobil-Encodes und die Verdrahtung vollständig. Die Telefon-Härtung der Engine (Seek-Zusammenführung, iOS-Vorbereitung, Safe-Area-CSS) ist unabhängig davon immer aktiv – das ist keine "mobile Version", sondern nur, dass die Seite nicht kaputt geht, wenn ein Handy sie besucht – ein reiner Desktop-Build degradiert also immer noch anmutig.

Das Videomodell ist keine Interviewfrage – standardmäßig stillschweigend seedance-2-first-last-frame (Tier global). Wenn der Benutzer eine Präferenz nennt, respektieren Sie diese nur, wenn sie einen Übergang frame-sperren kann – d.h. es akzeptiert ein Startbild und für Verbinder auch ein Endbild (references/muapi-model-roster.md hat die verifizierte Liste). Diese Fähigkeit liefert nur nahtlose Ausgabe, daher wird ein Modell, das keinen Frame sperren kann, mit einer einzeiligen Begründung abgelehnt, nicht ersetzt – verwenden Sie stattdessen ein Modell aus der Liste.

Halten Sie den Scroll-Mechanismus fest (kontinuierlicher Durchflug) – das ist der Sinn dieser Fähigkeit. Siehe references/prompts.md für die Aufnahme-Checkliste und die Kopierstruktur.

---

Schritt 2 – Generieren Sie die Szenenbilder

Ein Bild pro Abschnitt, alle teilen sich dieselbe Stilpräambel für Zusammenhalt. Standardmodell gpt-image-2-text-to-image (scharf, großartig für isometrische Illustration; gibt einen einfarbigen/weißen Hintergrund zurück, der perfekt für schwebende Diorama-"Inseln" ist). Verwenden Sie nano-banana-pro, wenn die Vorgabe stark zeichen-/cartoonlastig ist, oder google-imagen4-ultra für den fotorealistischen Architekturstil (siehe references/muapi-model-roster.md für die vollständige Bildmodelltabelle).

Prompt-Form (vollständige Vorlagen in references/prompts.md):

<STILPRÄAMBEL, jedes Mal identisch>. Auf einem einfachen, einfarbigen <HG>-Hintergrund mit einem weichen Kontaktschatten. <PALETTE Hex-Codes>. Kein Text, keine Buchstaben, keine Logos, zentriert, 3:2.
Thema: <was ist in DIESEM Diorama>.

• Führen Sie alle N gleichzeitig aus, getrennt. Befehl pro Szene:

  muapi image generate --model gpt-image-2-text-to-image --prompt "$(cat scene_i.txt)" \
    --aspect-ratio 3:2 --async --output-json scene_i.job.json
  id=$(jq -r '.request_id' scene_i.job.json)
  muapi predict wait "$id" --json > scene_i.json
  

• Ergebnis-URL ist unter .result_url (oder .output_url/.url – der genaue Schlüssel ist nicht einheitlich dokumentiert; überprüfen Sie eine Antwort und passen Sie sie an) in der Poll-Ausgabe. curl sie herunter.
• Eine Generierung kann vorübergehend fehlschlagen – wiederholen Sie diese einzeln; starten Sie nicht den gesamten Batch neu.
• Überprüfen Sie die Bilder, bevor Sie fortfahren. Sie müssen als eine zusammenhängende Welt lesbar sein (gleicher Winkel, Palette, Licht). Wenn eines außerhalb des Stils liegt, regenerieren Sie es mit erneutem muapi image generate (einem neuen Aufruf, gleiche Präambel) – verwenden Sie nicht muapi image edit mit einem vorherigen Bild als Referenz, um den Stil zu "fixieren"; der Bearbeitungsmodus verschmilzt/klont den tatsächlichen Raum dieser Referenz, anstatt nur ihren Stil zu treffen.

Siehe scripts/pipeline.md für das exakte Batch-Skript.

---

Schritt 3 – (Optional) Szenen schweben lassen

Wenn die Dioramen über einem atmosphärischen Hintergrund schweben sollen, anstatt in einer festen Box zu sitzen, entfernen Sie den flachen Hintergrund mit scripts/knockout.py (Border-Connected Flood Fill – bewahrt die Innenfarbe, die mit dem HG übereinstimmt, z.B. cremefarbene Wände) auf Transparenz. Kodieren Sie dann zu WebP. Wenn Sie es lieber einfach halten möchten, machen Sie den Seitenhintergrund in derselben Farbe wie den Szenenhintergrund und überspringen Sie dies.

Diese Bilder dienen gleichzeitig als Videoplakat und Lazy-Load-Fallback, also behalten Sie sie.

---

Schritt 4 – Kameraarchitektur (wählen Sie eine – diese entscheidet über das Gefühl)

Wie sich die Kamera zwischen den Szenen bewegt, ist der größte Hebel für die Qualität. Zwei Formen; wählen Sie nach Ästhetik.

Videomodell – wählen Sie EINES für die gesamte Kette

Diese Fähigkeit liefert nur nahtlose Ausgabe, daher sind die einzigen verwendbaren Modelle diejenigen, die einen Übergang frame-sperren können: Jeder verkettete Clip muss --start-image akzeptieren, und Verbinder benötigen auch --end-image. Diese Fähigkeit – nicht die Präferenz – ist die Auswahlregel. Vollständige Beweiskette in references/muapi-model-roster.md; hier zusammengefasst:

Modell	Tier	Start-/Endbild	Hinweise
seedance-2-first-last-frame (Standard)	global	✓ / ✓	--mode first-last – ein Bild = ein Abschnitt/Tauchgang (kein Ende), zwei Bilder = ein Verbinder. Dasselbe Modell deckt beide Rollen ab.
seedance-2-first-last-frame-fast	global	✓ / ✓	Dasselbe Modell, Fast-Queue-Variante – die günstige Previs-Stufe. Führen Sie zuerst die gesamte Kette hier aus, um die Übergänge zu validieren, bevor Sie für den vollständigen Render ausgeben.
seedance-2-vip-first-last-frame	vip	✓ / ✓	NSFW/Content-Filter-Fallback – die VIP-Filterband unterscheidet sich und es ist dokumentiert, dass sie realistische menschliche Gesichter in Referenzen toleriert, anders als global/chinese. Verwenden Sie es für einen hartnäckigen Clip, nicht für die Standardkette.

Der chinese-Tier ist nicht in der Liste: first-last (Zwei-Bild-Bedingung) ist darauf nicht verfügbar, nur Einzelbild-i2v – daher kann es keinen Übergang halten. Überspringen Sie alles, dessen Medieneingaben nur Einzelbild sind, aus demselben Grund (es kann nur eine Generation bedingen, nicht eine Einstellung fortsetzen).

Regeln:

• Ein Modell+Tier für alle verketteten Clips. Jeder Renderer/Tier hat seinen eigenen Bewegungs-/Farb-/Korncharakter; das Mischen in der Mitte der Kette erhält die Positionskontinuität (Frames werden noch übergeben), aber der Wechsel des Render-Charakters liest sich als subtiler Sprung. Die einzig zugelassene Ausnahme ist der NSFW-Fallback für einen einzelnen hartnäckigen Clip (Gotchas) – ein leichter Charakterwechsel in einem 5s-Verbinder ist besser als ein fehlender Verbinder.
• Standardmäßig seedance-2-first-last-frame auf global; respektieren Sie eine vom Benutzer angegebene Präferenz nur, wenn das Modell qualifiziert ist (Frame-Sperrung). Wenn nicht, sagen Sie es und verwenden Sie ein unterstütztes Modell – liefern Sie niemals einen nicht-nahtlosen Build aus, um eine Modellanfrage zu erfüllen.
• Die Pipeline-Skripte nehmen das Modell/Tier als $VMODEL/$VTIER mit bereits nach Tier aufgeschlüsselten Flags (scripts/pipeline.md).

A) Kontinuierliche Vorwärtsaufnahme – EMPFOHLEN für bodenständige / realistische / Rundgänge

Eine Kamera, die nur vorwärts gleitet, von der ersten bis zur letzten Szene, als eine einzige Aufnahme. Generieren Sie die Abschnitte sequentiell: Abschnitt 0 vom Bild der Szene 0 aus (vorwärts hineingleiten); dann ist das --start-image jedes Abschnitts = der tatsächlich letzte Frame des VORHERIGEN Abschnitts (mit ffmpeg extrahieren, hochladen), Prompt "continue gliding smoothly FORWARD into [Szene i], never pulling back" (oder eine ausdrucksstarke Bewegung in der Mitte des Abschnitts unter dem Motion-Handoff-Vertrag – siehe Kamera-Grammatik unten), und kein --end-image – ein Endbild einer weiten Establishing-Aufnahme zwingt die Kamera zum Zurückziehen, was die häufigste Ursache für Ruckeln ist. Extrahieren Sie den letzten Frame jedes Abschnitts, um den nächsten zu speisen. Ergebnis: Jeder Übergang ist frame-identisch und die Kamera kehrt nie um. Es gibt keine Verbinder (überspringen Sie Schritt 5) – die Abschnitte SIND die Reise. Verdrahten Sie jeden Abschnitt als Abschnittsclip mit connectors: [] und einem kleinen crossfade (~0.08). Selbst ohne ein --end-image kommen die Abschnitte dennoch in verschiedenen Räumen an (der Prompt steuert den Inhalt). Kosten: streng sequentiell (nicht parallelisierbar) und langsamer; Innenräume lösen eher den Content-Filter aus, daher bauen Sie Wiederholungen ein (3 Versuche/Abschnitt).

B) Eintauchen + Luftverbinder – nur für Diorama / Miniatur / Vogelperspektive-Welten

Ein "Eintauchen in jede Szene"-Clip + ein Verbinder, der hoch und raus zieht und zur nächsten Szene fliegt (Schritt 5). Das Herausziehen kehrt die Kamerarichtung an jedem Übergang um (Vorwärtseintauchen → Rückwärtsherausziehen). In einer Miniatur-/Diorama-Welt liest sich das als absichtlicher "Zoom"...

[...truncated for translation...]