{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "projektindex-hover-vorschau", "name": "Projektindex als Liste mit Hover-Bildvorschau", "name_en": "Project index list with hover image reveal", "kurz": "Ein Werkverzeichnis als typografische Liste: das Bild erscheint erst beim Zeigen, folgt dem Zeiger oder wechselt in einer festen Fläche und wächst beim Klick zum Hero der Fallstudie.", "kategorie": "Hero & Section-Layouts", "kategorie_slug": "hero-layouts", "kategorie_nr": 4, "bau_chat": "C2", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "website_belege": 2, "stimmung": [ "ruhig", "editorial", "präzise" ], "stimmung_roh": [ "editorial", "minimal", "seriös", "architektonisch" ], "technik": [ "css", "gsap", "vanilla-js", "lerp", "clip-path", "view-transitions" ], "technik_gruppen": [ "css", "js", "gsap" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Projekte stehen nicht im Kachelraster, sondern in einer typografischen Liste. Jede Zeile hat Nummer, großen Projektnamen und rechts kleine Metadaten wie Disziplin, Branche und Jahr, getrennt durch Haarlinien. Beim Hover erscheint ein Bild des Projekts. Es folgt entweder verzögert dem Zeiger und kippt je nach Mausgeschwindigkeit, oder es wechselt in einer festen Fläche neben der Liste. Das neue Bild schiebt sich aus der Richtung herein, aus der die Maus kommt. Die übrigen Zeilen treten zurück. Ein Klick führt per Seitenübergang zur Fallstudie, oft wächst das Vorschaubild dabei zum Hero der Detailseite.", "warum_es_wirkt": "Die Liste liest sich wie das Inhaltsverzeichnis eines Buches: seriös, schnell zu überfliegen, viele Projekte auf wenig Raum. Das Bild kommt erst, wenn Interesse da ist. Das macht neugierig, ohne die Seite zu überladen.", "wann_einsetzen": "Portfolios mit vielen Projekten, Studios, Architekturbüros, Fotografen, Archive. Auch für Journal- und Blogübersichten.", "wann_nicht": "Wenn Bilder das Hauptargument sind und viele Besucher am Telefon kommen, wo es keinen Hover gibt. Dann gehören Daumenbilder fest in die Zeilen. Bei sehr wenigen Projekten (zwei oder drei) wirkt die Liste leer.", "varianten": [ "Bild folgt dem Zeiger mit Lerp und Rotation", "Feste Vorschaufläche, das Bild wechselt per Reveal", "Zeile klappt beim Hover auf und zeigt einen Bildstreifen", "Bildspur: mehrere Bilder bleiben als Trail hinter dem Zeiger", "Index als Overlay über der aktuellen Seite" ], "umsetzung": "Liste als