Proyectos seleccionados
Lista de proyectos con vista flotante
Al pasar por cada proyecto aparece una tarjeta que sigue al cursor con inercia y se inclina al moverte.
Ajustes
Código
<div class="uv-mhr"><p class="hd">Proyectos seleccionados</p><ul><li><a href="#" style="--a:#f472b6;--b:#7c3aed" data-l="A"><b>Aurora</b><span>Marca</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>Envases</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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Un índice de portfolio al estilo de los estudios de diseño. Los nombres grandes de los proyectos van en una lista con líneas, disciplina y año, y al pasar el puntero por uno aparece junto al cursor una tarjeta de color que lo sigue con inercia suave y se inclina hacia donde te mueves. Las demás filas se apagan para destacar el proyecto activo.
El foco de teclado muestra la misma vista junto a la fila, y la tarjeta se oculta a las tecnologías de apoyo porque los enlaces ya describen el trabajo. Cambia los degradados por miniaturas reales y enlaza tus casos de estudio.