Escena 01
Escena 02
Escena 03
Escena 04
Reconstrucción de un patrón de pestañas: sin hacer clic, al pasar el ratón por una pestaña se selecciona, crece para mostrar su descripción y el panel de la derecha cambia de imagen. Y la pestaña activa se encastra en el panel. Pasa el ratón, usa el tabulador o toca.
mouseenter (o con el foco del teclado). No hace falta clic. Siempre hay una activa, así la altura total no salta.grid-template-rows: 0fr a 1fr. Es la forma limpia de animar de "cerrado" a "alto automático" sin números mágicos, y acepta la curva de muelle.opacity. Al activar una pestaña se hace un fundido cruzado a su escena.radial-gradient con un cuarto mordido) suavizan la unión arriba y abajo: por eso parece una sola pieza y no un rectángulo pegado.linear() muestreando la ecuación. El sobrepaso aquí es pequeño (≈1.5 %): un toque de vida, no un rebote marcado.Material de clase. Estructura, geometría, colores, escenas y código propios; el patrón de interacción está reconstruido a partir de la observación de un componente de terceros, sin reutilizar sus archivos ni sus imágenes.