design-taste-frontend-v1

Competencia en front-end de alto nivel

1. CONFIGURACIÓN BÁSICA ACTIVA

• VARIACIÓN_DE_DISEÑO: 8 (1 = Simetría perfecta, 10 = Caos artístico)
• MOTION_INTENSITY: 6 (1 = Estático/Sin movimiento, 10 = Cinemático/Física mágica)
• VISUAL_DENSITY: 4 (1 = Galería de arte/Espacioso, 10 = Cabina de piloto/Datos apretados)

Instrucción de IA: La línea de base estándar para todas las generaciones está estrictamente fijada en estos valores (8, 6, 4). No pidas al usuario que edite este archivo. Por lo demás, escucha SIEMPRE al usuario: adapta estos valores de forma dinámica en función de lo que solicite explícitamente en sus mensajes de chat. Utiliza estos valores de referencia (o los modificados por el usuario) como variables globales para controlar la lógica específica de las secciones 3 a 7.

2. ARQUITECTURA Y CONVENCIONES POR DEFECTO

A menos que el usuario especifique explícitamente una pila diferente, respeta estas restricciones estructurales para mantener la coherencia:

• VERIFICACIÓN DE DEPENDENCIAS [OBLIGATORIO]: Antes de importar CUALQUIER biblioteca de terceros (p. ej., framer-motion, lucide-react, zustand), DEBES comprobar el archivo package.json. Si falta el paquete, DEBES indicar el comando de instalación (p. ej., npm install nombre-del-paquete) antes de proporcionar el código. Nunca des por sentado que una biblioteca existe.
• Marco de trabajo e interactividad: React o Next.js. Por defecto, se utilizarán componentes de servidor (RSC).
  • SEGURIDAD DE LOS RSC: El estado global SOLO funciona en componentes de cliente. En Next.js, envuelve los proveedores en un componente «use client ».
  • AISLAMIENTO DE LA INTERACTIVIDAD: Si las secciones 4 o 7 (Movimiento/Liquid Glass) están activas, el componente específico de la interfaz de usuario interactiva DEBE extraerse como un componente hoja aislado con «use client» en la parte superior. Los componentes de servidor deben renderizar exclusivamente diseños estáticos.
• Gestión del estado: Utiliza «useState» y«useReducer» locales para la interfaz de usuario aislada. Utiliza el estado global estrictamente para evitar el «prop-drilling» profundo.
• Política de estilo: Utiliza Tailwind CSS (v3/v4) para el 90 % del estilo.
  • BLOQUEO DE VERSIÓN DE TAILWIND: Comprueba primero el archivo package.json. No utilices la sintaxis de la v4 en proyectos de la v3.
  • PROTECCIÓN DE CONFIGURACIÓN DE T4: Para la v4, NO utilices el plugin tailwindcss en postcss.config.js. Utiliza @tailwindcss/postcss o el plugin de Vite.
• POLÍTICA CONTRA LOS EMOJIS [CRÍTICO]: NUNCA utilices emojis en el código, el marcado, el contenido de texto o el texto alternativo. Sustituye los símbolos por iconos de alta calidad (Radix, Phosphor) o primitivas SVG limpias. Los emojis están PROHIBIDOS.
• Responsividad y espaciado:
  • Estandariza los puntos de ruptura (sm, md, lg, xl).
  • Limita los diseños de página utilizando max-w-[1400px] mx-auto o max-w-7xl.
  • Estabilidad de la ventana gráfica [CRÍTICO]: NUNCA utilices «h-screen» para secciones «Hero» a altura completa. Utiliza SIEMPRE «min-h-[100dvh]» para evitar saltos catastróficos en el diseño en navegadores móviles (Safari de iOS).
  • Grid en lugar de cálculos Flex: NUNCA utilices cálculos porcentuales complejos con Flexbox (w-[calc(33%-1rem)]). Utiliza SIEMPRE CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6) para obtener estructuras fiables.
• Iconos: DEBES utilizar exactamente @phosphor-icons/react o @radix-ui/react-icons como rutas de importación (comprueba la versión instalada). Estandariza el ancho de trazo (strokeWidth) a nivel global (por ejemplo, utiliza exclusivamente 1,5 o 2,0).

3. DIRECTRICES DE INGENIERÍA DE DISEÑO (Corrección de sesgos)

Los modelos de lenguaje grande (LLM) presentan sesgos estadísticos hacia patrones clichés específicos de la interfaz de usuario. Crea de forma proactiva interfaces de alta calidad utilizando estas reglas de ingeniería:

Regla 1: Tipografía determinista

• Visualización/Titulares: Por defecto, text-4xl md:text-6xl tracking-tighter leading-none.
  • ANTI-SLOP: Evita el uso de Inter para crear un ambiente «premium» o «creativo». Impulsa un carácter único utilizando Geist, Outfit, Cabinet Grotesk o Satoshi.
  • NORMA TÉCNICA DE INTERFAZ DE USUARIO: Las fuentes con serifas están estrictamente PROHIBIDAS en las interfaces de usuario de paneles de control y software. En estos contextos, utiliza exclusivamente combinaciones de fuentes sans-serif de alta gama (Geist + Geist Mono o Satoshi + JetBrains Mono).
• Cuerpo/Párrafos: Por defecto, text-base text-gray-600 leading-relaxed max-w-[65ch].

Regla 2: Calibración del color

• Restricción: máximo 1 color de acento. Saturación < 80 %.
• PROHIBICIÓN DE LILA: La estética «morado/azul IA» está estrictamente PROHIBIDA. Nada de botones morados brillantes ni degradados de neón. Utiliza bases absolutamente neutras (Zinc/Slate) con acentos únicos y de alto contraste (p. ej., Emerald, Electric Blue o Deep Rose).
• COHERENCIA DE COLORES: Mantén una única paleta en todo el resultado final. No alternes entre grises cálidos y fríos dentro del mismo proyecto.

Regla 3: Diversificación del diseño

• TENDENCIA ANTI-CENTRALIZACIÓN: Las secciones Hero/H1 centradas están estrictamente PROHIBIDAS cuando LAYOUT_VARIANCE > 4. Impulsa estructuras de «pantalla dividida» (50/50), «contenido alineado a la izquierda/elemento alineado a la derecha» o «espacio en blanco asimétrico».

Regla 4: Materialidad, sombras y «uso excesivo de tarjetas»

• REFUERZO DEL PANEL DE CONTROL: Para VISUAL_DENSITY > 7, los contenedores de tarjetas genéricos quedan estrictamente PROHIBIDOS. Utiliza agrupaciones lógicas mediante border-t, divide-y o espacio negativo puro. Las métricas de datos deben «respirar» sin quedar encajonadas, a menos que la elevación (z-index) sea funcionalmente necesaria.
• Aplicación: Utilice tarjetas ÚNICAMENTE cuando la elevación transmita jerarquía. Cuando se utilice una sombra, tiñala del tono del fondo.

Regla 5: Estados interactivos de la interfaz de usuario

• Generación obligatoria: Los modelos de lenguaje grande (LLM) generan de forma natural estados «estáticos» de éxito. DEBES implementar ciclos de interacción completos:
  • Carga: indicadores de carga esqueléticos que se ajusten a los tamaños del diseño (evita los indicadores circulares genéricos).
  • Estados vacíos: Estados vacíos con una composición atractiva que indiquen cómo rellenar los datos.
  • Estados de error: Notificación de errores clara e integrada (p. ej., en formularios).
  • Retroalimentación táctil: Al activarse, utiliza -translate-y-[1px] o scale-[0.98] para simular una pulsación física que indique éxito o acción.

Regla 6: Patrones de datos y formularios

• Formularios: La etiqueta DEBE situarse encima del campo de entrada. El texto de ayuda es opcional, pero debe estar presente en el marcado. El texto de error debe ir debajo del campo de entrada. Utiliza un espaciado estándar de gap-2 para los bloques de entrada.

4. PROACTIVIDAD CREATIVA (Implementación contra la chapuza)

Para combatir activamente los diseños genéricos de IA, implementa de forma sistemática estos conceptos de programación de alto nivel como punto de partida:

• Refracción «Liquid Glass»: cuando se requiera el «glassmorphism», ve más allá de «background-blur». Añade un borde interior de 1 píxel (border-white/10) y una sombra interior sutil (shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]) para simular la refracción física en los bordes.
• Microfísica magnética (si MOTION_INTENSITY > 5): implementa botones que se desplace ligeramente hacia el cursor del ratón. CRÍTICO: NUNCA utilices useState de React para animaciones magnéticas al pasar el cursor o animaciones continuas. Utiliza EXCLUSIVAMENTE useMotionValue y useTransform de Framer Motion fuera del ciclo de renderizado de React para evitar una caída del rendimiento en dispositivos móviles.
• Microinteracciones perpetuas: cuando MOTION_INTENSITY > 5, incorpora microanimaciones continuas e infinitas (Pulse, Typewriter, Float, Shimmer, Carousel) en componentes estándar (avatares, puntos de estado, fondos). Aplica la física de muelle premium (type: «spring», stiffness: 100, damping: 20) a todos los elementos interactivos; nada de suavizado lineal.
• Transiciones de diseño: Utiliza siempre las propiedades layout y layoutId de Framer Motion para lograr un reordenamiento, un cambio de tamaño y transiciones de elementos compartidos fluidos entre los distintos estados.
• Orquestación escalonada: No montes listas ni cuadrículas de forma instantánea. Utiliza staggerChildren (Framer) o la cascada CSS (animation-delay: calc(var(--index) * 100ms)) para crear revelaciones secuenciales en cascada. IMPORTANTE: Para staggerChildren, el componente padre (variantes) y los hijos DEBEN residir en el mismo árbol de componentes del cliente. Si los datos se recogen de forma asíncrona, pasa los datos como props a un contenedor centralizado de Motion padre.

5. MEDIDAS DE SEGURIDAD DE RENDIMIENTO

• Coste del DOM: Aplica filtros de grano o ruido exclusivamente a pseudoelementos fijos con «pointer-events-none» (por ejemplo, ` fixed inset-0 z-50 pointer-events-none`) y NUNCA a contenedores que se desplazan, para evitar repintados continuos de la GPU y la degradación del rendimiento en dispositivos móviles.
• Aceleración por hardware: Nunca animes las propiedades top, left, width o height. Anima exclusivamente mediante transform y opacity.
• Restricción del índice Z: NUNCA utilices de forma arbitraria valores z-50 o z-10 sin motivo justificado. Utiliza los índices Z estrictamente para contextos de capas sistémicas (barras de navegación fijas, ventanas modales, superposiciones).

6. REFERENCIA TÉCNICA (Definiciones de los diales)

VARIACIÓN DE DISEÑO (Nivel 1-10)

• 1-3 (Previsible): Justificación centralizada con Flexbox, cuadrículas simétricas estrictas de 12 columnas, rellenos iguales.
• 4-7 (Desplazamiento): Utiliza «margin-top: -2rem» para superposición, relaciones de aspecto variadas en las imágenes (p. ej., 4:3 junto a 16:9), encabezados alineados a la izquierda sobre datos alineados al centro.
• 8-10 (Asimétrico): diseños tipo «masonry», CSS Grid con unidades fraccionarias (p. ej., grid-template-columns: 2fr 1fr 1fr), zonas vacías muy amplias (padding-left: 20vw).
• SUSTITUCIÓN EN MÓVIL: Para los niveles 4-10, cualquier diseño asimétrico en dispositivos de tamaño superior a md: DEBE recurrir de forma agresiva a un diseño estricto de una sola columna (w-full, px-4, py-8) en ventanas gráficas < 768px para evitar el desplazamiento horizontal y la ruptura del diseño.

INTENSIDAD DE MOVIMIENTO (Niveles 1-10)

• 1-3 (Estático): Sin animaciones automáticas. Solo estados :hover y :active de CSS.
• 4-7 (CSS fluido): Utiliza transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1). Utiliza cascadas de animation-delay para las cargas progresivas. Céntrate estrictamente en transform y opacity. Utiliza will-change: transform con moderación.
• 8-10 (Coreografía avanzada): Revelaciones complejas activadas por el desplazamiento o efecto de paralaje. Utiliza los hooks de Framer Motion. NUNCA utilices window.addEventListener('scroll').

VISUAL_DENSITY (Nivel 1-10)

• 1-3 (Modo Galería de Arte): Mucho espacio en blanco. Grandes espacios entre secciones. Todo da una sensación de gran calidad y limpieza.
• 4-7 (Modo «Aplicación diaria»): Espaciado normal para aplicaciones web estándar.
• 8-10 (Modo «cabina de mando»): Rellenos mínimos. Sin recuadros de tarjetas; solo líneas de 1 píxel para separar los datos. Todo está muy compacto. Obligatorio: utiliza Monospace (font-mono) para todos los números.

7. INDICACIONES DE IA (Patrones prohibidos)

Para garantizar un resultado de alta calidad y no genérico, DEBES evitar estrictamente estas características comunes del diseño de IA, a menos que se soliciten explícitamente:

Aspectos visuales y CSS

• NO se permiten efectos de neón ni resplandores externos: No utilices resplandores predeterminados de «box-shadow» ni resplandores automáticos. Utiliza bordes internos o sombras sutiles con tinte.
• NO al negro puro: Nunca utilices #000000. Utiliza «Off-Black», «Zinc-950» o «Charcoal».
• NO a los acentos sobresaturados: Desatura los acentos para que combinen con elegancia con los tonos neutros.
• NO a los textos con degradados excesivos: No utilices degradados de relleno de texto para encabezados grandes.
• NO cursores de ratón personalizados: están pasados de moda y perjudican el rendimiento y la accesibilidad.

Tipografía

• NO Inter Font: Prohibida. Utiliza Geist, Outfit, Cabinet Grotesk o Satoshi.
• NO a los H1 de tamaño excesivo: El primer encabezado no debe llamar demasiado la atención. Controla la jerarquía con el peso y el color, no solo con un tamaño desmesurado.
• Restricciones sobre las fuentes serif: Utiliza fuentes serif ÚNICAMENTE para diseños creativos o editoriales. NUNCA utilices fuentes serif en paneles de control limpios.

Diseño y espaciado

• Alinea y espacia a la perfección: Asegúrate de que el relleno y los márgenes sean matemáticamente perfectos. Evita los elementos flotantes con huecos extraños.
• NO a los diseños de tarjetas en 3 columnas: Queda PROHIBIDA la disposición genérica de «3 tarjetas iguales en horizontal». Utiliza en su lugar un diseño en zigzag de 2 columnas, una cuadrícula asimétrica o un enfoque de desplazamiento horizontal.

Contenido y datos (el «efecto Jane Doe»)

• NO se permiten nombres genéricos: «John Doe», «Sarah Chan» o «Jack Su» están prohibidos. Utiliza nombres muy creativos y que suenen realistas.
• NO a los avatares genéricos: NO utilices los iconos de usuario estándar SVG «egg» o Lucide como avatares. Utiliza marcadores de posición fotográficos creativos y creíbles o un estilo específico.
• NO a los números falsos: Evita resultados predecibles como el 99,99 %, el 50 % o números de teléfono básicos (1234567). Utiliza datos orgánicos y desordenados (47,2 %, +1 (312) 847-1928).
• NO a los nombres cutres de startups: «Acme», «Nexus», «SmartFlow». Inventa nombres de marca de calidad y contextuales.
• NO utilices palabras de relleno: evita los clichés de la redacción con IA como «Elevate», «Seamless», «Unleash» o «Next-Gen». Utiliza verbos concretos.

Recursos y componentes externos

• NO enlaces rotos a Unsplash: No utilices Unsplash. Utiliza marcadores de posición absolutos y fiables como https://picsum.photos/seed/{random_string}/800/600 o avatares SVG para la interfaz de usuario.
• Personalización de shadcn/ui: Puedes utilizar shadcn/ui, pero NUNCA en su estado genérico por defecto. DEBES personalizar los radios, los colores y las sombras para que se ajusten a la estética de alta gama del proyecto.
• Limpieza lista para producción: El código debe ser extremadamente limpio, visualmente impactante, memorable y meticulosamente pulido en cada detalle.

8. EL ARSENAL CREATIVO (Inspiración de alta gama)

No recurras por defecto a una interfaz de usuario genérica. Aprovecha esta biblioteca de conceptos avanzados para garantizar que el resultado sea visualmente impactante y memorable. Cuando sea apropiado, utiliza GSAP (ScrollTrigger/Parallax) para narrativas de desplazamiento complejas o ThreeJS/WebGL para animaciones 3D/Canvas, en lugar de movimientos CSS básicos. IMPORTANTE: Nunca mezcles GSAP/ThreeJS con Framer Motion en el mismo árbol de componentes. Utiliza por defecto Framer Motion para las interacciones de la interfaz de usuario y Bento. Utiliza GSAP/ThreeJS EXCLUSIVAMENTE para narrativas de desplazamiento aisladas a página completa o fondos de lienzo, envueltos en bloques de limpieza useEffect estrictos.

El paradigma estándar del «Hero»

• Deja de centrar el texto sobre una imagen oscura. Prueba con secciones «Hero» asimétricas: texto alineado limpiamente a la izquierda o a la derecha. El fondo debe presentar una imagen relevante y de alta calidad con un sutil fundido estilístico (oscureciéndose o aclarándose con elegancia hacia el color de fondo, dependiendo de si se trata del modo claro u oscuro).

Navegación y menús

• Ampliación del Dock de Mac OS: barra de navegación en el borde; los iconos se redimensionan de forma fluida al pasar el cursor por encima.
• Botón magnético: botones que se atraen físicamente hacia el cursor.
• Menú «Gooey»: los subelementos se desprenden del botón principal como un líquido viscoso.
• Isla dinámica: un componente de interfaz de usuario con forma de pastilla que se transforma para mostrar el estado o las alertas.
• Menú radial contextual: un menú circular que se expande exactamente en las coordenadas del clic.
• Marcación rápida flotante: un FAB que se despliega formando una línea curva de acciones secundarias.
• Revelación de megamenú: menús desplegables a pantalla completa que muestran contenido complejo con un efecto de desvanecimiento escalonado.

Diseño y cuadrículas

• Cuadrícula Bento: agrupación asimétrica basada en mosaicos (p. ej., el Centro de control de Apple).
• Diseño Masonry: cuadrícula escalonada sin alturas de fila fijas (p. ej., Pinterest).
• Cuadrícula Chroma: Bordes de cuadrícula o mosaicos que muestran sutiles degradados de color en animación continua.
• Desplazamiento con pantalla dividida: Las dos mitades de la pantalla se deslizan en direcciones opuestas al desplazarse.
• Revelación tipo cortina: una sección «Hero» que se abre por la mitad como una cortina al desplazarse.

Tarjetas y contenedores

• Tarjeta con inclinación de paralaje: una tarjeta con inclinación 3D que sigue las coordenadas del ratón.
• Tarjeta con borde de foco: Bordes de tarjeta que se iluminan dinámicamente bajo el cursor.
• Panel «Glassmorphism»: auténtico cristal esmerilado con bordes de refracción interna.
• Tarjeta de lámina holográfica: reflejos iridiscentes de luz arcoíris que cambian al pasar el cursor por encima.
• Pila de deslizamiento tipo Tinder: una pila física de tarjetas que el usuario puede deslizar para eliminarlas.
• Modal con transformación: un botón que se expande de forma fluida hasta convertirse en su propio contenedor de diálogo a pantalla completa.

Animaciones de desplazamiento

• Pila de desplazamiento fija: Tarjetas que permanecen fijas en la parte superior y se apilan físicamente unas sobre otras.
• Secuestro de desplazamiento horizontal: el desplazamiento vertical se traduce en un suave desplazamiento horizontal por la galería.
• Secuencia de desplazamiento «Locomotive»: Secuencias de vídeo o 3D en las que la velocidad de fotogramas está directamente vinculada a la barra de desplazamiento.
• Zoom de paralaje: una imagen de fondo central que se acerca o aleja de forma fluida a medida que te desplazas.
• Trayectoria de progreso de desplazamiento: Líneas vectoriales SVG o rutas que se dibujan a medida que el usuario se desplaza.
• Transición de deslizamiento líquido: Transiciones de página que se deslizan por la pantalla como un líquido viscoso.

Galerías y contenidos multimedia

• Galería «Dome»: una galería en 3D que da la sensación de ser una cúpula panorámica.
• Carrusel Coverflow: Carrusel en 3D con el centro enfocado y los bordes inclinados hacia atrás.
• Cuadrícula de desplazamiento por arrastre: una cuadrícula sin límites que se puede arrastrar libremente en cualquier dirección.
• Control deslizante de imágenes en acordeón: estrechas tiras de imágenes verticales u horizontales que se expanden por completo al pasar el cursor por encima.
• Rastro de imágenes al pasar el cursor: el ratón deja tras de sí un rastro de imágenes que aparecen y se desvanecen.
• Imagen con efecto glitch: Breve distorsión digital con cambio de canales RGB al pasar el cursor por encima.

Tipografía y texto

• Marquee cinética: bandas de texto infinitas que invierten la dirección o aceleran al desplazarse.
• Revelación de máscara de texto: tipografía de gran tamaño que actúa como una ventana transparente sobre un fondo de vídeo.
• Efecto de texto aleatorio: Decodificación de caracteres al estilo «Matríz» al cargar la página o al pasar el cursor por encima.
• Trayectoria circular del texto: Texto curvado a lo largo de una trayectoria circular giratoria.
• Animación de trazo con degradado: Texto contorneado con un degradado que recorre continuamente el trazo.
• Cuadrícula de tipografía cinética: una cuadrícula de letras que se esquivan o giran alejándose del cursor.

Microinteracciones y efectos

• Botón de explosión de partículas: Llamadas a la acción (CTA) que se desintegran en partículas al completarse con éxito.
• Actualización«tirar para refrescar» líquida: Indicadores de recarga en dispositivos móviles que parecen gotas de agua que se desprenden.
• Brillo esquelético: reflejos de luz cambiantes que se desplazan por los recuadros de marcador de posición.
• Botón con detección de dirección al pasar el cursor: el relleno al pasar el cursor entra desde el mismo lado por el que entró el ratón.
• Efecto de onda al hacer clic: ondas visuales que se propagan con precisión desde las coordenadas del clic.
• Dibujo de líneas SVG animadas: vectores que trazan sus propios contornos en tiempo real.
• Fondo con degradado de malla: manchas de color animadas, orgánicas, parecidas a las de una lámpara de lava.
• Profundidad de desenfoque de lente: desenfoque dinámico de las capas de la interfaz de usuario en segundo plano para resaltar una acción en primer plano.

9. EL PARADIGMA «MOTION-ENGINE» DE BENTO

A la hora de crear paneles de control SaaS modernos o secciones de funciones, DEBES utilizar la siguiente arquitectura «Bento 2.0» y su filosofía de movimiento. Esto va más allá de las tarjetas estáticas e impone una estética que combina «la esencia de Vercel con la limpieza de Dribbble», basada en gran medida en la física perpetua.

A. Filosofía de diseño fundamental

• Estética: de alta gama, minimalista y funcional.
• Paleta: Fondo en #f9fafb. Las tarjetas son de color blanco puro (#ffffff) con un borde de 1 px en color border-slate-200/50.
• Superficies: Utiliza rounded-[2.5rem] para todos los contenedores principales. Aplicar una «sombra de difusión» (una sombra muy ligera y de amplia extensión, p. ej., shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]) para crear profundidad sin recargar el diseño.
• Tipografía: Utiliza exclusivamente las fuentes Geist, Satoshi o Cabinet Grotesk. Aplica un espaciado sutil (tracking-tight) a los encabezados.
• Etiquetas: Los títulos y las descripciones deben colocarse fuera y debajo de las tarjetas para mantener una presentación limpia, al estilo de una galería.
• Perfección al píxel: Utiliza un relleno generoso de p-8 o p-10 dentro de las tarjetas.

B. Especificaciones del motor de animación (Perpetual Motion)

Todas las tarjetas deben contener «microinteracciones perpetuas». Utiliza los siguientes principios de Framer Motion:

• Física de resorte: nada de aceleraciones lineales. Utiliza «type: spring», «stiffness: 100» y «damping: 20» para conseguir una sensación de calidad y solidez.
• Transiciones de diseño: Utiliza ampliamente las propiedades layout y layoutId para garantizar que el reordenamiento, el cambio de tamaño y las transiciones de estado de los elementos compartidos se realicen con fluidez.
• Bucles infinitos: Cada tarjeta debe tener un «estado activo» que se repita infinitamente (Pulse, Typewriter, Float o Carousel) para garantizar que el panel de control parezca «vivo».
• Rendimiento: Envuelve las listas dinámicas en y optimízalas para 60 fps. CRÍTICO PARA EL RENDIMIENTO: Cualquier movimiento perpetuo o bucle infinito DEBE memorizarse (React.memo) y aislarse por completo en su propio componente de cliente microscópico. Nunca actives re-renders en el diseño padre.

C. Los arquetipos de 5 tarjetas (especificaciones de microanimaciones)

Implementa estas microanimaciones específicas al construir cuadrículas Bento (p. ej., Fila 1: 3 columnas | Fila 2: 2 columnas divididas 70/30):

1. La lista inteligente: una pila vertical de elementos con un bucle infinito de ordenación automática. Los elementos intercambian posiciones utilizando layoutId, simulando una IA que prioriza tareas en tiempo real.
2. La entrada de comandos: una barra de búsqueda/IA con un efecto de máquina de escribir en varios pasos. Recorre una serie de indicaciones complejas, incluyendo un cursor parpadeante y un estado de «procesamiento» con un degradado de carga brillante.
3. El estado en directo: una interfaz de programación con indicadores de estado que «respiran». Incluye una insignia de notificación emergente que aparece con un efecto de resorte «Overshoot», permanece durante 3 segundos y desaparece.
4. El flujo de datos amplio: un «carrusel infinito» horizontal de fichas de datos o métricas. Asegúrate de que el bucle sea fluido (utilizando x: ["0%", "-100%"]) con una velocidad que resulte natural.
5. La interfaz de usuario contextual (modo de enfoque): una vista de documento que anima el resaltado escalonado de un bloque de texto, seguido de la «aparición flotante» de una barra de herramientas de acción flotante con microiconos.

10. COMPROBACIÓN FINAL PREVIA A LA PUBLICACIÓN

Evalúa tu código según esta matriz antes de generarlo. Este es el último filtro que debes aplicar a tu lógica.

• ¿Se utiliza el estado global de forma adecuada para evitar un «prop-drilling» profundo, en lugar de hacerlo de forma arbitraria?
• ¿Está garantizado el colapso del diseño para móviles (w-full, px-4, max-w-7xl, mx-auto) en diseños con gran variabilidad?
• ¿Las secciones de altura completa utilizan de forma segura min-h-[100dvh] en lugar del h-screen, que presenta errores?
• ¿Las animaciones de `useEffect` contienen funciones de limpieza estrictas?
• ¿Se proporcionan los estados «vacío», «cargando» y «error»?
• ¿Se omiten las tarjetas en favor del espaciado siempre que sea posible?
• ¿Has aislado estrictamente las animaciones perpetuas que consumen muchos recursos de la CPU en sus propios componentes de cliente?