{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "blend-difference-cursor",
 "name": "Invertierender Cursor (mix-blend-mode: difference)",
 "name_en": "Blend mode difference cursor",
 "kurz": "Ein weißer Kreis mit mix-blend-mode: difference folgt dem Zeiger, invertiert die Regie-Namen und wächst über ihnen; über dem Werkbild schaltet er sich ab und wird zum Ring.",
 "kategorie": "Cursor",
 "kategorie_slug": "cursor",
 "kategorie_nr": 8,
 "bau_chat": "C4",
 "prioritaet": "C",
 "trendstatus": "abklingend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "präzise",
  "laut",
  "experimentell"
 ],
 "stimmung_roh": [
  "grafisch",
  "monochrom",
  "laut"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "gsap"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein weißer Kreis folgt dem Zeiger. Er sitzt in einem festen Wrapper mit mix-blend-mode: difference. Über dunkler Schrift auf Hell und heller Schrift auf Dunkel kehrt er die Farben um: Im Kreis wird die Schrift zum Negativ. Über großen Headlines wächst er, über Links schrumpft er. Varianten machen ihn zum weichen Lichtfleck oder zu mehreren farbigen, versetzt folgenden Kreisen.",
  "warum_es_wirkt": "Grafisch starker Effekt in monochromen, typolastigen Layouts. Der Kreis wirkt wie eine Lupe oder ein Fotonegativ und macht große Schrift zum Spielfeld.",
  "wann_einsetzen": "Monochrome Seiten mit großen Headlines, Namenslisten, Roster oder Indexseiten. Am besten auf einen Bereich begrenzt.",
  "wann_nicht": "Über farbigen Bildern und Werkfotos: Die Farben werden unvorhersehbar, das Werk wird getönt. Über Formularen und Fließtext. Als seitenweiter Standard wirkt er 2026 abgegriffen.",
  "varianten": [
   "Kleiner Invert-Punkt, der über Headlines wächst und über Links schrumpft",
   "Großer, weichgezeichneter Lichtfleck über der Headline (30 → 400 px, Unschärfe bis 30 px)",
   "Mehrere farbige Kreise, die mit Verzögerung folgen",
   "Über Bildern ausgeschaltet und durch einen Ring ohne Blend-Modus ersetzt"
  ],
  "umsetzung": ".cursor { position: fixed; inset: 0; pointer-events: none; mix-blend-mode: difference } .cursor i { position: absolute; width: 400px; height: 400px; margin: -200px; border-radius: 50%; background: #fff }. Position und Größe per JS in einem rAF-Takt: transform: translate(x, y) scale(d / 400), Position per Lerp, Größe als Tween. Den Blend-Modus auf den Wrapper legen, nicht auf den Kreis.\n\nFallstricke: Der Blend-Modus mischt nur mit dem, was im selben Stacking Context darunter liegt. Liegt der Cursor in einem Element mit isolation, transform oder opacity, bricht der Effekt; deshalb als direktes Kind von body. In Safari kann will-change: transform auf dem Cursor den Blend-Modus abschalten. Den Systemzeiger nur mit (hover: hover) and (pointer: fine) ausblenden.",
  "mobil": "Entfällt. Auf Touch gibt es keinen Zeiger.",
  "reduzierte_bewegung": "Abschalten und den Systemzeiger zeigen.",
  "barrierefreiheit": "Die Invertierung macht Kontraste unvorhersehbar, deshalb nie über Formularen oder Fließtext. Der Cursor ist dekorativ (aria-hidden), Fokus-Rahmen bleiben sichtbar, alle Links funktionieren ohne ihn."
 },
 "messwerte": {
  "easing": "Standard (ease)",
  "dauer_ms": "300",
  "stagger_ms": "",
  "distanz": "Hover-Skalierung 0.55",
  "sonstiges": "Wrapper statt Cursor selbst trägt den Blend-Mode",
  "herkunft": "beobachtet",
  "quelle": "https://www.itsoffbrand.com/"
 },
 "kurve": {
  "bezier": [
   0.25,
   0.1,
   0.25,
   1
  ],
  "css": "cubic-bezier(0.25, 0.1, 0.25, 1)",
  "name": "ease",
  "dauer_ms": 300
 },
 "gesehen_bei": [
  {
   "seite": "Olivier Larose – Blend Mode Cursor",
   "url": "https://blog.olivierlarose.com/tutorials/blend-mode-cursor",
   "auszeichnung": "",
   "beobachtung": "mix-blend-mode: difference auf dem Kreis; 30 px → 400 px und blur 0 → 30 px über der Headline, 0,3 s ease-out; nennt trionn.com als Inspiration.",
   "art": "artikel"
  },
  {
   "seite": "TRIONN",
   "url": "https://trionn.com/",
   "auszeichnung": "zeigt Awwwards/FWA/CSSDA-Logos (nicht verifiziert)",
   "beobachtung": "Als Inspirationsquelle des Tutorials genannt; Effekt auf der aktuellen Seite nicht verifiziert.",
   "art": "website-ungeprueft",
   "browser_gemessen": true
  },
  {
   "seite": "OFF+BRAND",
   "url": "https://www.itsoffbrand.com/",
   "auszeichnung": "",
   "beobachtung": "[data-cursor-wrap]{position:fixed; mix-blend-mode:difference} mit [data-cursor] Kreis #fff9, transition scale .3s, .hover → scale(.55).",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Blend Mode Cursor (Olivier Larose)",
   "url": "https://blog.olivierlarose.com/tutorials/blend-mode-cursor"
  }
 ],
 "kombinierbar_mit": [
  "cursor-follower-lerp",
  "cursor-masken-reveal"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/cursor/blend-difference-cursor/",
  "meta": "https://cecodesign.de/lab/fundus/cursor/blend-difference-cursor/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/cursor/blend-difference-cursor/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json",
   "patch-belege-1.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: 1 Produktionsbeleg; Variante schrumpft über Links statt zu wachsen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein weißer Kreis mit mix-blend-mode: difference folgt dem Zeiger, invertiert die Regie-Namen und wächst über ihnen; über dem Werkbild schaltet er sich ab und wird zum Ring.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "blend": "mix-blend-mode: difference auf dem festen Wrapper (inset 0), Kreise #fff (Variante Drei Farben: #ff6a3d, #3ad1c4, #f2d03b)",
   "groesse": "Kreis 400 px, nur per scale(): Punkt 22 → 120 px über Namen; Lichtfleck 30 → 400 px; Drei Farben 26 → 220 px; über Links × 0,55 (OFF+BRAND); über dem Bild 0",
   "blur": "Lichtfleck: 0 → 30 px wirksame Unschärfe, wächst mit der Größe (filter-Wert = 30 × Anteil / scale)",
   "groessenwechsel": "350 ms cubic-bezier(0.455, 0.03, 0.515, 0.955) (easeInOutQuad, Rezept) statt der gemessenen 300 ms ease",
   "folgen": "Lerp je Bild bei 60 fps, auf echte Bildrate umgerechnet: 0,2; Drei Farben 0,24 / 0,14 / 0,08",
   "ein_aus": "opacity 350 ms gleiche Kurve beim Betreten und Verlassen des Fensters",
   "ring": "76 px, 1 px Rand rgba(242, 242, 242, .85), Label „Reel“, ohne Blend-Modus",
   "bildwechsel": "Standbild per opacity 600 ms easeInOutQuad, Zähler und Unterzeile in Fragment Mono 12 px"
  },
  "ausloeser": "hover",
  "touch": "Kein Cursor (entfällt); Systemzeiger bleibt. Das Standbild steht oben, Tippen auf einen Namen wechselt Bild, Unterzeile und Zähler. Pult ausgeblendet.",
  "reduziert": "Cursor und Pult aus, Systemzeiger sichtbar. Bildwechsel ohne Überblendung; die Vorführung schaltet nur die Standbilder alle 2,2 s weiter.",
  "korrekturen": {
   "beschreibung": "Ein weißer Kreis folgt dem Zeiger. Er sitzt in einem festen Wrapper mit mix-blend-mode: difference. Über dunkler Schrift auf Hell und heller Schrift auf Dunkel kehrt er die Farben um: Im Kreis wird die Schrift zum Negativ. Über großen Headlines wächst er, über Links schrumpft er. Varianten machen ihn zum weichen Lichtfleck oder zu mehreren farbigen, versetzt folgenden Kreisen.",
   "warum_es_wirkt": "Grafisch starker Effekt in monochromen, typolastigen Layouts. Der Kreis wirkt wie eine Lupe oder ein Fotonegativ und macht große Schrift zum Spielfeld.",
   "wann_einsetzen": "Monochrome Seiten mit großen Headlines, Namenslisten, Roster oder Indexseiten. Am besten auf einen Bereich begrenzt.",
   "wann_nicht": "Über farbigen Bildern und Werkfotos: Die Farben werden unvorhersehbar, das Werk wird getönt. Über Formularen und Fließtext. Als seitenweiter Standard wirkt er 2026 abgegriffen.",
   "varianten": [
    "Kleiner Invert-Punkt, der über Headlines wächst und über Links schrumpft",
    "Großer, weichgezeichneter Lichtfleck über der Headline (30 → 400 px, Unschärfe bis 30 px)",
    "Mehrere farbige Kreise, die mit Verzögerung folgen",
    "Über Bildern ausgeschaltet und durch einen Ring ohne Blend-Modus ersetzt"
   ],
   "umsetzung": ".cursor { position: fixed; inset: 0; pointer-events: none; mix-blend-mode: difference } .cursor i { position: absolute; width: 400px; height: 400px; margin: -200px; border-radius: 50%; background: #fff }. Position und Größe per JS in einem rAF-Takt: transform: translate(x, y) scale(d / 400), Position per Lerp, Größe als Tween. Den Blend-Modus auf den Wrapper legen, nicht auf den Kreis.\n\nFallstricke: Der Blend-Modus mischt nur mit dem, was im selben Stacking Context darunter liegt. Liegt der Cursor in einem Element mit isolation, transform oder opacity, bricht der Effekt; deshalb als direktes Kind von body. In Safari kann will-change: transform auf dem Cursor den Blend-Modus abschalten. Den Systemzeiger nur mit (hover: hover) and (pointer: fine) ausblenden.",
   "mobil": "Entfällt. Auf Touch gibt es keinen Zeiger.",
   "reduzierte_bewegung": "Abschalten und den Systemzeiger zeigen.",
   "barrierefreiheit": "Die Invertierung macht Kontraste unvorhersehbar, deshalb nie über Formularen oder Fließtext. Der Cursor ist dekorativ (aria-hidden), Fokus-Rahmen bleiben sichtbar, alle Links funktionieren ohne ihn."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept fotograf-film-bild-zuerst (Film-Variante, Grund #0e0e0e), erfundene Produktionsfirma Freiheit Film aus Köln-Deutz mit Regie-Roster in Instrument Serif und eigenen SVG-Standbildern (Rheinufer mit Brücke, Nachtschicht, rotes Studio, Kantine, Messehalle, Rheinpark). Das Rezept verbietet, das Werk zu tönen; deshalb schaltet sich der Kreis über dem Standbild ab und ein Ring ohne Blend-Modus erscheint. Bildwechsel nur per Opazität. Pult: Punkt, Lichtfleck, Drei Farben; die Vorführung wechselt jede Runde die Variante. Referenzen: itsoffbrand.com, blog.olivierlarose.com, partizan.com, baileywade.co.uk. AD-Review 01.11.2026: Note 4 Zugang 02.11.2026: body mit grid-template-columns: minmax(0, 1fr) (kein Querscrollen bei 320 px, vorher +3 px); Kontrastmodus-Rahmen für Knöpfe."
 }
}