Wäscheleinen-Held

Was macht Wäscheleinen-Held?

Der erste Bildschirm einer Website: die Markenleiste und Navigation oben, eine große Überschrift mit einem farbigen Ausdruck, eine Einleitungszeile, ein oder zwei Buttons und eine kleine Notiz, daneben eine über den Himmel gespannte Wäscheleine. An der Leine hängt ein mit Holzklammern befestigtes Baumwolltuch, bedruckt mit dem eigenen Poster der Marke: ein Name, eine kleine Zeile, zwei große Wörter, eine Spezifikationsspalte und ein kleines Balkendiagramm. Ein Lüftchen hebt es hin und wieder an, und die Wolken ziehen dahinter.

Es ist zum Anfassen gedacht. Bewegen Sie den Zeiger über das Tuch, und eine Fingerspitze macht eine Delle hinein. Drücken und ziehen Sie, und das Tuch folgt Ihrer Hand: Ziehen Sie eine Ecke hoch, falten Sie es über die Leine, strecken Sie es zu Ihnen hin. Lassen Sie los, und es fällt, schwingt und beruhigt sich. Auf Telefonen macht ein Finger dasselbe, und die Seite scrollt nicht, während das Tuch gehalten wird. Das Tuch wird simuliert (ein Gitter aus Teilchen, die durch Dehnungs-, Scher- und Biegezwänge zusammengehalten werden, mit einem festen 120-Hz-Schritt), sodass es sich wie Stoff verhält, egal wo es gegriffen wird, anstatt eine vorgefertigte Animation abzuspielen.

Sie beschreiben den Helden und den Aufdruck in hero.json. Der Build prüft alles und schreibt out/index.html, eine ganze Seite in einer Datei, und out/embed.html, denselben Abschnitt zum Einfügen in eine bereits vorhandene Website. Da die Simulation mit einem festen Schritt von einer stabilen Startposition läuft, kann record.mjs sie Bild für Bild schrittweise ausführen: Im Video zieht ein gezeichneter Zeiger eine Ecke, lässt los und fährt dann mit einer Fingerspitze über das Tuch, sodass der Clip zeigt, was Besucher tun können – auf jedem Gerät gleich.

Was es nicht ist: Das Tuch reißt nicht, verheddert sich nicht mit sich selbst und weht nicht von der Leine (es hat keine Selbstkollision – wenn Sie es hart durch sich selbst falten, geht es hindurch und fällt zurück), und der Aufdruck wird von der Seite aus Ihren Wörtern gezeichnet, nicht aus einem von Ihnen hochgeladenen Foto.

Was Sie brauchen

• Node.js 18 oder neuer. Nichts zu installieren.
• Chrome, Chromium oder Edge für die Prüfungen und die Aufzeichnung (die Skripte finden ihn; setzen Sie CHROME_PATH, falls nicht).
• ffmpeg für das Video (brew install ffmpeg, winget install ffmpeg, apt install ffmpeg; oder setzen Sie FFMPEG_PATH).
• Internetzugriff, wenn die Seite geöffnet wird: three.js und die Schriftarten werden von jsDelivr in festgepinnten Versionen mit Integritäts-Hashes geladen. Ohne Internet sehen Besucher das Standbild (dieselbe Leine und dasselbe Tuch, flach gezeichnet) und Systemschriftarten; die Seite funktioniert trotzdem.

Dieser Skill-Ordner ist <skill> unten: der Ordner, in dem diese SKILL.md liegt.

Schritte

1. Marke und Wörter sammeln

Fragen Sie die Person oder finden Sie auf ihrer aktuellen Website:

• Name und das Logo als SVG-Datei (quadratisch oder annähernd quadratisch; schlicht, keine Skripte). Ohne eines sind bis zu drei Buchstaben ein Monogramm.
• Farben: den Hintergrund, der auch der Himmel am Horizont ist (die Textfarbe muss 7:1 darauf erreichen), und einen Akzent. Ein helles Blau ergibt einen Mittagshimmel mit dunklem Text; ein tiefes Marineblau oder Pflaume ergibt einen Abendhimmel mit hellem Text und einer tiefen warmen Sonne.
• Schriftarten: eine Auszeichnungsschrift für die Überschrift und die großen Wörter auf dem Tuch, und eine für den Rest. Diese werden festgepinnt und verifiziert geladen: Space Grotesk, Inter, Instrument Sans, Instrument Serif, DM Sans, Manrope, Fraunces, Sora, Outfit, Bricolage Grotesque, IBM Plex Sans, JetBrains Mono, Plus Jakarta Sans, Newsreader, Playfair Display. Jede andere Google Fonts-Familie funktioniert auch, ungepinnt.
• Die Wörter auf der Seite: eine Überschrift mit ein paar Wörtern und dem einzufärbenden Ausdruck, ein oder zwei Sätze darüber, was es ist und für wen, der Hauptbutton und optional ein zweiter mit Zielen, bis zu fünf Navigationslinks und der Button in der Leiste. Ein kleines Badge über der Überschrift und eine Notiz unter den Buttons sind optional.
• Die Wörter auf dem Tuch: der oben aufzudruckende Name (oft das Produkt und die Version), eine kleine Zeile darunter, zwei bis vier große Wörter (zwei Zeilen lesen sich am besten), bis zu sechs kurze Spezifikationspaare (Bezeichnung und Wert), eine Beschriftung für das Diagramm und eine Webadresse für die Ecke.

Jeder Name, jede Zahl, jede Behauptung und jedes Datum muss von der Person stammen. Erfinden Sie keine Spezifikationen oder Zahlen; lassen Sie stattdessen eine Spezifikation weg. Die Balken des Diagramms sind aus dem Seed generierte Dekoration, keine Daten: Geben Sie ihm eine Beschriftung, die keine Zahlen behauptet, oder schalten Sie es aus.

2. hero.json schreiben

Kopieren Sie den näheren Beispielordner und ersetzen Sie alles: examples/paperwind/ (eine Notizen-App, heller Mittagshimmel, vier Klammern) oder examples/halden/ (eine Leinenmarke, Abendhimmel, drei Klammern, ein quadratischeres Tuch).

Feld	Was es ist	Limit
brand.name, brand.href	Der Name oben links und wohin er verlinkt (Standard /)	28
brand.logo	Eine .svg-Datei neben hero.json, inline in die Seite eingefügt; oder bis zu 3 Buchstaben für ein Monogramm	–
nav[]	Bis zu 5 { "label", "href" } in einer Kapsel (auf Telefonen versteckt)	18
action	Der Button oben rechts, { "label", "href" }; false für keinen	22
hero.badge	Eine kleine Zeile in Kapitälchen über der Überschrift	40
hero.title	Die Überschrift. *phrase* setzt es in der Akzentfarbe; \n bricht die Zeile (bis zu 3 Zeilen)	72
hero.lede	Was es ist und für wen. Inline-Markdown: code, links, fett, kursiv	220
hero.actions[]	1 oder 2 { "label", "href" }: der erste ist der solide Hauptbutton mit einem Pfeil, der zweite ein umrissener	26
hero.note	Eine kleine Zeile unter den Buttons	90
hero.align	left (Leine und Tuch rechts, Standard) oder right (gespiegelt). center platziert das Tuch hinter dem Text; nicht empfohlen	–
theme.background, theme.ink, theme.accent	Hex-Farben. ink muss 7:1 auf background erreichen	–
theme.mode	light oder dark; wird aus dem Hintergrund ermittelt, wenn nicht angegeben	–
theme.fonts	{ "display", "body", "weight" }: Familiennamen (false für Systemschrift) und das Überschriftgewicht, 300–800 (Standard 500)	–
theme.scrim	0–1: wie stark der Himmel hinter dem Text zur Hintergrundfarbe hin verwaschen wird. Standard 0.3	–
effect	Der Himmel, die Leine und das Tuch, unten	–
motion.speed	0.25–2, Standard 1: wie schnell sich alles bewegt	–
motion.pointer	true (Standard)	–
meta	title (70) und description (170) für Suche und Linkvorschauen; url und image (vollständige https-Adressen), lang (Standard en)	–

Der Aufdruck (effect): mindestens printTitle oder printHeadline.

Einstellung	Limit	Standard	Was es ist
printTitle	28 Zeichen	keins	Der Name oben auf dem Aufdruck
printLine	64 Zeichen	keins	Eine kleine Zeile unter dem Namen
printHeadline	48 Zeichen	keins	Die großen Wörter; \n bricht die Zeile. Sie schrumpfen, um in ihre Spalte zu passen
printSpecs	0 bis 6 { "label", "value" }, 12 und 14 Zeichen	keins	Die Spezifikationsspalte rechts; Bezeichnungen werden in Großbuchstaben gedruckt
printChart	true / false	true	Ein kleines Balkendiagramm unter den Spezifikationen, sein höchster Balken in theme.accent
printChartLabel	32 Zeichen	keins	Beschriftung unter dem Diagramm
printFoot	40 Zeichen	keins	Kleiner Text in der unteren Ecke, z. B. eine Webadresse
cloth	Farbe	#ecebe6	Das Baumwolltuch
printInk	Farbe	#15181d	Der Aufdruck. Muss 7:1 auf cloth erreichen

Die Szene (effect), alle Einstellungen optional:

Einstellung	Bereich	Standard	Was es tut
seed	1–9999	7	Zufallswert für Wolken und Balken des Diagramms
skyTop	Farbe	#5f9be0 bei hell, der abgedunkelte Hintergrund bei dunkel	Der Himmel oben im Hero
skyBottom	Farbe	theme.background	Der Himmel am Horizont
clouds	0–1	0.6	Wie viel des Himmels mit Wolken bedeckt ist; 0 ist klar
cloudColor	Farbe	Weiß (hell), ein weiches Violettgrau (dunkel)	Die Wolken
drift	0–1	0.35	Wie schnell die Wolken ziehen
light	day, dusk	day bei hell, dusk bei dunkel	Mittagssonne von oben oder eine tiefe warme Sonne mit einem kühlen Himmelslicht
aspect	0.8–1.7	1.35	Breite des Tuchs im Verhältnis zu seiner Höhe
pegs	2–6	4	Holzklammern entlang der Oberkante
peg	Farbe	#c39a64	Die Klammern
rope	Farbe	#6f6a62 hell, #cfc6b8 dunkel	Die Leine
breeze	0–1	0.45	Wie stark der Wind das Tuch hebt
weave	0–1	0.5	Wie stark die Leinwandbindung aus der Nähe sichtbar ist
poke	0–1	1	Wie tief die Delle unter dem Zeiger ist; 0 schaltet sie aus
drag	true / false	true	Besucher können das Tuch greifen und ziehen
size	0.6–1	0.76	Wie viel des Platzes neben dem Text das Tuch ausfüllt (es lässt Platz zum Ziehen)
hint	40 Zeichen	"Drücken · Ziehen · Loslassen"	Eine kleine Beschriftung in der unteren entfernten Ecke auf breiten Bildschirmen, die Besuchern sagt, dass sie es anfassen können; " · " trennt seine Teile; leer für keinen

Schreibtipps: Die Überschrift auf der Seite und die großen Wörter auf dem Tuch sollten Unterschiedliches sagen; das Tuch liest sich wie ein Poster, also halten Sie seine Wörter kurz und groß. Zwei oder drei Spezifikationspaare lesen sich besser als sechs. Wenn die Marke eine verspielte Zeile über Leichtigkeit, Fliegen, Trocknen oder Hängen hat, ist das Tuch der richtige Ort dafür.

3. Bauen

node <skill>/scripts/build.mjs hero.json out

Es listet jedes Problem in hero.json auf einmal auf (fehlende Felder, Text über dem Limit, eine Einstellung außerhalb des Bereichs, Farben mit zu geringem Kontrast, Aufdruckfarbe zu blass auf dem Tuch) und schreibt nichts, bis sie behoben sind. Dann gibt es die verwendeten Einstellungen und alles Bemerkenswerte aus, z. B. einen abgedunkelten Akzent, damit die Überschrift bei 4,5:1 lesbar ist.

Es schreibt out/index.html (CSS, Script, Logo und das Standbild inline), out/embed.html und out/assets/logo.svg (das Tab-Symbol).

4. Prüfen

node <skill>/scripts/check.mjs out/index.html

Es lädt die Seite bei 390, 768, 1024 und 1440 px und muss bei jedem ok sagen: nichts breiter als der Bildschirm oder abgeschnitten, lesbarer Kontrast für jede Textzeile gegen den Himmel dahinter, Namen auf jedem Link und Button, eine h1. Zeilen mit · sind einen Blick wert, führen aber nicht zu einem Fehlschlag.

5. Ansehen und anfassen

node <skill>/scripts/record.mjs out/index.html --still 1.6 --size 1440x900
node <skill>/scripts/record.mjs out/index.html --still 3.5 --size 1440x900
node <skill>/scripts/record.mjs out/index.html --still 1.6 --size 390x844 --scale 2
node <skill>/scripts/screenshot.mjs out/index.html

Das erste ist das Tuch in Ruhe, das zweite während des Ziehens (die scriptgesteuerte Hand hat eine Ecke oben), das dritte das Telefon. Sehen Sie sie an: Ist das gesamte Tuch auf dem Bildschirm mit Platz drumherum, ist der Aufdruck lesbar, sitzen die Klammern auf der Leine? screenshot.mjs führt Chrome ohne GPU aus, zeigt also das Standbild, das Besucher ohne WebGL oder bei Netzwerkausfall sehen (in out/screens/); prüfen Sie auch, ob dieses lesbar ist.

Öffnen Sie dann out/index.html in einem Browser und spielen Sie damit: schweben, drücken, eine Ecke über die Leine ziehen, loslassen. Auf einem Telefon ziehen Sie es mit einem Finger und prüfen Sie, ob die Seite noch scrollt, wenn Sie neben dem Tuch wischen.

6. Video aufzeichnen

node <skill>/scripts/record.mjs out/index.html --seconds 10

Es schrittweise den Helden durch 10 Sekunden bei 30 fps und 1920×1080 durch und schreibt out/preview.mp4 und out/poster.png (das Bild bei 3,5 s, während des Ziehens). Im Video greift ein gezeichneter Zeiger die untere Ecke bei 2,2 s, zieht sie zu Ihnen hoch, lässt bei 4,4 s los und fährt ab 6 s mit einer Fingerspitze über das Tuch. Optionen: --size 1080x1350 (Hochformat), --size 1080x1920, --fps 60, --poster 1.6. Die Bilder sind auf jedem Gerät gleich, solange die Aufnahme bei 0 beginnt (was sie immer tut).

7. Live schalten

• Als Seite: Laden Sie out/index.html und out/assets/ auf einen beliebigen statischen Host hoch (Cloudflare Pages, Netlify, Vercel, GitHub Pages, S3). Verwenden Sie out/poster.png (oder einen 1200×630-Ausschnitt davon) als meta.image, zusammen mit der Website hochgeladen.
• In eine bestehende Website einfügen: Fügen Sie out/embed.html dort ein, wo der Hero erscheinen soll. Alles ist unter #mh-washing-line gekapselt; verschieben Sie die Schriftart-<link>s in den <head>, wenn Sie möchten. Wenn die Site bereits ein <script type="importmap"> hat, führen Sie die imports- und integrity-Einträge des Embeds darin zusammen. Der Abschnitt ist die volle Viewport-Höhe; setzen Sie --mh-height darauf (z. B. style="--mh-height:760px") für weniger. In React oder anderen Frameworks platzieren Sie das Markup in der Komponente und die <script>-Tags in der Seite oder rendern Sie es in einem iframe.
• Um den Aufdruck zu ändern, bearbeiten Sie hero.json und bauen Sie neu.

Fehlerbehebung

• build: fix hero.json first: Jede Zeile benennt das Feld und was zu ändern ist; Farbprobleme schlagen eine funktionierende Farbe vor.
• Das Tuch ist am Rand abgeschnitten: Verringern Sie size, oder machen Sie das Tuch quadratischer (aspect näher an 1).
• Die großen Wörter auf dem Tuch sind klein: Sie schrumpfen, um neben die Spezifikationsspalte zu passen. Verwenden Sie weniger Wörter, ein \n oder weniger Spezifikationen und kein Diagramm (dann nehmen die Wörter die volle Breite ein).
• Das Tuch beruhigt sich nicht oder flattert zu sehr: Verringern Sie breeze.
• Die Delle ist zu stark oder zu schwach: poke (0 schaltet sie aus; Ziehen funktioniert trotzdem).
• record: the effect didn't start: Die Seite ist auf ihr Standbild zurückgefallen: Chrome konnte three.js nicht von jsDelivr laden (überprüfen Sie die Verbindung oder einen Proxy) oder hat kein WebGL.
• ffmpeg not found: Installieren Sie es oder setzen Sie FFMPEG_PATH.
• Besucher sehen ein stilles Tuch: Ihr Browser hat WebGL deaktiviert oder das CDN ist blockiert (das flache Bild), oder sie haben reduzierte Bewegung angefordert (ein Einzelbild des live Tuchs in Ruhe, das sich nicht bewegt). Das ist beabsichtigt.
• Auf einem Telefon scrollt die Seite nicht: Sie stoppt das Scrollen nur, während ein Finger das Tuch hält; wischen Sie daneben. Wenn das Tuch den Telefonbildschirm ausfüllt, verringern Sie size.

Dateien

• scripts/build.mjs, scripts/record.mjs: was Sie ausführen. Sie rufen das Motion Heroes Kit auf.
• scripts/kit/: das Kit, das von allen Motion Heroes Skills gemeinsam genutzt wird: der Build und die Prüfungen (build.mjs), das CSS des Abschnitts (shell.css), die Browser-Laufzeit (runtime.js: Takt, Pausieren, Pixeldichte, reduzierte Bewegung, Fallback), der Recorder (record.mjs, cdp.mjs), die festgepinnte three.js und Schriftarten (three.json, fonts.json) und KIT.md, das sie erklärt.
• scripts/effect/: die Wäscheleine selbst: effect.mjs (seine Einstellungen, Prüfungen und das Standbild), effect.js (der Himmel-Shader, das Tuch, die Klammern, die Leine) und effect.css (das Layout des Abschnitts). examples/ hält Beispiel-Ordner.

Nachwort

Das Tuch ist aus einer Idee für ein Werbebanner entstanden, das man zerzausen durfte, und ist ein Andenken an die Hinterhöfe in Lissabon, Hongkong und Mumbai, in denen Wäsche von Fenster zu Fenster gespannt ist. Die Szene bietet ein bisschen von diesem Staunen: eine Marke, die sich anfühlen lässt. Sie können das Gleiche mit einem anderen Effekt tun, indem Sie einen anderen Motion Heroes Skill verwenden (ein See, ein Blatt, mehrere Karten) – das Kit ist dasselbe.