Para este Prompt Tuesday #11, le pedimos a la IA que genere una visualización impresionante en HTML/JavaScript: un globo 3D en rotación donde las principales bolsas mundiales se iluminan según su estado de apertura.
Entre dos desarrollos en Linkeum, a veces surgen ideas que inmediatamente dan ganas de probar hasta dónde puede llegar la IA. Para este Prompt Tuesday #11, el objetivo era ambicioso: pedirle a Qwen que generara una página en HTML/JavaScript capaz de mostrar un globo 3D en rotación, con las bolsas más grandes del mundo representadas por puntos luminosos que cambian de estado según si el mercado está abierto o cerrado.
La idea era sencilla sobre el papel, pero muy visual en su ejecución. Cada centro financiero debía aparecer como un punto verde pulsante cuando la bolsa está abierta, o rojo cuando está cerrada, con la posibilidad de hacer clic en él para mostrar una pequeña ventana con su información principal.
El prompt utilizado en Qwen
Como suele ocurrir en este tipo de generación, el prompt se redactó en inglés. Los modelos de generación de código generalmente entienden mejor las instrucciones técnicas detalladas en este idioma, especialmente cuando se trata de combinar la estructura HTML, la lógica de JavaScript, el renderizado visual y las interacciones del usuario.
Act as an expert Front-End Developer and Data Visualization specialist. Write a modern, responsive single-page HTML file that renders an interactive 3D globe using the
globe.gllibrary (andthree.js) via CDN, along with Tailwind CSS for styling.Here are the exact requirements:
- The Globe: Render a beautiful, dark-themed, highly detailed 3D globe. It should auto-rotate slowly.
- The Data: Plot the top 10 major world stock exchanges (e.g., NYSE, LSE, Tokyo, Shanghai, Euronext Paris, etc.) using their real latitude and longitude.
- Market Status Logic: Write JavaScript logic that uses the current UTC time to determine if each market is currently OPEN or CLOSED based on their real-world trading hours.
- Visual Markers: Represent each exchange on the globe as a glowing, pulsating point. Make the point Green and pulsating if the market is OPEN, and Red and pulsating if the market is CLOSED.
- Interactivity: When the user clicks on a point:
- Stop the globe's auto-rotation.
- Open a sleek, dark-themed HTML pop-up/tooltip floating above the globe displaying the Exchange Name, City, Local Time, and Status (Open/Closed in green/red text).
- Clicking elsewhere on the globe should close the pop-up and resume rotation.
- UI/Aesthetics: Give the page a premium, high-end fintech aesthetic (dark mode, glassmorphism for the pop-up, sleek typography).
Output the complete, fully functional HTML, CSS, and JS code in a single file so I can copy-paste it into an
index.htmlfile and run it immediately in my browser.
Por qué este prompt fue interesante
Lo que me gusta de este prompt es que no solo pide "un globo en 3D". Impone al mismo tiempo un renderizado visual, lógica de negocio, datos geográficos y comportamiento interactivo, lo que realmente empuja a la IA a producir algo cercano a un mini-producto en lugar de un simple ejemplo de código.
En otras palabras, no solo estamos probando la capacidad de Qwen para escribir JavaScript. También estamos probando su capacidad para comprender una intención de diseño orientada a las finanzas, con una interfaz que ya evoca un panel de control premium.
Algunos retoques con Gemini
El primer resultado obtenido con Qwen ya era muy prometedor. Podíamos ver los puntos, la animación, la interacción al hacer clic, y de inmediato sentimos que estábamos muy cerca de un renderizado espectacular.
Sin embargo, hubo que hacer algunos ajustes para estabilizar la visualización y mejorar la puesta en escena visual. Con la ayuda de Gemini, retocamos algunos detalles técnicos y de presentación, en particular sobre el renderizado del globo, el encuadre inicial, la legibilidad de los continentes y el comportamiento de la cámara al cargar.
Un resultado asombroso
El resultado final es, sinceramente, asombroso. Obtenemos un globo 3D elegante, vivo e interactivo, con puntos luminosos que dan inmediatamente la impresión de una sala de operaciones mundial.
Es exactamente el tipo de experiencia que llama la atención en los primeros segundos. Y, sobre todo, no es solo un gadget visual: detrás de esta animación, ya se puede imaginar un caso de uso real de producto para seguir de forma intuitiva los principales mercados financieros.
¿Y ahora qué?
Esta es probablemente la parte más interesante de este Prompt Tuesday #11. El renderizado es lo suficientemente convincente como para darme ganas de ir más allá de una simple entrada de blog.
Intentaré integrar esta idea más adelante en Linkeum, en la sección de Finanzas. Con una capa de datos real y algunos refinamientos adicionales, este globo interactivo podría convertirse en un excelente elemento de "efecto guau" para los usuarios.
