Proyectos seleccionados
Projektliste mit schwebender Vorschau
Beim Überfahren eines Projekts folgt eine Vorschaukarte dem Cursor mit Trägheit und neigt sich in Bewegungsrichtung.
Einstellungen
Code
<div class="uv-mhr"><p class="hd">Ausgewählte Projekte</p><ul><li><a href="#" style="--a:#f472b6;--b:#7c3aed" data-l="A"><b>Aurora</b><span>Marke</span><time>2026</time></a></li><li><a href="#" style="--a:#67e8f9;--b:#0369a1" data-l="B"><b>Brisa</b><span>Web</span><time>2025</time></a></li><li><a href="#" style="--a:#fdba74;--b:#c2410c" data-l="C"><b>Cobre</b><span>Verpackung</span><time>2025</time></a></li><li><a href="#" style="--a:#86efac;--b:#15803d" data-l="D"><b>Delta</b><span>App</span><time>2024</time></a></li></ul><div class="pv" aria-hidden="true"><i></i></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
Ein Portfolio Index im Stil von Designstudios. Große Projektnamen stehen in einer linierten Liste mit Disziplin und Jahr, und fährt der Zeiger darüber, erscheint neben dem Cursor eine farbige Vorschaukarte, die ihm mit sanfter Trägheit folgt und sich in Bewegungsrichtung neigt. Die übrigen Zeilen treten zurück.
Der Tastaturfokus zeigt dieselbe Vorschau neben der Zeile, und die Karte ist für Hilfstechnologien verborgen, weil die Links die Arbeit bereits beschreiben. Ersetze die Verläufe durch echte Vorschaubilder und verlinke deine Fallstudien.