Proyectos seleccionados
Project list with floating preview
Hovering each project shows a preview card that follows the cursor with inertia and tilts as you move.
Settings
Code
<div class="uv-mhr"><p class="hd">Selected work</p><ul><li><a href="#" style="--a:#f472b6;--b:#7c3aed" data-l="A"><b>Aurora</b><span>Branding</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>Packaging</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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Microinteractions
See all MicrointeractionsWhere to use it
A portfolio index in the style of design studios. Large project names sit in a ruled list with discipline and year, and when the pointer passes over one, a colored preview card appears next to the cursor, trails it with smooth inertia and leans in the direction of movement. The other rows fade back so the active project stands out.
Keyboard focus shows the same preview beside the row, and the card is hidden from assistive technology because the links already describe the work. Replace the gradients with real thumbnails and connect the links to your case studies.