Proyectos seleccionados
Liste de projets avec aperçu flottant
Au survol de chaque projet, une carte d'aperçu suit le curseur avec inertie et s'incline selon le mouvement.
Réglages
Code
<div class="uv-mhr"><p class="hd">Projets choisis</p><ul><li><a href="#" style="--a:#f472b6;--b:#7c3aed" data-l="A"><b>Aurora</b><span>Identité</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>Emballage</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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Un index de portfolio dans le style des studios de design. Les grands noms de projets forment une liste réglée avec discipline et année, et au passage du pointeur une carte colorée apparaît près du curseur, le suit avec une inertie douce et s'incline dans le sens du mouvement. Les autres lignes s'estompent pour mettre le projet actif en avant.
Le focus clavier affiche le même aperçu à côté de la ligne, et la carte est masquée aux technologies d'assistance car les liens décrivent déjà le travail. Remplace les dégradés par de vraies vignettes et relie tes études de cas.