{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "listen-hover-bildvorschau",
 "name": "Bildvorschau beim Listen-Hover",
 "name_en": "Hover image reveal / floating preview on list hover / Cursor-following image preview (hover reveal list) / Project index list navigation with rollover preview",
 "kurz": "Die Liste bleibt typografisch ruhig; das Bild kommt erst, wenn der Blick auf einer Zeile ruht, und folgt der Maus mit leichter Trägheit.",
 "kategorie": "Hover",
 "kategorie_slug": "hover",
 "kategorie_nr": 7,
 "bau_chat": "C4",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "editorial",
  "präzise",
  "luxuriös"
 ],
 "stimmung_roh": [
  "editorial",
  "ruhig",
  "luxuriös",
  "präzise",
  "agenturhaft",
  "sachlich",
  "schweizerisch"
 ],
 "technik": [
  "gsap",
  "vanilla-js",
  "css",
  "motion",
  "flip",
  "view-transitions"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "1) Eine typografische Liste (Projekte, Leistungen, Menü) ist der eigentliche Inhalt. 2) Beim Hover über eine Zeile erscheint neben dem Zeiger ein Bild in einem Rahmen, der aus dem Nichts aufskaliert; das Bild darin zoomt gegenläufig zurück. 3) Der Rahmen folgt der Maus mit Verzögerung (Lerp) und kippt leicht in Laufrichtung. 4) Beim Wechsel zur nächsten Zeile bleibt der Rahmen stehen; nur der Bildstreifen darin fährt zum nächsten Bild (top: Index × −100 %). 5) Beim Verlassen der Liste schrumpft der Rahmen weg. Die übrigen Zeilen treten zurück, solange eine gezeigt wird.",
  "warum_es_wirkt": "Die Seite bleibt ruhig und typografisch, liefert Bilder aber genau dann, wenn Interesse da ist. Weil der Rahmen beim Zeilenwechsel stehen bleibt, entsteht Kontinuität statt Flackern; die Trägheit macht ihn körperlich. Das wirkt wie ein Werkverzeichnis: sachlich, editorial, selbstbewusst.",
  "wann_einsetzen": "Projektindex, Arbeitenliste, Leistungen, Team, Menü-Overlays, Presse- und Award-Listen. Portfolios, Studios, Architektur, Fotografie, Archive.",
  "wann_nicht": "Wenn das Bild die wichtigste Information ist, etwa im Shop (dann Raster). Bei weniger als fünf Einträgen. Wenn die Zielgruppe fast nur auf dem Telefon kommt.",
  "varianten": [
   "Bild folgt dem Zeiger mit Kippen nach Laufrichtung (diese Demo)",
   "Fester Vorschaurahmen, nur der Bildstreifen wechselt (ruhiger)",
   "Mit Cursor-Kreis und Label „Ansehen“, unterschiedlich schnell nachlaufend",
   "Vollflächiges Hintergrundbild wechselt je Zeile",
   "Bild öffnet sich per clip-path in der Zeile selbst statt am Zeiger",
   "Als Hauptnavigation im Vollbild-Menü",
   "Mit Ansichtsumschalter Liste/Raster (Flip oder View Transition)"
  ],
  "umsetzung": "Ein einziger Rahmen für alle Zeilen, darin ein Streifen mit allen Bildern (vorgeladen). Pro Bild: ist += (ziel − ist) × k mit k = 1 − (1 − 0,1)^(dt/16,7), so bleibt die Trägheit bei 120 Hz gleich. Drehung = clamp(Abstand × 0,06, −8°, 8°), ebenfalls gelerpt. Beim ersten Eintritt Ist auf Ziel setzen, sonst fliegt der Rahmen von der alten Stelle herein. Ein- und Ausblenden über scale mit verschiedenen Kurven: hinein power3.inOut 450 ms, hinaus power2.in 300 ms.\n\nFallstricke: Das Bild nie über die Zeile legen, die gerade gelesen wird (rechts unter den Zeiger, an den Rändern auf die andere Seite). Videos erst beim ersten Hover laden. Die Schleife mit requestAnimationFrame anhalten, sobald der Rahmen zur Ruhe gekommen ist.",
  "mobil": "Ohne Hover entfällt die schwebende Vorschau. Daumenbild fest in der Zeile; ein Tipp führt direkt zum Projekt.",
  "reduzierte_bewegung": "Kein Folgen, kein Kippen: das Bild steht an fester Stelle neben der Zeile und wechselt per Überblendung (150 ms).",
  "barrierefreiheit": "Jede Zeile ist ein echter Link mit aussagekräftigem Namen. Die Vorschau ist dekorativ (aria-hidden, alt leer). Tastaturfokus auf einer Zeile zeigt das Bild ebenfalls, an fester Stelle. Zusatzinfos (Art, Jahr) stehen als Text in der Zeile, nicht nur im Bild."
 },
 "messwerte": {
  "easing": "Lerp 0.08 (Codrops); quickTo power3; Skalierung ein cubic-bezier(0.76,0,0.24,1), aus cubic-bezier(0.32,0,0.67,0)",
  "dauer_ms": "Einblenden 200 (Codrops); quickTo 800/500/450; Skalierung 400",
  "stagger_ms": "Intro der Menüzeilen 60 pro Zeile (1200 ms expo.out)",
  "distanz": "Rotation bis 60°, Helligkeit 1–4 über 0–100 px Mausweg",
  "sonstiges": "Bild zentriert per x/y -50 %",
  "herkunft": "beobachtet",
  "quelle": "https://tympanus.net/codrops/2020/07/01/creating-a-menu-image-animation-on-hover/ ; https://blog.olivierlarose.com/tutorials/project-gallery-mouse-hover",
  "aus_eintrag": [
   "listen-hover-bildvorschau"
  ]
 },
 "kurve": {
  "bezier": [
   0.76,
   0.0,
   0.24,
   1.0
  ],
  "css": "cubic-bezier(0.76, 0, 0.24, 1)",
  "name": "power3.inOut",
  "dauer_ms": 700
 },
 "gesehen_bei": [
  {
   "seite": "Codrops: Creating a Menu Image Animation on Hover (2020)",
   "url": "https://tympanus.net/codrops/2020/07/01/creating-a-menu-image-animation-on-hover/",
   "auszeichnung": "",
   "beobachtung": "Bild folgt dem Cursor, Lerp 0.08 auf x/y/Rotation/Helligkeit, Rotation 0–60° nach Mausweg, Einblenden 0.2 s Sine.easeOut gegenläufig; inspiriert von Marvin Schwaibold.",
   "art": "artikel"
  },
  {
   "seite": "Olivier Larose: Project Gallery Mouse Hover",
   "url": "https://blog.olivierlarose.com/tutorials/project-gallery-mouse-hover",
   "auszeichnung": "",
   "beobachtung": "Nachbau des Portfolios von Dennis Snellenberg: Modal + Cursor + Label mit gsap.quickTo (0.8/0.5/0.45 s, power3), Bildstreifen per top:index*-100 %.",
   "art": "artikel"
  },
  {
   "seite": "Dennis Snellenberg Portfolio",
   "url": "https://dennissnellenberg.com/",
   "auszeichnung": "",
   "beobachtung": "Original-Referenz: ‚Recent work‘-Liste mit Disziplin und Jahr; Seitenabruf bestätigt die Listenstruktur (Hover selbst nicht per Text prüfbar).",
   "art": "website-ungeprueft",
   "browser_gemessen": true
  },
  {
   "seite": "Codrops ImageRevealHover (Repo)",
   "url": "https://github.com/codrops/ImageRevealHover",
   "auszeichnung": "",
   "beobachtung": "Sammlung von Link-Hover-Effekten, die ein Thumbnail auf verschiedene Arten enthüllen.",
   "art": "demo"
  },
  {
   "seite": "Codrops FullscreenHoverLoop (Repo)",
   "url": "https://github.com/codrops/FullscreenHoverLoop",
   "auszeichnung": "",
   "beobachtung": "Vollbild-Loop mit Bildvorschau beim Menü-Hover.",
   "art": "demo"
  },
  {
   "seite": "GSAP Demo Hub – Cursor-Tracking Image Preview",
   "url": "https://demos.gsap.com/demo/cursor-tracking-image-preview",
   "auszeichnung": "",
   "beobachtung": "Offizielle GSAP-Demo in der Kategorie ‚Cursor Animations‘, basiert auf gsap.quickTo().",
   "art": "demo"
  },
  {
   "seite": "Osmo – Image Preview Cursor Follower",
   "url": "https://www.osmo.supply/resource/image-preview-cursor-follower",
   "auszeichnung": "",
   "beobachtung": "Ressource gelistet (nur Titel gesehen).",
   "art": "demo"
  },
  {
   "seite": "Obys",
   "url": "https://obys.agency",
   "auszeichnung": "",
   "beobachtung": "Umschalter „Vertical, Horizontal, Grid“ für den Arbeitsindex; nummerierte Projekt-Thumbnails.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "14islands",
   "url": "https://www.14islands.com",
   "auszeichnung": "",
   "beobachtung": "Work-Index listet Kundenprojekte mit Name, Kategorie und Thumbnail.",
   "art": "website"
  },
  {
   "seite": "Grégory Lallé Portfolio 2024 (Awwwards Case Study)",
   "url": "https://www.awwwards.com/case-study-gregory-lalle-portfolio-2024-building-a-portfolio-the-constent-struggle-for-most-developers.html",
   "auszeichnung": "Awwwards Case Study",
   "beobachtung": "Projektliste zentral auf der Startseite, bleibt auf allen Seiten an gleicher Position; verwandelt sich auf der About-Seite in Kundentext; Typo-Skalierungsanimation in der Navigation.",
   "art": "artikel"
  },
  {
   "seite": "Awwwards Inspiration: Navigation rollover preview (Marie Weber)",
   "url": "https://www.awwwards.com/inspiration/navigation-rollover-preview-marie-weber",
   "auszeichnung": "Awwwards Inspiration (Element-Sammlung)",
   "beobachtung": "Nur Titel gesehen.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Awwwards Inspiration: View list projects (Bisous)",
   "url": "https://www.awwwards.com/inspiration/view-list-projects-bisous",
   "auszeichnung": "Awwwards Inspiration (Element-Sammlung)",
   "beobachtung": "Nur Titel gesehen.",
   "art": "website-ungeprueft"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops: Creating a Menu Image Animation on Hover",
   "url": "https://tympanus.net/codrops/2020/07/01/creating-a-menu-image-animation-on-hover/"
  },
  {
   "titel": "Olivier Larose: Project Gallery Mouse Hover",
   "url": "https://blog.olivierlarose.com/tutorials/project-gallery-mouse-hover"
  },
  {
   "titel": "GSAP Demo – Cursor-Tracking Image Preview",
   "url": "https://demos.gsap.com/demo/cursor-tracking-image-preview"
  },
  {
   "titel": "CodePen-Quelle der GSAP-Demo",
   "url": "https://codepen.io/GreenSock/pen/PwqrzeG"
  },
  {
   "titel": "Codrops: Inline Menu Layout with Gallery Panel",
   "url": "https://tympanus.net/codrops/2020/11/11/inline-menu-layout-with-gallery-panel/"
  },
  {
   "titel": "Codrops: Menu to Grid Layout Animation (Demo)",
   "url": "https://tympanus.net/Development/MenuToGrid/"
  },
  {
   "titel": "Codrops: Layout with Reveal Animations and Content Preview",
   "url": "https://tympanus.net/codrops/2021/07/28/layout-with-reveal-animations-and-content-preview/"
  }
 ],
 "kombinierbar_mit": [
  "kontextueller-cursor",
  "text-roll-hover",
  "nachbarn-reagieren-hover",
  "bild-zoom-in-maske",
  "richtungsabhaengiger-marquee-hover",
  "vollbild-overlay-menue-bildvorschau",
  "gleitender-indikator",
  "projektindex-hover-vorschau"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hover/listen-hover-bildvorschau/",
  "meta": "https://cecodesign.de/lab/fundus/hover/listen-hover-bildvorschau/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hover/listen-hover-bildvorschau/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "schriftanimation.json",
   "navigation.json"
  ],
  "zusammengelegt_aus": [
   "listen-hover-bildvorschau",
   "image-preview-cursor",
   "index-listen-navigation"
  ],
  "querverweis_kategorien": [
   "Cursor",
   "Navigation"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die Liste bleibt typografisch ruhig; das Bild kommt erst, wenn der Blick auf einer Zeile ruht, und folgt der Maus mit leichter Trägheit.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "Erscheinen cubic-bezier(0.76, 0, 0.24, 1) 450 ms · Gehen cubic-bezier(0.32, 0, 0.67, 0) 300 ms",
   "dauer_ms": "Bildwechsel im Streifen 700 · Zeile rückt ein 600 (expo.out)",
   "folgen": "Lerp 0,1 pro Bild bei 60 Hz, auf echte Bildrate umgerechnet",
   "kippen": "bis 8° in Laufrichtung (0,06° je px Abstand)",
   "abstand": "40 px rechts, 28 px unter dem Zeiger, an den Rändern gespiegelt",
   "nachbarn": "Deckkraft 0,28",
   "bild": "innen 1,15 → 1"
  },
  "ausloeser": "hover",
  "touch": "Keine schwebende Vorschau. Jede Zeile zeigt ihr Daumenbild fest rechts, ein Tipp öffnet das Projekt.",
  "reduziert": "Vorschau ohne Folgen und Kippen an fester Stelle rechts neben der Zeile, Wechsel als Überblendung in 150 ms.",
  "korrekturen": {
   "beschreibung": "1) Eine typografische Liste (Projekte, Leistungen, Menü) ist der eigentliche Inhalt. 2) Beim Hover über eine Zeile erscheint neben dem Zeiger ein Bild in einem Rahmen, der aus dem Nichts aufskaliert; das Bild darin zoomt gegenläufig zurück. 3) Der Rahmen folgt der Maus mit Verzögerung (Lerp) und kippt leicht in Laufrichtung. 4) Beim Wechsel zur nächsten Zeile bleibt der Rahmen stehen; nur der Bildstreifen darin fährt zum nächsten Bild (top: Index × −100 %). 5) Beim Verlassen der Liste schrumpft der Rahmen weg. Die übrigen Zeilen treten zurück, solange eine gezeigt wird.",
   "warum_es_wirkt": "Die Seite bleibt ruhig und typografisch, liefert Bilder aber genau dann, wenn Interesse da ist. Weil der Rahmen beim Zeilenwechsel stehen bleibt, entsteht Kontinuität statt Flackern; die Trägheit macht ihn körperlich. Das wirkt wie ein Werkverzeichnis: sachlich, editorial, selbstbewusst.",
   "wann_einsetzen": "Projektindex, Arbeitenliste, Leistungen, Team, Menü-Overlays, Presse- und Award-Listen. Portfolios, Studios, Architektur, Fotografie, Archive.",
   "wann_nicht": "Wenn das Bild die wichtigste Information ist, etwa im Shop (dann Raster). Bei weniger als fünf Einträgen. Wenn die Zielgruppe fast nur auf dem Telefon kommt.",
   "varianten": [
    "Bild folgt dem Zeiger mit Kippen nach Laufrichtung (diese Demo)",
    "Fester Vorschaurahmen, nur der Bildstreifen wechselt (ruhiger)",
    "Mit Cursor-Kreis und Label „Ansehen“, unterschiedlich schnell nachlaufend",
    "Vollflächiges Hintergrundbild wechselt je Zeile",
    "Bild öffnet sich per clip-path in der Zeile selbst statt am Zeiger",
    "Als Hauptnavigation im Vollbild-Menü",
    "Mit Ansichtsumschalter Liste/Raster (Flip oder View Transition)"
   ],
   "umsetzung": "Ein einziger Rahmen für alle Zeilen, darin ein Streifen mit allen Bildern (vorgeladen). Pro Bild: ist += (ziel − ist) × k mit k = 1 − (1 − 0,1)^(dt/16,7), so bleibt die Trägheit bei 120 Hz gleich. Drehung = clamp(Abstand × 0,06, −8°, 8°), ebenfalls gelerpt. Beim ersten Eintritt Ist auf Ziel setzen, sonst fliegt der Rahmen von der alten Stelle herein. Ein- und Ausblenden über scale mit verschiedenen Kurven: hinein power3.inOut 450 ms, hinaus power2.in 300 ms.\n\nFallstricke: Das Bild nie über die Zeile legen, die gerade gelesen wird (rechts unter den Zeiger, an den Rändern auf die andere Seite). Videos erst beim ersten Hover laden. Die Schleife mit requestAnimationFrame anhalten, sobald der Rahmen zur Ruhe gekommen ist.",
   "mobil": "Ohne Hover entfällt die schwebende Vorschau. Daumenbild fest in der Zeile; ein Tipp führt direkt zum Projekt.",
   "reduzierte_bewegung": "Kein Folgen, kein Kippen: das Bild steht an fester Stelle neben der Zeile und wechselt per Überblendung (150 ms).",
   "barrierefreiheit": "Jede Zeile ist ein echter Link mit aussagekräftigem Namen. Die Vorschau ist dekorativ (aria-hidden, alt leer). Tastaturfokus auf einer Zeile zeigt das Bild ebenfalls, an fester Stelle. Zusatzinfos (Art, Jahr) stehen als Text in der Zeile, nicht nur im Bild.",
   "stimmung": [
    "ruhig",
    "editorial",
    "präzise",
    "luxuriös"
   ]
  },
  "geprueft": "31.10.2026",
  "notiz": "Pilot aus Chat B. Ohne Bibliothek; Bilder sind eigene Arbeiten aus lab/fundus/medien. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise .55 → .64 (5,2:1 auf Papier). Querscrollen bei 320 px trat in der neuen Prüfung nicht mehr auf (ohne Änderung)."
 }
}