Tutoriales
Claude Opus 5.5: corregir movimiento sin ocultar el producto
Pide a Claude Opus 5.5 que la página sea completa en estado estático y añada movimiento donde explique un cambio.
Pide a Claude Opus 5.5 que la página sea completa en estado estático y añada movimiento donde explique un cambio. Precio, especificaciones y compra no deberían esperar a una animación de desplazamiento. Corrige primero la visibilidad inicial: acortar la animación no soluciona el contenido oculto cuando falla el script.
Esta es una propuesta de implementación, no un resultado medido de Opus. La guía oficial ayuda a concretar entregable y criterios. Proporciona HTML, CSS y JavaScript para que el modelo identifique quién controla la visibilidad.
Distingue tres funciones
| Movimiento | Función útil | Alternativa estática |
|---|---|---|
| Cambio de muestra de color | Mostrar otra selección | Etiqueta seleccionada e imagen inmediata |
| Despiece del producto | Explicar componentes | Diagrama con etiquetas |
| Entrada al desplazar | Decoración | Contenido visible en orden documental |
Una conversación de desarrolladores recoge frustración ante entradas repetidas que retrasan la lectura. Es experiencia cualitativa, no evidencia de que una duración concreta mejore conversiones.
Inventaría disparador, elemento, estado inicial/final y comportamiento sin JavaScript. Busca `opacity: 0`, transformaciones fuera de pantalla o altura cero que persisten hasta ejecutarse un observador. Un enlace en el DOM puede seguir siendo invisible.
Parte de contenido visible
Este ejemplo deja visible la tarjeta y añade una entrada breve solo si no se solicita reducir movimiento. Distancia y duración son decisiones ilustrativas, no umbrales universales.
```css
.product-card {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: no-preference) {
.product-card {
animation: product-enter 180ms ease-out both;
}
@keyframes product-enter {
from { opacity: 0.85; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
}
La [referencia de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) explica esta preferencia. CSS no detiene por sí solo un bucle JavaScript o vídeo automático. Revisa también sus controladores con la misma preferencia.
Evita poner globalmente todas las duraciones a cero. Puede haber código esperando un evento para mostrar contenido o limpiar estado. La ruta estática necesita un estado completado explícito, cuya finalización se ejecute una sola vez.
## Instrucción de reparación
```text
Revisa HTML, CSS y JavaScript adjuntos. Conserva texto, hechos del producto, enlaces y orden documental.
Enumera cada animación con disparador, estados inicial/final y comportamiento si falla JavaScript o se activa movimiento reducido.
Haz visibles y utilizables precios, especificaciones y compra en el estado base. Añade decoración solo para no-preference. Ofrece diagramas estáticos con los mismos hechos para movimientos explicativos.
Revisa por separado CSS, líneas temporales JavaScript, bucles requestAnimationFrame y reproducción automática de vídeo. No afirmes que una media query resuelve todo.
Elimina dependencias de eventos de animación para revelar información esencial. La limpieza y finalización deben ejecutarse exactamente una vez en la ruta estática.
Entrega el parche mínimo y una matriz: movimiento normal, reducido antes de cargar, cambio de preferencia durante la sesión, JavaScript desactivado, teclado y pantalla estrecha.
No rediseñes toda la página ni prometas conversiones.Prueba también la alternativa
Activa movimiento reducido antes de abrir la página: la información y acciones deben estar disponibles inmediatamente. Cambia la preferencia con la página abierta y comprueba que no quedan tarjetas semitransparentes ni diagramas a medio abrir.
Desactiva JavaScript y recarga. La información principal debe seguir legible aunque un selector avanzado necesite una alternativa sencilla. Navega con Tab: el efecto de entrada no debe esconder el control enfocado. En pantalla estrecha, las etiquetas estáticas deben conservarse y la comparación esencial no exigir arrastre horizontal.
Captura estados animados y estáticos. Marca cada prueba como realizada, fallida o pendiente: código generado con una explicación convincente no es una prueba de navegador superada.
Prepara imágenes para ambas rutas
Crea una imagen completa o un diagrama estático en Panelly Studio como base legible. El movimiento puede complementar la explicación después. No se afirma integración directa con Opus ni exportación de este código desde Panelly.
Consulta revisiones de landing pages para estructura y vídeos promocionales desde capturas para una pieza renderizada independiente.
Preguntas frecuentes
¿Movimiento reducido significa una página vacía?
No. Conserva información y acciones, sustituyendo movimiento por un estado estático útil.
¿Basta con acelerar la animación?
No repara scripts fallidos ni garantiza tolerancia al movimiento restante. Prueba la alternativa por separado.
