Farhad1618/grainy-gradients

Körnige Verläufe

Glatte, digitale Verläufe wirken „computerartig“. Eine feine Rauschschicht lässt sie wie gedruckt oder wie Film aussehen und verbirgt Farbbänder (sichtbare Streifen, wo ein Verlauf von einer 8-Bit-Farbstufe zur nächsten springt).

Sie erledigen die gesamte Arbeit. Die Person schaut nur zu und wählt aus. Fragen Sie niemals nach Mischmodi, Deckkraft oder Zahlen. Die Person trifft nur drei Arten von Entscheidungen:

1. Welche Hintergründe (nur, wenn Sie die gesamte Website gescannt haben).
2. Ob zuerst ein Vorher/Nachher angezeigt werden soll oder ob Sie es einfach anwenden.
3. Welche Option in der Vorschau am besten aussieht.

So denken Sie darüber

• Korn ist Textur, nicht Farbe. Es darf nicht aufhellen, abdunkeln oder einfärben. Das Rauschen ist um Mittelgrau zentriert, sodass die Helligkeitsverschiebung nahe 0 sein sollte. Es kann nicht für reines Schwarz oder Weiß verwendet werden – der Bericht weist darauf hin.

• Messen Sie, was sichtbar ist, nicht die Deckkraft. Sichtbares Korn ist die Streuung von L* (CIELAB-Helligkeit, 0–100), und L* ist wahrnehmungsbezogen, sodass dieselbe Zahl bei jeder Farbe ähnlich aussieht. Unter etwa 0,45 kann es niemand sehen. Die Zielwerte sind 0,5 / 0,8 / 1,4 für Dezent / Mittel / Stark.

• Gleichmäßigkeit ist wichtig bei Verläufen, die von hell nach dunkel gehen. Overlay platziert das meiste Korn auf den helleren Teilen. Even wählt den Mischmodus (normalerweise Soft-Light), der es gleichmäßiger verteilt. Menschen bevorzugen das meist.

• Das Korn gehört zum Hintergrund. Es sitzt direkt über dem Hintergrund, unter allem anderen, und folgt dem Hintergrund überall hin. Wenn der Hintergrund einblendet, blendet das Korn mit ein.

• Es passt sich an den Bildschirm jedes Besuchers an. Webseiten können OLED nicht von LCD unterscheiden, aber CSS kann HDR-Bildschirme (die meisten OLED-Handys, XDR-Laptops) und die Einstellung für hohen Kontrast erkennen. Das CSS enthält diese Media Queries:

  • dunkle Hintergründe erhalten auf HDR-Bildschirmen etwas weniger Korn
  • die Einstellung für hohen Kontrast erhält weniger Korn
  • beim Drucken wird es ausgeschaltet

  Alles ist CSS, ohne Skript auf der Live-Seite.

• Überspringen Sie, wobei Korn nicht hilft:

  • kleine Dinge (Buttons, Badges, Icons)
  • Verlaufstext
  • durchsichtige Überlagerungen und Einblendungen über Fotos
  • Streifen- und Schraffurmuster

1. Wie hat die Person gefragt?

• Eine Stelle („Der Hero wirkt flach“, „Füge Korn zum Footer hinzu“): Gehen Sie zu Einen Hintergrund finden.
• Die gesamte Website oder App („Geh durch meine Codebasis“, „Überprüf alle meine Verläufe“, „Mach die ganze Website“): Gehen Sie zu Die gesamte Website scannen.

2a. Einen Hintergrund finden

Finden Sie das Element, das den Hintergrund tatsächlich zeichnet. Überprüfen Sie:

• das Element selbst und seine ::before- und ::after-Pseudoelemente
• vollgroße Schichten darin oder dahinter (Abschnitte erhalten ihre Farbe oft von einem separaten, absolut positionierten div)

Listen Sie mit einem Browser-Tool die Kandidaten auf:

[...document.querySelectorAll('#section, #section *')].flatMap(e => [null, '::before', '::after'].map(p => [e, p, getComputedStyle(e, p)]))
  .filter(([, p, c]) => (!p || c.content !== 'none') && (c.backgroundImage !== 'none' || c.backgroundColor !== 'rgba(0, 0, 0, 0)'))
  .map(([e, p, c]) => `${e.tagName.toLowerCase()}${e.id ? '#' + e.id : ''}.${[...e.classList].join('.')}${p || ''} | ${c.position} | opacity ${c.opacity} | ${(c.backgroundImage !== 'none' ? c.backgroundImage : c.backgroundColor).slice(0, 80)}`)

Ohne Browser lesen Sie das CSS. Suchen Sie in beiden Fällen im CSS nach anderen Versionen dieses Hintergrunds: Media Queries (Phone-Layouts tauschen oft den Verlauf) und Dark-Mode-Regeln. Notieren Sie sie für Schritt 5.

Fahren Sie dann mit Schritt 3 fort.

2b. Die gesamte Website scannen

node <dieser Skill-Ordner>/scripts/scan.mjs <Projektordner>

Es liest Stylesheets (Regeln, Media Queries, Custom Properties), Markup und Komponenten (Tailwind-Verlaufsklassen, Inline-Stile, CSS-in-JS) in etwa einer Sekunde. Es sortiert die Funde in vier Gruppen:

• Gute Kandidaten: große Hintergründe.
• Einen Blick wert: Größe aus dem Code nicht bekannt.
• Hat bereits Korn.
• Überspringen, mit Grund.

Es listet auch auf, welche Seiten jedes Stylesheet laden. Fügen Sie --json für die vollständigen Daten hinzu.

Sortieren Sie die „einen Blick wert“-Einträge selbst. Bevor Sie die Liste zeigen, sortieren Sie sie nach dem, was Sie sehen können. Messen Sie mit einem Browser-Tool ihre Größe auf der Seite. Lesen Sie andernfalls das Markup. Verschieben Sie jeden Eintrag zu „Gut“ oder „Überspringen“. Senden Sie der Person keine Liste von Dingen, die Sie selbst hätten überprüfen können.

Zeigen Sie dann die Liste, kurz, eine Zeile pro Eintrag, in einfachen Worten, gruppiert nach Seite. Zum Beispiel:

Ich habe 6 Hintergründe gefunden, die Korn vertragen könnten:

1. Startseite, Tour-Abschnitt: dunkler Verlauf, der einblendet
2. Startseite, Hero: dunkler radialer Glow
3. Nachhaltigkeit, Header: grün-schwarzer Verlauf
4. Karriere, „Hier gemacht“-Band: orange-schwarzer Verlauf

12 werden übersprungen: Buttons, Verlaufstext, Foto-Überlagerungen und Streifenmuster. Die Zitat-Seite hat bereits Korn, aber in einer Menge, die niemand sehen kann, daher würde ich es überarbeiten.

Lassen Sie dann die Person wählen. Wenn Sie ein Multiple-Choice-Frage-Tool haben (AskUserQuestion in Claude Code), verwenden Sie es:

• Fragen Sie „Welche Hintergründe sollen Korn erhalten?“ mit Alle (Empfohlen) zuerst.
• Für bis zu 3 weitere Einträge listen Sie jeden als Option mit aktivierter Mehrfachauswahl auf.
• Bei mehr als 4 Einträgen fragen Sie zuerst „Alle, oder auswählen?“; bei „auswählen“ stellen Sie Multiple-Choice-Fragen mit bis zu 4 Einträgen pro Frage.

Ohne das Tool bitten Sie die Person, mit „alle“ oder den Nummern zu antworten.

3. Vorher/Nachher oder einfach anwenden?

Fragen Sie einmal für alles Ausgewählte: „Möchten Sie zuerst ein Vorher/Nachher sehen, oder soll ich einfach die beste Option für jeden anwenden?“ Verwenden Sie das Multiple-Choice-Tool, falls vorhanden, mit Zeig mir zuerst (Empfohlen) und Einfach anwenden.

Die folgenden Tools benötigen Node 22+ und einen Chrome-, Chromium-, Edge- oder Brave-Browser auf dem Rechner (werden automatisch gefunden; CHROME_PATH überschreibt). Sie öffnen die Seiten im Headless-Modus, daher muss die Website erreichbar sein: ein laufender Dev-Server, eine Staging-URL oder file:// für einfaches HTML. Es wird nichts zur Website hinzugefügt.

4. Vorher/Nachher anzeigen

Zeig mir zuerst: die Überprüfungsseite

Führen Sie es im Hintergrund aus (es wartet auf die Person) mit einer --url pro Seite und deren Selektoren dahinter:

node <Skill>/scripts/review.mjs --url http://localhost:3000/ --selector ".hero" --selector ".footer-band" \
                                --url http://localhost:3000/about --selector ".about-header"

• Es macht die Bilder selbst. Für jeden Hintergrund fotografiert es die Seite, wie sie ist, und mit jeder Option, sowie was HDR-Bildschirme und die Einstellung für hohen Kontrast erhalten. Dies dauert etwa 10–30 Sekunden pro Seite.
• Dann öffnet es eine lokale Überprüfungsseite im Browser der Person und gibt deren Adresse aus; geben Sie der Person auch den Link.
• Jeder Hintergrund erhält eine Karte mit:
  • einem Vorher/Nachher-Schieberegler
  • Zoom auf Banding, das den Bereich vergrößert, der am stärksten bandet (feines Korn ist in einem verkleinerten Bild unsichtbar)
  • den Optionen als Registerkarten, mit der empfohlenen mit Sternchen
  • einem Bildschirm-Umschalter
  • den gemessenen Zahlen und einem „Warum“ mit dem Bericht
• „Fertig, meine Auswahl senden“ sendet die Auswahl direkt zurück. Kein Kopieren und Einfügen.

Sagen Sie der Person in einem Satz, was zu tun ist: „Ziehen Sie über jedes Bild, probieren Sie Zoom aus, wählen Sie einen pro Hintergrund und drücken Sie dann Fertig.“ Wenn der Befehl beendet wird, enthält seine Ausgabe die Auswahl, das CSS für jeden Hintergrund und einen Basisordner pro Hintergrund für die Überprüfung in Schritt 7.

Zeigen Sie auch ein Bild im Chat. Jeder Basisordner enthält compare-<option>.png:

• vollständiges Vorher/Nachher
• ein vergrößertes Detail
• dasselbe Detail mit gestrecktem Kontrast, sodass Banding als Streifen und Korn als Rauschen sichtbar wird
• die gemessenen Zahlen

Senden Sie der Person die empfohlene Option (mit einem Datei-Sende-Tool, falls vorhanden; andernfalls geben Sie den Pfad). Es ist der Beweis, dass die Änderung real ist.

Einfach anwenden

Erstellen Sie zuerst das Basisbild und die Aufnahmen, damit das Ergebnis überprüft und gezeigt werden kann:

node <Skill>/scripts/shoot.mjs --url http://localhost:3000/ --selector ".hero" --option recommended --out ./grain-shots

Es gibt eine Zeile pro Bild aus (Korn, Helligkeit, Streifenbreite) und schreibt <out>/<selector>/ mit report.json (dem Bericht, dem CSS für jede Option, der empfohlenen) und compare-<option>.png. Verwenden Sie das empfohlene CSS aus report.json.

Kein Chrome oder die Site ist im Headless-Modus nicht erreichbar

Fallback auf die In-Page-Vorschau: Kopieren Sie dist/grain-page.js neben die eigenen Skripte der Site (prüfen Sie, dass es geladen wird, 200 nicht 404), fügen Sie <script src="/js/grain-page.js" data-grain=".hero | .footer" defer></script> hinzu, und lassen Sie die Person die Seite mit ?grain öffnen. Es zeigt dieselben Optionen mit einem ziehbaren Griff auf der echten Seite; Auswahl kopieren kopiert grain: <option> + das Aussehen für jeden Hintergrund, das Sie in node <Skill>/scripts/grain.js --look - für das CSS einlesen. Entfernen Sie danach das Tag und die Datei.

Ganz ohne Browser schreiben Sie das Aussehen selbst und führen grain.js darauf aus:

{ "selector": ".hero", "kind": "gradient", "shape": "linear",
  "colours": [{ "colour": "#323435", "pos": 0 }, { "colour": "#141617", "pos": 1 }],
  "lengthPx": 900, "background": "linear-gradient(...)", "behind": "#ffffff",
  "solidBase": true, "position": "relative", "freePseudo": "::after", "moves": null }

oder node grain.js --colours "#323435,#2a2c2d@24%,#141617" --length 900 --selector ".hero" [--shape radial] [--fade-over "#fff"] [--option even].

Was die Engine entscheidet, damit Sie es nicht müssen

Situation	Was sie tut
Verlauf oder Vollfarbe auf einem Element	Eine Schicht: Das Rauschen wird zur obersten Hintergrundschicht des Elements (background-blend-mode), in einer --grain-Custom-Property gespeichert. Ein Wert wird zu jeder Hintergrundliste hinzugefügt, sodass die eigenen Größen, Positionen und Mischungen der Seite erhalten bleiben. Es kann Text nicht überdecken.
Hintergrund blendet ein	Dieselbe eine Schicht, sodass das Korn mit einblendet. Der Bericht gibt das Korn in jeder Phase der Einblendung an.
Durchsichtiger Verlauf ohne festen Untergrund	Eine eigene Schicht (ein freies ::after/::before oder ein Kindelement), sodass es mit dem Durchscheinenden mischt, anstatt grau zu werden.
Foto- oder Bildhintergrund	Ein freies Pseudoelement oder ein Kindelement, falls beide belegt sind.
<img>/<video> füllt das Element, oder ein Hintergrund auf einem Pseudoelement	Ein Kindelement bei z-index: -1 in einem isolierten Host.
Reines Schwarz oder Weiß	Overlay und Soft-Light können dort kein Korn hinzufügen, daher verwendet es Screen oder Multiply mit einer kleinen Helligkeitsverschiebung und gibt dies an.
Ungleichmäßiges Korn über den Verlauf	Empfiehlt Even, wenn Even deutlich gleichmäßiger ist. Even wird ausgeblendet, wenn es mit Medium identisch wäre.
Hohes Banding-Risiko	Gibt an, ob das gewählte Korn die Streifen aufbricht. Strong tut mehr.
Alte Rauschschicht im selben Hintergrund	Ersetzt sie. Wenn sich das alte Rauschen woanders befindet (einem Pseudoelement), wird empfohlen, es zu entfernen.
Teil des Hintergrunds in einer WebGL/Canvas-Szene gezeichnet (ein 3D-Boden, ein Shader-Hintergrund)	CSS-Korn hinter der Canvas kann es nicht erreichen, daher sieht der Canvas-Teil neben dem körnigen Himmel glatt oder fleckig aus. Sie fügen es hinzu: im Fragment-Shader dieses Materials, nach der Farbraum-Konvertierung, Soft-Light dieselbe Rauschkachel im Bildschirmraum (gl_FragCoord.xy / tilePx, Kachel = 200 × Renderer-Pixelverhältnis). Lesen Sie die Kachel und Menge aus der --grain-Custom-Property der Seite, sodass Phone-, HDR- und Hoher-Kontrast-Mengen übernommen werden, und lesen Sie sie bei Größenänderung neu. Messen Sie, indem Sie einen Frame rendern und die Pixel lesen.
HDR-Bildschirme, hoher Kontrast, Druck	@media (dynamic-range: high) und @media (prefers-contrast: more) lösen die Menge für diese Bildschirme neu auf, mit derselben Mischung. @media print schaltet es aus. Eine Regel, die gleich ausfallen würde, wird weggelassen.

Farben werden danach gewichtet, wie viel des Verlaufs sie abdecken. Eine dünne Hervorhebung zählt nicht so viel wie der große dunkle Bereich, sodass Phone- und Desktop-Versionen desselben Abschnitts gleich behandelt werden.

5. Anwenden

• Setzen Sie jeden CSS-Block dort, wo dieser Hintergrund definiert ist, mit seinem Kommentar.
• Behalten Sie den eigenen Hintergrundausdruck des Projekts bei. Die Engine arbeitet mit berechneten Werten, daher setzen Sie var(--slate) oder den ursprünglichen linear-gradient(...) wieder ein, wo die Ausgabe einen langen aufgelösten Verlauf wiederholt.
• Führen Sie jede Version jedes Hintergrunds aus (Phone, Dark Mode). Das einschichtige CSS geht auf denselben Selektor innerhalb derselben Media Query. Messen Sie jede Version mit --phone oder --colours, falls sie sich unterscheidet.
• Child-Methode: Fügen Sie <div class="grain-layer" aria-hidden="true"></div> dort ein, wo der Kommentar es sagt (in einer Komponente, in ihrem Markup).
• Verwenden Sie eine Custom Property für eine wiederholte Rausch-URL. Wenn mehrere Regeln dieselbe verwenden, definieren Sie sie einmal.
• Wenn der Bericht „Einblendungen oben“ auflistet, geben Sie jeder dasselbe Korn wie dort beschrieben, da es sonst an der dunkelsten Stelle wieder bandet.
• Entfernen Sie alles Temporäre (ein Vorschau-Tag, grain-page.js).

6. Überprüfen, jedes Mal

Bevor Sie sagen, dass es fertig ist, überprüfen Sie jeden Hintergrund gegen sein Basisbild:

node <Skill>/scripts/check.mjs --url http://localhost:3000/ --selector ".hero" --baseline <Basisordner> [--option even]

Es fotografiert die Seite erneut und gibt für jeden dieser Punkte PASS/FAIL aus:

• Die Kornschicht ist in der Seite (das CSS wurde geladen und ist auf dem richtigen Selektor).
• Keine neuen Fehler auf der Seite.
• Das Korn liegt nahe am erwarteten Wert.
• Die Helligkeit hat sich nicht verschoben.
• Die Streifen sind schmaler geworden.
• Nichts außerhalb des Hintergrunds hat sich geändert.
• Kein Element hat sich bewegt oder seine Größe geändert.

Es schreibt check.png, vorher vs. jetzt. Bei jedem FAIL beheben Sie es und führen die Überprüfung erneut durch; melden Sie keinen Erfolg über einen Fehler hinweg. Wenn ein FAIL nicht behoben werden kann, teilen Sie der Person genau mit, welche Prüfung fehlgeschlagen ist und warum.

7. Bericht

Ein oder zwei Sätze pro Hintergrund, oder eine kurze Liste für eine ganze Website: was es ist, was gewählt wurde und warum. Fügen Sie das gemessene Ergebnis aus der Überprüfung hinzu (z. B. „Korn 0,83 L*, Streifen 80px → 0,7px, sonst nichts geändert“) und senden Sie check.png oder das compare-Bild. Sagen Sie einmal, dass sich das Korn an HDR-Bildschirme und die Einstellung für hohen Kontrast anpasst und im Druck ausschaltet. Wenn der Bericht sagt, dass ein Ziel für diese Art von Hintergrund nicht durch das Auge bestätigt ist, sagen Sie dies kurz.

Später anpassen

• „Zu viel“ oder „Ich sehe es nicht“: eine Stufe verschieben.

…

[Gekürzt für die Übersetzung]