{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "bild-trail-cursor",
 "name": "Bild-Spur hinter dem Cursor (Image Trail)",
 "name_en": "Image trail / mouse image trail / Image trail on mouse move",
 "kurz": "Wer die Maus bewegt, legt eine Spur aus Projektbildern über den Hero: drei gemessene Varianten von Drehen bis Kreismaske.",
 "kategorie": "Hover",
 "kategorie_slug": "hover",
 "kategorie_nr": 7,
 "bau_chat": "C4",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "editorial",
  "verspielt",
  "laut"
 ],
 "stimmung_roh": [
  "verspielt",
  "laut",
  "editorial",
  "kreativ",
  "bildstark"
 ],
 "technik": [
  "gsap",
  "vanilla-js",
  "css",
  "canvas"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Ein Pool von 8 bis 20 Bildern liegt unsichtbar über einer Fläche (position: absolute, pointer-events: none, opacity: 0). Bei jeder Mausbewegung misst ein Skript die Strecke seit dem letzten Bild. Überschreitet sie einen Schwellenwert, erscheint das nächste Bild aus dem Pool an der Mausposition, mit dem höchsten z-index. Kurz danach verschwindet es wieder: es schrumpft, dreht sich weg, fällt oder schließt sich in einer Maske. So entsteht eine fächerartige Bildspur entlang der Bewegung.",
  "warum_es_wirkt": "Ein Archiv wirkt in Sekunden voll. Jede Bewegung wird sofort belohnt, ganz ohne Klick. Der Nutzer malt mit der Bildmenge und hat dabei das Gefühl von Kontrolle und Fülle. Die Seite zeigt viel Arbeit in kurzer Zeit, ohne Raster.",
  "wann_einsetzen": "Hero- und Intro-Flächen von Fotografen, Studios und Kreativportfolios. Archiv- und Index-Seiten mit vielen Bildern, Kampagnen- und Festival-Seiten, 404-Seiten.",
  "wann_nicht": "Auf inhaltsschweren Seiten, auf denen die Bilder vom Lesen ablenken. Bei wenigen oder uneinheitlichen Bildern. Bei ruhigen Marken. Wenn sich die Bilder nicht vorladen lassen, flackert die Spur.",
  "varianten": [
   "Drehen (Huge): Bilder springen gedreht auf und bleiben liegen. Nach kurzem Stillstand drehen sich alle gemeinsam weg.",
   "Gleiten (Codrops Demo 1): Bild startet an der nachlaufenden Position, gleitet zur Maus, schrumpft und blendet aus.",
   "Maske (Makemepulse): Bild öffnet sich in einer runden Maske, Drehung nach Mausgeschwindigkeit.",
   "Hochskalieren, Fallen oder Quetschen beim Verschwinden (Codrops Demos 2 bis 4).",
   "Geschwindigkeitsabhängig: Bildgröße oder Drehung folgt dem Tempo (Motion „Cursor trail velocity“).",
   "Pixel- oder Kachelspur statt Bildern (siehe pixel-raster-hover).",
   "Trail als Intro-Übergang zwischen zwei Layouts (Codrops 2022, GSAP Flip).",
   "Canvas- oder WebGL-Spur: Bilder als Texturen statt DOM-Elemente."
  ],
  "umsetzung": "Bilder vorab laden (img.decode()) und mit fester Größe anlegen (aspect-ratio), damit pro Frame nichts gemessen werden muss. Ein Frame-Takt führt eine träge Position nach (Lerp 0,1) und prüft die Strecke seit dem letzten Bild mit Math.hypot. Liegt sie über dem Schwellenwert, kommt das nächste Bild aus dem Ringpuffer: gsap.killTweensOf(img), dann eine Timeline mit set (opacity 1, zIndex ++z, Position) und den Tweens der Variante. Nur transform, opacity und clip-path animieren. Sind alle Bilder unsichtbar, den z-index-Zähler zurücksetzen. Pool groß genug für schnelle Bewegungen wählen (12 bis 16). Effekt nur bei (hover: hover) an die Maus binden; Huge aktiviert ihn erst ab 1024 px Breite und nur, solange die Fläche im Viewport ist.",
  "mobil": "Ohne Maus gibt es keine Spur zum Malen. Besser: eine automatische, langsame Spur im Hero, die nur läuft, solange er sichtbar ist. Alternativ eine statische Collage. Wer Wischen zulässt, begrenzt es auf die Fläche und lässt senkrechtes Scrollen frei (touch-action: pan-y).",
  "reduzierte_bewegung": "Keine Spur. Stattdessen eine statische Collage oder eine ruhige Diashow mit Überblendung.",
  "barrierefreiheit": "Rein dekorativ: Bilder mit alt=\"\" und die Spur mit aria-hidden. Keine Information nur in der Spur. Die Projekte müssen zusätzlich als normale Liste mit Links erreichbar sein."
 },
 "messwerte": {
  "easing": "Einblenden GSAP-Default (power1.out), Ausblenden power2.in (Huge); cubic-bezier(.22,.14,.36,1) (Makemepulse)",
  "dauer_ms": "Ein 300, Aus 700, Stillstand-Timeout 420 (Huge)",
  "stagger_ms": "",
  "distanz": "Schwellenwert 5 % Viewportbreite (Huge) bzw. 65 px (Makemepulse); Rotation −60° → ±12°",
  "sonstiges": "Trail-Länge max. 16 Bilder; Mindestbreite 1024 px; Inertia 0,1 (Makemepulse)",
  "herkunft": "beobachtet",
  "quelle": "https://www.hugeinc.com/_next/static/chunks/2iuon7aqn2-4w.js ; https://www.makemepulse.com/_nuxt/DK3PUchw.js",
  "aus_eintrag": [
   "bild-trail-cursor"
  ]
 },
 "kurve": {
  "bezier": [
   0.5,
   1,
   0.89,
   1
  ],
  "css": "cubic-bezier(0.5, 1, 0.89, 1)",
  "name": "power1.out",
  "dauer_ms": 300
 },
 "gesehen_bei": [
  {
   "seite": "Codrops ImageTrailEffects (Repo, Demo)",
   "url": "https://github.com/codrops/ImageTrailEffects",
   "auszeichnung": "",
   "beobachtung": "Sechs Varianten einer mausfolgenden Bildspur; laut README inspiriert vom Effekt auf der Seite von VLNC Studio. Quellcode gelesen (Schwellenwert, Lerp, Timeline).",
   "art": "demo"
  },
  {
   "seite": "Codrops Demo ImageTrailEffects",
   "url": "https://tympanus.net/Development/ImageTrailEffects/",
   "auszeichnung": "",
   "beobachtung": "Live-Demo zum Repo.",
   "art": "demo"
  },
  {
   "seite": "Codrops: Image Trail Animation for an Intro (2022)",
   "url": "https://tympanus.net/codrops/2022/05/03/image-trail-animation-for-an-intro/",
   "auszeichnung": "",
   "beobachtung": "Trail als Übergang vom Fake-Loader in das nächste Layout, mit GSAP Flip.",
   "art": "artikel"
  },
  {
   "seite": "Motion Examples: Cursor trail / Cursor trail velocity",
   "url": "https://motion.dev/examples/react-cursor-trail-velocity",
   "auszeichnung": "",
   "beobachtung": "Offizielles Motion-Beispiel einer geschwindigkeitsabhängigen Cursor-Spur (Code hinter Paywall).",
   "art": "demo"
  },
  {
   "seite": "GSAP Demo Hub – Cursor Trail",
   "url": "https://demos.gsap.com/demo/cursor-trail",
   "auszeichnung": "",
   "beobachtung": "Offizielle Demo mit gsap.utils.random(), killTweensOf() und clearProps.",
   "art": "demo"
  },
  {
   "seite": "Osmo – Image Trail Following Cursor",
   "url": "https://www.osmo.supply/resource/image-trail-following-cursor",
   "auszeichnung": "",
   "beobachtung": "Ressource gelistet (nur Titel gesehen).",
   "art": "demo"
  },
  {
   "seite": "Huge",
   "url": "https://www.hugeinc.com/",
   "auszeichnung": "",
   "beobachtung": "ImageTrail-Komponente im Bundle: neues Bild, sobald Mausweg > innerWidth/20; Einblenden scale 0 → 1, rotation −60° → [−12,0,12,0], 0,3 s; Ausblenden nach 420 ms Stillstand: opacity 0, scale 0, rotation 240°, 0,7 s power2.in; nur ab 1024 px, per ScrollTrigger nur im Viewport aktiv.",
   "art": "website"
  },
  {
   "seite": "Makemepulse",
   "url": "https://www.makemepulse.com/",
   "auszeichnung": "",
   "beobachtung": "Hero-Headline mit .image-trail-target; Vue-Komponente ImageTrail (threshold 65 px, inertia 0,1, Rotation nach Mausgeschwindigkeit); Bilder öffnen in runder Maske (scale 0 → 1,5, ease 0.22,0.14,0.36,1); auf Touch deaktiviert.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops: Image Trail Effects (Artikel)",
   "url": "https://tympanus.net/codrops/?p=42696"
  },
  {
   "titel": "Codrops: Image Trail Animation for an Intro",
   "url": "https://tympanus.net/codrops/2022/05/03/image-trail-animation-for-an-intro/"
  },
  {
   "titel": "GSAP Demo – Cursor Trail",
   "url": "https://demos.gsap.com/demo/cursor-trail"
  },
  {
   "titel": "Pixel Cursor Trailing (Olivier Larose)",
   "url": "https://blog.olivierlarose.com/tutorials/pixel-cursor-trailing"
  },
  {
   "titel": "Cartoon Cursor Trailing (Olivier Larose)",
   "url": "https://blog.olivierlarose.com/tutorials/cartoon-cursor-trailing"
  }
 ],
 "kombinierbar_mit": [
  "listen-hover-bildvorschau",
  "kontextueller-cursor",
  "ascii-dither-pixel-stil",
  "schrift-hero-viewportbreit",
  "cursor-follower-lerp"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hover/bild-trail-cursor/",
  "meta": "https://cecodesign.de/lab/fundus/hover/bild-trail-cursor/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hover/bild-trail-cursor/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "schriftanimation.json",
   "patch-belege-1.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: 2 Produktionsbelege mit vollständigen Parametern."
  ],
  "zusammengelegt_aus": [
   "bild-trail-cursor",
   "image-trail-cursor"
  ],
  "querverweis_kategorien": [
   "Cursor"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Wer die Maus bewegt, legt eine Spur aus Projektbildern über den Hero: drei gemessene Varianten von Drehen bis Kreismaske.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "CustomEase@3.15.0"
  ],
  "werte": {
   "pool": "16 Bilder (8 hoch 4:5, 8 quer 3:2), Ringpuffer, Trail-Länge max. 16",
   "bildbreite": "hoch clamp(118px, 12.5vw, 196px), quer clamp(150px, 17vw, 268px)",
   "lerp": "0,1 pro Frame bei 60 fps, auf echte Bildrate umgerechnet: 1 − 0,9^(dt/16,667)",
   "drehen_schwelle": "5 % der Bühnenbreite, mindestens 44 px (Huge: innerWidth/20)",
   "drehen_ein": "scale 0 → 1, rotation −60° → [−12°, 0°, 12°, 0°] reihum, 300 ms power1.out",
   "drehen_aus": "nach 420 ms Stillstand alle sichtbaren Bilder: opacity 0, scale 0, rotation 240°, 700 ms power2.in, stagger 30 ms (stagger gesetzt)",
   "gleiten_schwelle": "100 px",
   "gleiten": "Start an der gelerpten Position, gleitet zur Maus 900 ms expo.out; ab 400 ms opacity 0 (1000 ms power1.out) und scale 0,2 (1000 ms quint.out)",
   "maske_schwelle": "65 px",
   "maske_ein": "clip-path circle(0% → 75% at 50% 50%) (Kreis 0 → 1,5 × halbe Bildgröße) und Gleiten zur Maus, 800 ms cubic-bezier(0.22, 0.14, 0.36, 1) (Kurve gemessen, Dauer gesetzt)",
   "maske_drehung": "nach Tempo: clamp(−12°, 12°, vx × 0,6)",
   "maske_aus": "ab 900 ms Kreis schließt sich, 600 ms power2.in (gesetzt)",
   "z_index": "steigt pro Bild, Rücksetzen auf 1, wenn alle Bilder unsichtbar sind",
   "ui": "Umschalter 150 ms cubic-bezier(0.16, 1, 0.3, 1)",
   "vorfuehrung": "liegende Acht über die Bühne, 5200 ms pro Runde (weich an und aus), 1500 ms Halt, dann nächste Variante",
   "touch_auto": "gleiche Bahn, 8000 ms pro Runde, nur solange die Bühne sichtbar ist"
  },
  "ausloeser": "hover",
  "touch": "Keine Maus: Die Bühne zeichnet die Spur selbst entlang einer langsamen liegenden Acht (8 s pro Runde), solange sie im Viewport ist. Waagerechtes Wischen malt mit (touch-action: pan-y), senkrechtes Scrollen bleibt frei.",
  "reduziert": "Keine Spur und kein Umschalter. Stattdessen eine ruhige Collage aus drei leicht gedrehten Bildern neben der Headline. Die Werte-Zeile nennt den Ersatz.",
  "korrekturen": {
   "beschreibung": "Ein Pool von 8 bis 20 Bildern liegt unsichtbar über einer Fläche (position: absolute, pointer-events: none, opacity: 0). Bei jeder Mausbewegung misst ein Skript die Strecke seit dem letzten Bild. Überschreitet sie einen Schwellenwert, erscheint das nächste Bild aus dem Pool an der Mausposition, mit dem höchsten z-index. Kurz danach verschwindet es wieder: es schrumpft, dreht sich weg, fällt oder schließt sich in einer Maske. So entsteht eine fächerartige Bildspur entlang der Bewegung.",
   "warum_es_wirkt": "Ein Archiv wirkt in Sekunden voll. Jede Bewegung wird sofort belohnt, ganz ohne Klick. Der Nutzer malt mit der Bildmenge und hat dabei das Gefühl von Kontrolle und Fülle. Die Seite zeigt viel Arbeit in kurzer Zeit, ohne Raster.",
   "wann_einsetzen": "Hero- und Intro-Flächen von Fotografen, Studios und Kreativportfolios. Archiv- und Index-Seiten mit vielen Bildern, Kampagnen- und Festival-Seiten, 404-Seiten.",
   "wann_nicht": "Auf inhaltsschweren Seiten, auf denen die Bilder vom Lesen ablenken. Bei wenigen oder uneinheitlichen Bildern. Bei ruhigen Marken. Wenn sich die Bilder nicht vorladen lassen, flackert die Spur.",
   "varianten": [
    "Drehen (Huge): Bilder springen gedreht auf und bleiben liegen. Nach kurzem Stillstand drehen sich alle gemeinsam weg.",
    "Gleiten (Codrops Demo 1): Bild startet an der nachlaufenden Position, gleitet zur Maus, schrumpft und blendet aus.",
    "Maske (Makemepulse): Bild öffnet sich in einer runden Maske, Drehung nach Mausgeschwindigkeit.",
    "Hochskalieren, Fallen oder Quetschen beim Verschwinden (Codrops Demos 2 bis 4).",
    "Geschwindigkeitsabhängig: Bildgröße oder Drehung folgt dem Tempo (Motion „Cursor trail velocity“).",
    "Pixel- oder Kachelspur statt Bildern (siehe pixel-raster-hover).",
    "Trail als Intro-Übergang zwischen zwei Layouts (Codrops 2022, GSAP Flip).",
    "Canvas- oder WebGL-Spur: Bilder als Texturen statt DOM-Elemente."
   ],
   "umsetzung": "Bilder vorab laden (img.decode()) und mit fester Größe anlegen (aspect-ratio), damit pro Frame nichts gemessen werden muss. Ein Frame-Takt führt eine träge Position nach (Lerp 0,1) und prüft die Strecke seit dem letzten Bild mit Math.hypot. Liegt sie über dem Schwellenwert, kommt das nächste Bild aus dem Ringpuffer: gsap.killTweensOf(img), dann eine Timeline mit set (opacity 1, zIndex ++z, Position) und den Tweens der Variante. Nur transform, opacity und clip-path animieren. Sind alle Bilder unsichtbar, den z-index-Zähler zurücksetzen. Pool groß genug für schnelle Bewegungen wählen (12 bis 16). Effekt nur bei (hover: hover) an die Maus binden; Huge aktiviert ihn erst ab 1024 px Breite und nur, solange die Fläche im Viewport ist.",
   "mobil": "Ohne Maus gibt es keine Spur zum Malen. Besser: eine automatische, langsame Spur im Hero, die nur läuft, solange er sichtbar ist. Alternativ eine statische Collage. Wer Wischen zulässt, begrenzt es auf die Fläche und lässt senkrechtes Scrollen frei (touch-action: pan-y).",
   "reduzierte_bewegung": "Keine Spur. Stattdessen eine statische Collage oder eine ruhige Diashow mit Überblendung.",
   "barrierefreiheit": "Rein dekorativ: Bilder mit alt=\"\" und die Spur mit aria-hidden. Keine Information nur in der Spur. Die Projekte müssen zusätzlich als normale Liste mit Links erreichbar sein."
  },
  "geprueft": "31.10.2026",
  "notiz": "Hero eines erfundenen Kölner Gestaltungsstudios. Drei Varianten per Umschalter: Drehen (Huge), Gleiten (Codrops) und Maske (Makemepulse), jeweils mit den gemessenen Werten in der Werte-Zeile. Stagger beim gemeinsamen Ausblenden, Dauer der Maske und das Schließen der Maske sind gesetzt, nicht gemessen. Die Vorführung wechselt pro Runde die Variante. Projekte stehen zusätzlich als Liste unter dem Hero. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: Werte-Zeile rgba(239,236,228,.4) → .54 (4,9:1 auf Dunkel), Kontrastmodus-Rahmen für Knöpfe."
 }
}