GPT 6 Astra for Computer Use

Crea una página web HTML interactiva completa, en un único archivo, titulada “Laboratorio de Accidentes de Tipografía de Medianoche”. Muestra únicamente el documento HTML terminado, con todo el CSS y JavaScript integrados. Debe abrirse y funcionar directamente en un navegador moderno sin dependencias externas, CDNs, bibliotecas, fuentes, enlaces a imágenes, archivos SVG ni otros recursos. Es una página web adaptable, no una imagen fija de 16:9 ni una composición en canvas; debe adaptarse correctamente a pantallas de escritorio, tabletas y móviles. Construye un simulador táctil experimental de tipografía de plomo en el que el usuario componga una impresión arrastrando bloques individuales de tipos de plomo hasta una hoja central, girándolos y reposicionándolos, y ajustando después la cantidad de tinta, la presión de la prensa y la humedad del papel antes de accionar una enorme palanca mecánica de impresión. El resultado impreso debe responder proceduralmente a esos parámetros: el exceso de tinta provoca sangrado y contadores obstruidos, la poca tinta crea bordes secos y fragmentados, la presión modifica la indentación y la deformación, la humedad aumenta el difuminado y el daño de las fibras del papel, una colocación imperfecta de los tipos crea desregistro, y las impresiones repetidas producen sombras desplazadas e imágenes fantasma. Permite múltiples pasadas de color usando únicamente rojo bermellón, azul ultramar y amarillo ácido, con mezcla realista de sobreimpresión, orden de capas visible, visibilidad por capa, deshacer/rehacer paso a paso y la posibilidad de levantar la esquina del papel para revelar la impresión en evolución. Congela el dramatismo visual principal en torno al instante en que el rodillo de la prensa acaba de elevarse y la impresión terminada está a punto de revelarse. El papel central debe sentirse como un escenario teatral. Organiza bloques tipográficos, rodillos de tinta, pinzas, pasadores de registro, recortes, indicadores y controles en un anillo asimétrico a su alrededor. Usa una base de papel hueso blanquecino y gris plomo, iluminada por una lámpara de trabajo blanca cálida que brilla en diagonal desde la esquina superior izquierda. Representa todo mediante CSS, elementos HTML, Canvas y texturas procedurales, con un estilo tosco de serigrafía física y collage artesanal: bordes rasgados, grano de papel fibroso, pigmento irregular, motas de semitono, metal arañado, manchas de tinta, fragmentos de cinta, ligera perspectiva, registro imperfecto y sombras superpuestas. Evita los degradados brillantes, el estilo SaaS estéril, las tarjetas genéricas, los colores cyberpunk neón, las imágenes fotorrealistas, los emojis, las ilustraciones de stock y la geometría vectorial perfectamente limpia. Incluye un inventario amplio de tipos móviles con letras, signos de puntuación, numerales y varios bloques decorativos. El usuario debe poder arrastrar bloques del inventario al área de composición, seleccionar varios bloques, girarlos mediante controles o atajos de teclado, desplazarlos con las teclas de flecha, eliminarlos o duplicarlos, y editar su contenido textual sin perder el aspecto físico del bloque. Añade guías de ajuste que puedan activarse o desactivarse, pero conserva pequeñas irregularidades manuales. Proporciona estados claros de desplazamiento, activo, seleccionado, deshabilitado y foco. Admite interacción con puntero y táctil, controles de teclado razonables, etiquetas accesibles e indicadores de foco visibles. Crea tres controles táctiles para la cantidad de tinta, la presión y la humedad, cuyos valores actualicen en tiempo real la vista previa del papel, la simulación de texturas, los indicadores, las etiquetas de advertencia y el comportamiento ambiental de la máquina. El sistema debe revelar estados de accidente lúdicos en combinaciones extremas, como explosiones violentas de tinta, letras duplicadas, tipos desplazados, grietas de fibras desgarradas, traqueteo del rodillo y marcas de registro salpicadas, manteniendo la composición legible. Añade un registro compacto del experimento que anote cada impresión y sus parámetros. El usuario debe poder seleccionar un color de pasada, accionar la palanca arrastrándola en un arco convincente, observar un ciclo de prensa breve pero detallado y después despegar el papel. La animación debe incluir resistencia de la palanca, vibración de la máquina, movimiento del rodillo, compresión del papel, motas de polvo, un ligero parpadeo de la lámpara y una pausa de suspense antes de la revelación. Respeta prefers-reduced-motion. Haz que deshacer y rehacer sean realmente funcionales para la colocación, rotación, cambios de parámetros, impresión, pasadas de color y acciones de revelación. Incluye controles de Restablecer, Accidente aleatorio, Volver a entintar, Añadir pasada, Deshacer y Rehacer, además de una indicación concisa de inicio que desaparezca después de la interacción. Prepara la página con un póster parcialmente compuesto e intrigante para que la primera vista sea visualmente rica, pero permite editar todos los elementos importantes. Añade retroalimentación visual sutil parecida a sonidos sin utilizar recursos de audio. Garantiza una textura procedural determinista cuando sea práctico, de modo que deshacer restaure el mismo aspecto. La experiencia debe sentirse ceremonial, artesanal, tensa y traviesamente incontrolable, no meramente decorativa. Da prioridad a los detalles pulidos de interacción, el acoplamiento convincente de los parámetros, los artefactos de impresión procedurales por capas, una temporización de animación refinada y una composición adaptable excelente. Usa HTML semántico y JavaScript vanilla limpio y bien estructurado. La respuesta final debe contener únicamente el documento HTML completo y ejecutable.

Crea una página web HTML interactiva completa y pulida, en un único archivo, titulada “Teatro de Paisaje Sonoro de Ramen de Medianoche”. Muestra únicamente el documento HTML final, con todo el CSS y JavaScript integrados. Debe ejecutarse directamente en un navegador moderno sin paso de compilación ni dependencias externas, bibliotecas, fuentes, imágenes, archivos de audio, recursos CDN, solicitudes de red ni recursos enlazados. Construye una escena interactiva expresiva ambientada en un surrealista local de ramen a medianoche. El objeto central es un único manojo continuo de fideos elásticos, representado con Canvas, SVG o una combinación cuidadosamente integrada de ambos. El manojo de fideos debe atravesar diagonalmente el primer plano y sentirse físicamente tangible: el usuario puede agarrarlo en cualquier punto con el ratón o mediante interacción táctil, arrastrarlo, estirarlo, azotarlo, doblarlo sobre sí mismo y soltarlo. Implementa una física de muelle convincente con inercia, amortiguación, gravedad, múltiples segmentos conectados, respuesta a colisiones y movimiento secundario visible. Mantén la simulación estable incluso durante arrastres agresivos, cambios rápidos de dirección, redimensionamientos de la ventana o interacciones repetidas. Distribuye al menos tres cuencos de ramen distintos y varios ingredientes a lo largo de un arco amplio que atraviese la composición, creando un ritmo visual marcado alrededor del fideo diagonal. Cada cuenco debe tener su propio patrón ilustrado de caldo, identidad cromática, etiqueta y carácter sonoro. Cuando el fideo toque o caiga dentro de un cuenco, activa una respuesta audiovisual sincronizada: un ritmo percusivo único sintetizado con Web Audio API, una ráfaga ascendente de vapor, rociadas de partículas verdes de cebolleta, ondas en el caldo, pequeñas gotas, un ligero temblor de registro de serigrafía y onomatopeyas animadas escritas a mano, de estilo japonés, como “ZURU!”, “PON!”, “JUU!” o “BASHAN!”, creadas con texto estilizado en lugar de fuentes externas. La intensidad de la colisión debe afectar al volumen, el tono, la cantidad de partículas, el tamaño de las ondas, la escala de las letras y la fuerza de la animación. El audio debe comenzar únicamente después de la primera interacción del usuario e incluir un control claro para silenciarlo o activar el sonido. El estado visual culminante debe evocar un fotograma congelado en el que el fideo está dramáticamente estirado en el aire mientras el caldo queda suspendido justo antes de salpicar. Refuerza esto con un control “CONGELAR EL SALPICÓN” y la tecla Space: al entrar en modo congelado debe aplicarse una transición breve y contundente, suspender la escena física sin perder su estado, enfatizar las gotas suspendidas y la tensión del fideo estirado, mostrar una tipografía cinética audaz con aspecto de póster y conservar un sutil brillo procedural en las líneas para que la página siga pareciendo viva. Al pulsar Space o el control de nuevo, la escena debe reanudarse sin interrupciones. Añade un control de restablecimiento, un indicador compacto del estado del sonido y una lectura discreta en directo de “tempo/impacto” impulsada por las colisiones recientes. Los controles de teclado deben poder descubrirse en un pequeño panel de ayuda integrado: Space alterna el congelado, R restablece, M silencia y las teclas de flecha aplican impulsos direccionales al fideo. Usa una combinación visual sofisticada de diseño de póster de serigrafía vintage y animación procedural de líneas. Debe dominar un fondo índigo profundo, interrumpido por la calidez localizada del fuego de los fogones alrededor de los cuencos y los puntos de colisión. Usa colores planos superpuestos —rojo bermellón, amarillo jengibre, verde cebolleta, crema cálida y casi negro— con texturas de semitono, bordes de tinta rugosos, ligero desregistro cromático, sombras gráficas marcadas y líneas de contorno animadas. El resultado debe sentirse artesanal y teatral, no brillante ni fotorrealista. Incluye vapor ambiental sutil, un resplandor parpadeante de los fogones, grano flotante y trazos en movimiento, pero conserva un contraste fuerte y controles legibles. Evita el estilo cyberpunk neón genérico. Haz que la composición responda a pantallas anchas de escritorio, tabletas y móviles; es una página web, así que no fuerces una relación de aspecto fija de 16:9. Adapta fluidamente la posición de los cuencos, la tipografía, los controles, los límites de la simulación y las áreas táctiles sin recortar contenido esencial. Usa eventos de puntero para unificar la interacción con ratón, lápiz y pantalla táctil. Impide el desplazamiento de la página únicamente mientras el usuario manipula activamente el fideo. Respeta prefers-reduced-motion reduciendo la animación ambiental mientras mantienes funcional la interacción principal. Conserva un rendimiento fluido mediante un conjunto eficiente de partículas o límites estrictos de partículas, requestAnimationFrame, renderizado consciente de device-pixel-ratio con un límite de resolución razonable y gestión de coordenadas segura ante redimensionamientos. Requisitos de contenido y acabado: incluye un tratamiento atmosférico del título, una invitación breve de una sola línea a interactuar, tres o más cuencos etiquetados, múltiples ingredientes visualmente diferenciados, palabras sonoras manuscritas contextuales, estados de control pulidos, estilos de foco claros, etiquetas accesibles para los botones y una indicación de interacción discreta que se desvanezca tras el primer uso. La escena inicial debe parecer ya un póster coleccionable terminado antes de cualquier interacción, mientras que el estado activo debe convertirse en un juguete rítmico dinámico con retroalimentación por capas y movimientos emergentes sorprendentes. Restricciones negativas: sin recursos ni dependencias externas; sin URLs de imágenes; sin audio pregrabado; sin frameworks; sin marcadores de posición sin terminar; sin comentarios TODO; sin controles rotos; sin canvas fijo de 16:9; sin interfaz de usuario predeterminada y simple; sin fondo genérico compuesto únicamente por degradados; sin emojis como arte principal; sin exceso de texto explicativo; sin audio de reproducción automática; sin crecimiento incontrolado de partículas; sin física frágil que explote o produzca valores NaN; sin una interacción que funcione únicamente con ratón; y sin ninguna salida fuera del documento HTML completo y único.