{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "crosshair-coordinates-cursor",
 "name": "Fadenkreuz- und Koordinaten-Cursor",
 "name_en": "Crosshair cursor / cursor coordinates",
 "kurz": "Lageplan eines Kulturhauses: Ein feines Fadenkreuz mit Meter-Koordinaten fährt über den Grundriss und nimmt die Farbe des Saals an, über dem es steht.",
 "kategorie": "Cursor",
 "kategorie_slug": "cursor",
 "kategorie_nr": 8,
 "bau_chat": "C4",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "technisch",
  "präzise",
  "architektonisch"
 ],
 "technik": [
  "svg",
  "vanilla-js",
  "css",
  "gsap"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Zwei feine Linien kreuzen sich am Zeiger, eine waagerecht, eine senkrecht, über die ganze Fläche. Neben dem Kreuzungspunkt laufen Koordinaten mit, meist in Monospace mit Tabellenziffern. Je nach Variante folgen die Linien direkt oder mit leichtem Nachlauf, rasten an Rasterlinien ein oder reagieren auf das, was darunter liegt.",
  "warum_es_wirkt": "Technisch und präzise, wie eine Bauzeichnung. Passt zum Raster- und Swiss-Look und zu Tech-Marken. Auf Plänen und Karten ist es zusätzlich nützlich: Die Koordinate sagt, wo man gerade ist.",
  "wann_einsetzen": "Architektur, Ingenieurwesen, Raumfahrt und Tech, Raster-Portfolios, Grundrisse, Lagepläne und Kartenansichten.",
  "wann_nicht": "Warme, emotionale Marken. Textreiche Seiten, weil die Linien beim Lesen stören. Als Cursor für die ganze Seite bei öffentlichen Häusern mit breitem Publikum; dort nur auf einen Plan oder eine Karte begrenzen.",
  "varianten": [
   "Fadenkreuz über die volle Fläche, optional mit Verzerrung per SVG-Filter über Links und Bildern",
   "Nur ein Koordinaten-Etikett am Zeiger, ohne Linien",
   "Rastendes Fadenkreuz, das an Rasterlinien einschnappt"
  ],
  "umsetzung": "Zwei fixe 1-px-Elemente mit pointer-events: none, per transform an die Mausposition gesetzt, nie über left/top. Nachlauf per rAF-Lerp (etwa 0,2 pro Bild), auf die Bildrate umgerechnet. Koordinaten mit font-variant-numeric: tabular-nums, damit nichts springt. Rasten: Zielwert vor dem Lerp auf das Raster runden. Verzerrung: SVG-Filter feTurbulence mit feDisplacementMap auf den Linien, scale bei Hover animieren. Auf Plänen die Position über getScreenCTM() in Planeinheiten umrechnen.",
  "mobil": "Ohne Hover entfällt das Folgen. Sinnvoll ist ein festes Kreuz, das Tippen an eine Stelle setzt.",
  "reduzierte_bewegung": "Linien ohne Verzerrung und ohne Lerp, direkt am Zeiger.",
  "barrierefreiheit": "Kreuz und Etikett aria-hidden. Linien kontrastarm halten, damit Inhalte lesbar bleiben. System-Cursor sichtbar lassen. Die Information des Etiketts muss auch ohne Maus erreichbar sein, etwa über eine Liste mit Fokus."
 },
 "messwerte": {
  "easing": "ohne Verzögerung oder Lerp 0,2",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Linienstärke 1 px",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Osmo – Cursor Coordinates",
   "url": "https://www.osmo.supply/resource/cursor-coordinates",
   "auszeichnung": "",
   "beobachtung": "Ressource gelistet (nur Titel gesehen).",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops Tag ‚cursor‘",
   "url": "https://tympanus.net/codrops/tag/cursor/"
  },
  {
   "titel": "Osmo – Cursor Coordinates",
   "url": "https://www.osmo.supply/resource/cursor-coordinates"
  }
 ],
 "kombinierbar_mit": [
  "scramble-decode",
  "zahlen-odometer"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/cursor/crosshair-coordinates-cursor/",
  "meta": "https://cecodesign.de/lab/fundus/cursor/crosshair-coordinates-cursor/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/cursor/crosshair-coordinates-cursor/demo"
 },
 "herkunft": {
  "quelldateien": [
   "schriftanimation.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Lageplan eines Kulturhauses: Ein feines Fadenkreuz mit Meter-Koordinaten fährt über den Grundriss und nimmt die Farbe des Saals an, über dem es steht.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "folgen": "Lerp 0,2 pro Bild bei 60 Hz, auf die echte Bildrate umgerechnet: k = 1 − (1 − 0,2)^(dt / 16,667)",
   "variante_koordinaten": "ohne Verzögerung (k = 1), nur Etikett am Zeiger",
   "variante_rastend": "Ziel auf 2-m-Raster gerundet, dann Lerp 0,2; gezeichnetes 1-m-Raster wird deutlicher (Deckkraft .14 → .3)",
   "linien": "zwei Elemente 1 px, Breite bzw. Höhe 100 % der Zeichnung, nur transform: translate3d, pointer-events: none, Deckkraft .72, Farbe = Spartenfarbe des Raums unter dem Kreuz",
   "kreuzungspunkt": "Quadrat 9 × 9 px, 1 px Rand in Spartenfarbe, Füllung Grund",
   "etikett": "14 px rechts unter dem Kreuzungspunkt, am rechten bzw. unteren Rand gespiegelt; IBM Plex Mono 500 11 px, tabular-nums, Rand 1 px #0b0b0b, Schatten 3px 3px 0 Spartenfarbe; Zeile 2 Raumname Schibsted Grotesk 800 12,5 px",
   "lineale": "Wert X am oberen, Wert Y am linken Rand der Zeichnung, IBM Plex Mono 500 10,5 px, weiß auf #0b0b0b",
   "koordinaten": "Meter ab Achse A/1, zwei Nachkommastellen mit Komma, führende Null (z. B. 08,15), dazu Achsfeld (B/3) bei 8 m × 6 m Achsraster",
   "ui": "150 ms cubic-bezier(0.215, 0.61, 0.355, 1) für Ein-/Ausblenden, Linienfarbe, Raumfläche (Deckkraft .1 → .26), Listenzeile (8 px Einzug)",
   "karte": "Inhaltswechsel 200 ms gleiche Kurve, Deckkraft 0 → 1 und 6 px → 0",
   "vorfuehren": "gedachter Zeiger auf Lissajous-Bahn x = 24 + 20,5·sin(0,92 t), y = 15 + 11,5·sin(1,37 t + 0,6) in Metern; Variante wechselt alle 6500 ms (Fadenkreuz, Rastend, Nur Koordinaten); reduziert Sprünge von Saal zu Saal alle 1400 ms",
   "farben": "#efede9 Grund, #0b0b0b Text und Wände, #5f5d58 leise; Sparten Kunst #2f7d4a, Film #b0186b, Musik #c4421a, Tanz #3d5f9a",
   "schriften": "Schibsted Grotesk 850 h1 clamp(2.5rem, 4.4vw, 4.25rem)/1, -0.025em; Atkinson Hyperlegible Next 1.125rem für Text; IBM Plex Mono 400/500 0.8125rem tabular-nums für Daten, Labels und Koordinaten",
   "kopf": "sticky 64 px (Telefon 56 px), Unterkante 1 px #0b0b0b"
  },
  "ausloeser": "hover",
  "touch": "Kein Folgen. Beim Laden steht das Kreuz fest auf der nächsten Veranstaltung (Saal 3). Tippen auf den Plan setzt das Kreuz ohne Verzögerung an die Stelle, Tippen auf einen Saal in der Liste in die Saalmitte. Karte und Etikett zeigen Raum, Sparte und Programm.",
  "reduziert": "Kein Lerp: Das Kreuz sitzt direkt am Zeiger, ohne Übergänge bei Farbe, Fläche und Karte. Die Vorführung springt alle 1400 ms von Saal zu Saal.",
  "korrekturen": {
   "beschreibung": "Zwei feine Linien kreuzen sich am Zeiger, eine waagerecht, eine senkrecht, über die ganze Fläche. Neben dem Kreuzungspunkt laufen Koordinaten mit, meist in Monospace mit Tabellenziffern. Je nach Variante folgen die Linien direkt oder mit leichtem Nachlauf, rasten an Rasterlinien ein oder reagieren auf das, was darunter liegt.",
   "warum_es_wirkt": "Technisch und präzise, wie eine Bauzeichnung. Passt zum Raster- und Swiss-Look und zu Tech-Marken. Auf Plänen und Karten ist es zusätzlich nützlich: Die Koordinate sagt, wo man gerade ist.",
   "wann_einsetzen": "Architektur, Ingenieurwesen, Raumfahrt und Tech, Raster-Portfolios, Grundrisse, Lagepläne und Kartenansichten.",
   "wann_nicht": "Warme, emotionale Marken. Textreiche Seiten, weil die Linien beim Lesen stören. Als Cursor für die ganze Seite bei öffentlichen Häusern mit breitem Publikum; dort nur auf einen Plan oder eine Karte begrenzen.",
   "varianten": [
    "Fadenkreuz über die volle Fläche, optional mit Verzerrung per SVG-Filter über Links und Bildern",
    "Nur ein Koordinaten-Etikett am Zeiger, ohne Linien",
    "Rastendes Fadenkreuz, das an Rasterlinien einschnappt"
   ],
   "umsetzung": "Zwei fixe 1-px-Elemente mit pointer-events: none, per transform an die Mausposition gesetzt, nie über left/top. Nachlauf per rAF-Lerp (etwa 0,2 pro Bild), auf die Bildrate umgerechnet. Koordinaten mit font-variant-numeric: tabular-nums, damit nichts springt. Rasten: Zielwert vor dem Lerp auf das Raster runden. Verzerrung: SVG-Filter feTurbulence mit feDisplacementMap auf den Linien, scale bei Hover animieren. Auf Plänen die Position über getScreenCTM() in Planeinheiten umrechnen.",
   "mobil": "Ohne Hover entfällt das Folgen. Sinnvoll ist ein festes Kreuz, das Tippen an eine Stelle setzt.",
   "reduzierte_bewegung": "Linien ohne Verzerrung und ohne Lerp, direkt am Zeiger.",
   "barrierefreiheit": "Kreuz und Etikett aria-hidden. Linien kontrastarm halten, damit Inhalte lesbar bleiben. System-Cursor sichtbar lassen. Die Information des Etiketts muss auch ohne Maus erreichbar sein, etwa über eine Liste mit Fokus."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept kultur-programm-haltung, erfundenes Kulturhaus Modulhaus Ulm, Lageplan Erdgeschoss mit vier Sälen in den Spartenfarben des Rezepts. Das Rezept schließt Cursor-Effekte für die ganze Seite aus; deshalb wirkt das Kreuz nur auf dem Plan, der System-Cursor bleibt, und eine Saal-Liste mit Fokus führt dasselbe Kreuz per Tastatur. Drei Varianten per Umschalter (Fadenkreuz, Nur Koordinaten, Rastend). Die Verzerrung per SVG-Filter ist bewusst weggelassen, sie passt nicht zum sachlichen Rezept. Referenzen: ryojiikeda.com, zkm.de, mak.at, herzogdemeuron.com. AD-Review 01.11.2026: Note 5"
 }
}