motioncraft-builder

MotionCraft Builder

Dieses Skill bringt einem Agenten bei, Motion-Websites so zu bauen, wie kleine Studios preisgekrönte Arbeiten ausliefern: eine Idee, ein schriftlicher Plan, eine funktionierende Mechanik in Grau-Boxen, dann Gestaltung, dann ein kritischer Blick und ein Überarbeitungsdurchlauf. Die Handwerkskunst steckt in den Referenzen. Diese Datei ist der Workflow.

Standard-Stack: semantisches HTML, CSS, vanilla JavaScript-Module, three.js 0.170 über eine Import Map, kein Build-Schritt. Füge GSAP oder Lenis nur hinzu, wenn ein Rezept sie benötigt. Jede Seite muss funktionieren, lesbar sein und konvertieren, wenn WebGL deaktiviert ist.

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
  }
}
</script>

Der Workflow

Führe diese Schritte der Reihe nach aus. Überspringe keine Schritte, um gleich zu Effekten zu gelangen. Jeder Schritt hat ein Ergebnis, das du der Person zeigen kannst, bevor es weitergeht.

Schritt 1. Die eine Idee finden

Lies das Briefing und liste die reale Welt des Kunden auf: die Gegenstände, die sie in der Hand halten, die Papierkram, den sie drucken, die Geräusche des Ortes, die Verben, die ihre Mitarbeiter den ganzen Tag verwenden. Schreibe dann einen Satz:

[Marke] ist eine Website, auf der du [das Objekt aus ihrer Welt] [Verb], und sie dir [den Wert, den sie verkaufen] zeigt.

Beispiele mit fiktiven Marken:

• Cinderford Coffee Roasters: Du scrollst eine einzelne Bohne durch den Röstprozess, von grün über den ersten Crack bis zur vollen City-Röstung, und die Aromanoten drucken sich auf das Röstprotokoll, während sich die Farbe ändert.
• Lakemont Bike Fitters: Du ziehst an der Sattelhöhe eines Fahrers und der Kniebeugewinkel wird in der Live-Seitenansicht neu gezeichnet.
• Halvorsen Tide Charters: Du bewegst den Gezeitenregler und das Boot steigt und fällt gegen den echten Pier.

Regeln für die Idee (siehe Handwerksregeln 1 bis 3):

• Ein Objekt, ein Verb, eine Welt. Wenn du zweimal „und“ brauchst, sind es zwei Ideen. Wähle eine aus.
• Die Metapher stammt aus der Welt des Kunden, niemals aus einem Trend. Eine Werkstatt spricht in Reparaturaufträgen, ein Lebensmittelhändler in wöchentlichen Prospekten, ein Verkehrsbetrieb in Linienplänen.
• Gib der Akzentfarbe eine Aufgabe. Wenn Rot bedeutet „ein Fehler wurde gefunden“, bedeutet es sonst nichts auf der Seite.
• Der Ladebildschirm, der Cursor, die Navigation, die Hover-Zustände, die Übergänge und die 404-Seite sprechen alle die gleiche Sprache.

Ergebnis: der Satz, das Verb, die Akzentfarbe und ihre Bedeutung sowie drei abgelehnte Ideen mit jeweils einem Satz, warum sie verloren haben.

Schritt 2. Eine Seitenarchitektur wählen

Öffne page-architecture.md. Wähle einen Navigations-Archetyp, eine Hero-Komposition und eine Abschnitts-Reihenfolge, die aus derselben Welt wie die Idee stammen. Verwende niemals das Skelett des vorherigen Projekts wieder. Protokolliere die Wahl in der Projekt-README, damit der nächste Build sie vermeiden kann.

Ergebnis: eine kurze Architektur-Karte (Navigation, Hero, Abschnittsliste, Footer, 404) mit den von dir verwendeten benannten Mustern.

Schritt 3. Das Beat Sheet schreiben

Schreibe das Drehbuch, bevor irgendein Code geschrieben wird. Verwende die Vorlage in beat-sheet.md. Jeder Beat gibt seinen Scrollbereich an, was der Besucher sieht, was sich bewegt, den Text, die Kamera, das Phone-Framing, die Reduced-Motion-Version und die Kosten. Das ausgearbeitete Beispiel zeigt die erwartete Detailtiefe.

Ergebnis: das ausgefüllte Beat Sheet. Jede spätere Entscheidung wird daran gemessen. Wenn ein Abschnitt dem Satz aus Schritt 1 nicht dient, streiche ihn hier, wo es günstig ist.

Schritt 4. Die Mechanik in Grau-Boxen bauen

Baue die Bewegung mit Platzhaltergeometrie und Platzhaltertext. Dieser Schritt beweist Timing, Kameraführung und Interaktion, bevor irgendein Asset existiert.

1. Schreibe zuerst das DOM: echte Überschriften, echte Textblöcke, echte Buttons und Formulare, ein <section class="shot"> pro Beat. Die Seite muss von oben nach unten lesbar sein, wenn Skripte deaktiviert sind.
2. Füge eine feste Canvas hinter dem DOM und eine Render-Schleife hinzu. Scrollen, Zeiger, Audio und Rendering teilen sich diese eine Schleife (Regel 8).
3. Bilde Scrollen auf einen einzelnen Float t ab, der die Beats zählt, und bewege die Kamera durch eine Aufnahmeliste mit Smoothstep-Halteintervallen (Scroll- und Kamera-Rezepte).
4. Verwende Grau-Boxen, Kugeln und Ebenen für jedes Objekt. Wenn die Geschichte in Grau nicht funktioniert, wird Gestaltung sie nicht retten.
5. Füge die Pause-Steuerung und den Reduced-Motion-Zweig jetzt hinzu, nicht erst am Ende (Interaktionsrezepte).

Grau-Box-Startvorlage. Die Seite benötigt die obige Import Map, eine feste Canvas und einen .shot-Abschnitt pro Eintrag in SHOTS:

<style>
  #gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
  .shot { min-height: 100svh; display: grid; align-items: center; padding: 16px 6vw; }
  .no-gl #gl { display: none; }
</style>
<canvas id="gl" aria-hidden="true"></canvas>
<main>
  <section class="shot" id="top"><h1>Überschrift von Beat 0</h1></section>
  <section class="shot" id="detail"><h2>Beat 1</h2></section>
  <section class="shot" id="side"><h2>Beat 2</h2></section>
</main>
<script type="module" src="main.js"></script>

main.js:

import * as THREE from "three";

const canvas = document.getElementById("gl");
let renderer = null;
try { renderer = new THREE.WebGLRenderer({ canvas, antialias: true, powerPreference: "high-performance" }); }
catch { document.body.classList.add("no-gl"); } // die DOM-Seite steht für sich allein

if (renderer) {
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x111114);
  scene.add(new THREE.HemisphereLight(0xffffff, 0x222233, 1.4));
  const camera = new THREE.PerspectiveCamera(35, 1, 0.1, 100);
  // Grau-Stellvertreter für das Hero-Objekt, bis das Beat Sheet abgenommen ist
  scene.add(new THREE.Mesh(new THREE.BoxGeometry(2, 1, 1.2), new THREE.MeshStandardMaterial({ color: 0x8a8a8a, roughness: 0.6 })));

  const V = (x, y, z) => new THREE.Vector3(x, y, z);
  const SHOTS = [
    { pos: V(4, 3, 8), at: V(-1.5, 0, 0) },  // Hero: Objekt rechts der Überschrift
    { pos: V(0, 9, 0.1), at: V(0, 0, 0) },   // Draufsicht Detail
    { pos: V(-6, 1.2, 3), at: V(1.5, 0, 0) }, // Untere Seite, Text auf der rechten Seite
  ];
  const sections = [...document.querySelectorAll(".shot")];
  let centers = [];
  const measure = () => { centers = sections.map((s) => s.offsetTop + s.offsetHeight / 2); };
  const smooth = (a, b, x) => { const k = Math.min(1, Math.max(0, (x - a) / (b - a))); return k * k * (3 - 2 * k); };
  function scrollT() {
    const c = scrollY + innerHeight / 2;
    if (!centers.length || c <= centers[0]) return 0;
    for (let i = 0; i < centers.length - 1; i++) if (c < centers[i + 1]) return i + (c - centers[i]) / (centers[i + 1] - centers[i]);
    return centers.length - 1;
  }
  function resize() {
    renderer.setPixelRatio(Math.min(devicePixelRatio, innerWidth < 760 ? 1.5 : 1.75));
    renderer.setSize(innerWidth, innerHeight, false);
    camera.aspect = innerWidth / innerHeight;
    camera.updateProjectionMatrix();
    measure();
  }
  addEventListener("resize", resize);
  document.fonts?.ready.then(measure);
  resize();

  const pos = new THREE.Vector3(), at = new THREE.Vector3();
  let raf = 0;
  function frame() {
    raf = requestAnimationFrame(frame);
    const t = scrollT(), i0 = Math.floor(t), i1 = Math.min(SHOTS.length - 1, i0 + 1);
    const f = smooth(0.15, 0.85, t - i0); // Halte auf jeder Aufnahme, reise in der Mitte
    pos.lerpVectors(SHOTS[i0].pos, SHOTS[i1].pos, f);
    at.lerpVectors(SHOTS[i0].at, SHOTS[i1].at, f);
    camera.position.copy(pos);
    camera.lookAt(at);
    renderer.render(scene, camera);
  }
  raf = requestAnimationFrame(frame);
  document.addEventListener("visibilitychange", () => {
    cancelAnimationFrame(raf); // nie zwei Schleifen laufen lassen
    if (!document.hidden) raf = requestAnimationFrame(frame);
  });
}

Abbruchkriterien für Schritt 4: Vorwärts und rückwärts durch jeden Beat scrollen und die Kamera landet in beiden Richtungen gleich; jede Aufnahme lässt Platz für ihren Text; das Phone-Framing funktioniert bei 390 x 844; die Pause-Steuerung stoppt alle kontinuierlichen Bewegungen; die Seite ist lesbar, wenn WebGL deaktiviert ist.

Schritt 5. Gestalten

Ersetze nun das Grau durch die Welt. Ziehe Rezepte aus dem Technik-Index. Gestalte in dieser Reihenfolge und überprüfe nach jeder Ebene das Beat Sheet:

1. Form: das Hero-Objekt, gebaut aus Primitiven, einem glTF, einem Film oder einem Depth Photo.
2. Licht: Schlüssellicht, Randlicht und ein motiviertes Akzentlicht. Kontaktschatten unter allem, was auf einer Oberfläche steht.
3. Material und Textur: Canvas-gezeichnete Beschriftungen und Frontplatten vor Fototexturen. Sie sind scharf, winzig und bearbeitbar.
4. Typografie: maximal zwei Schriften. Überschriften-Bewegung, die an den Seitenrhythmus gebunden ist, niemals ein generisches Einblenden.
5. Sound: optional, opt-in, mit Web Audio synthetisiert, damit es keine Bytes kostet.
6. Kleine Belohnungen: eine verborgene Geste, ein Leerlaufzustand, eine 404-Seite in der Sprache der Marke.

Verwende Frame-Zeit für Interaktion, nicht für Physik, die niemand bemerkt. Fakes, was teuer ist (Regel 17).

Schritt 6. Prüfen und beheben

Du bist nicht fertig, bevor du nicht geprüft hast. Übergib die Seite an das motion-review-Skill (../motion-review/SKILL.md) für die Bewertungsmatrix, die QA-Checkliste und Screenshots der Abschnitte in Desktop- und Phone-Größe und an das motion-analytics-Skill (../motion-analytics/SKILL.md) für die Bewertung von Frame-Zeit, Gewicht und Referenzvergleich. Behebe dann den schlimmsten Fehler zuerst und prüfe erneut. Zwei vollständige Prüf- und Behebungsdurchgänge sind das Minimum für alles, was du als fertig bezeichnest.

Schnelle Selbstprüfungen vor einer formalen Überprüfung:

• Scrolle nach unten, dann ganz zurück nach oben. Jede Enthüllung muss sich sauber umkehren.
• Drücke die Pause-Steuerung mitten in der Bewegung. Alles Kontinuierliche muss stoppen, und die Seite muss immer noch komponiert aussehen.
• Aktiviere „Reduzierte Bewegung“ im Betriebssystem. Die Seite muss dieselbe Geschichte mit Standbildern erzählen.
• Öffne die Konsole. Null Fehler, null von dir verursachte Warnungen.
• Phone-Breite 390 px: kein Text unter 11 px, kein Berührungsziel unter 44 px, kein horizontaler Scrollbalken.

Schritt 7. Ausliefern

Liefere den Seitenordner (index.html, style.css, main.js plus Module, assets/), eine README mit der Ein-Satz-Idee, der Architektur-Karte, dem Beat Sheet, der Asset-Liste mit Lizenzen und den Tuning-Werten, die es wert sind, geändert zu werden. Halte die gesamte Seite unter 10 MB.

Unverhandelbar

• Echtes HTML darunter. Inhalte, Navigation und Formulare leben im DOM. WebGL ist eine Verbesserung mit einem no-gl-Fallback.
• Eine Uhr. Setze niemals Frame-Werte in den Framework-Status. Verwende einfache Variablen, Uniforms und CSS Custom Properties.
• Eine sichtbare Pause-Steuerung für jede Bewegung, die länger als 5 Sekunden läuft, plus einen vollständigen prefers-reduced-motion-Zweig.
• Scrollen wird niemals gekapert. Die native Scrollleiste funktioniert, Tastatur-Scrolling funktioniert und Anker-Links springen.
• Fiktive Marken und erfundene Personen in Demos. Kopiere niemals Code, Text, Assets oder ein Hero-Konzept von einer Referenzseite. Studiere die Idee, schreibe deine eigene.
• Jede Zahl auf der Seite (Preise, Stunden, Statistiken) ist plausibel, konsistent und in der Locale des Kunden.

Referenzkarte

Datei	Wann verwenden
references/craft-rules.md	Bei allen Geschmacksentscheidungen. 30 nummerierte Regeln mit konkreten Werten.
references/beat-sheet.md	Zum Planen der Geschichte. Vorlage plus ein ausgearbeitetes Beispiel.
references/page-architecture.md	Zur Auswahl von Navigation, Hero und Abschnitten ohne Vorlagen-Gleichheit.
references/techniques/INDEX.md	Zum Nachschlagen eines Rezepts nach Bedarf, Kosten oder Wow-Effekt.
techniques/scroll-and-camera.md	Scroll-Mapping, Kamerafahrten, Phone-Framing, Modus-Werte.
techniques/scene-craft.md	three.js-Gestaltung: Einblendungen, Morphen, Städte, Himmel, Beschriftungen, Schatten.
techniques/film-and-photo.md	Video-Heroes, Loops, filmgetaktete Texte, verfolgte Hotspots, Depth Photos.
techniques/sound-and-rhythm.md	Web Audio-Stimmen, Timing, beat-synchronisierte Visuals.
techniques/interaction-and-access.md	Pause-Steuerung, Anker, Halte-Gates, Drag-Ansichten, Qualitätsstufen.

---

Teil von RegesCore AI MotionCraft Skills von LIKE A KING INC. Kostenlose Motion-Vorlagen und der vollständige Katalog unter animatedwebs.com.