Actúa como un Ingeniero de Frontend Senior y Diseñador Creat...

Prompt

Actúa como un Ingeniero de Frontend Senior y Diseñador Creativo. Tu objetivo es programar una landing page completa en un único archivo HTML autocontenido (con CSS en <style> y JS en <script>). La página debe servir como el portfolio de un estudio de diseño digital y debe girar en torno a una simulación física interactiva en tiempo real utilizando la API de Canvas de HTML5 (o Matter.js si consideras que optimiza el rendimiento crítico). La página debe ser visualmente impactante, moderna (estética cyberpunk refinada o modo oscuro abstracto) y completamente responsiva. ### 1. REQUISITOS TÉCNICOS Y ARQUITECTURA * **Entorno:** Código limpio en un solo archivo. No se permiten dependencias externas excepto Matter.js si decides usar un motor existente. Si usas Vanilla JS Canvas, debes implementar tu propio bucle de física (vectores, aceleración, gravedad, fricción y colisiones básicas). * **Rendimiento:** Optimizado con `requestAnimationFrame`. La simulación debe mantener 60 FPS estables con al menos 300 partículas en pantalla o 50 cuerpos rígidos interconectados. Implementa pooling de objetos si es necesario para evitar el Garbage Collector. * **Responsividad:** El lienzo de Canvas debe adaptarse dinámicamente al redimensionar la ventana (`window.resize`) escalando los vectores físicos proporcionalmente sin reiniciar la simulación de manera abrupta. ### 2. MECÁNICAS DE FÍSICA Y DINÁMICA (El Núcleo) El área del Canvas ocupará todo el fondo (background) de la sección Hero. Debe reaccionar a los siguientes estímulos: * **Gravedad Dinámica:** La gravedad por defecto es hacia abajo, pero debe cambiar de dirección basándose en la orientación del dispositivo (DeviceOrientation API) o mediante un control UI que permita alterar el vector de gravedad con el ratón. * **Interacción del Cursor:** El cursor del ratón debe actuar como una fuerza de atracción (agujero negro) cuando se hace clic y de repulsión (viento expansivo) al moverlo rápidamente (calculando el delta de la velocidad del ratón). * **Colisiones e Inercia:** Los elementos físicos (círculos o polígonos que representan "proyectos" o "tecnologías") deben colisionar entre sí de forma elástica y rebotar contra los límites invisibles del texto de la interfaz (la tipografía principal de la página debe actuar como un obstáculo sólido en el mundo físico). ### 3. INTERFAZ DE USUARIO Y CAPA VISUAL (Eye-Catching) * **Estilo Visual:** Fondo oscuro profundo. Los elementos del Canvas deben usar gradientes lineales y efectos de brillo (glow) mediante `shadowBlur` de Canvas o filtros CSS aplicados al contenedor. * **Integración UI/UX:** Sobre el Canvas, dibuja una interfaz limpia: un menú de navegación minimalista, un titular principal con tipografía bold impactante, y un panel flotante de "Control de Física". * **Panel de Control Activo:** Este panel de la interfaz de usuario debe permitir al usuario modificar en tiempo real mediante sliders u opciones: * Magnitud de la gravedad. * Coeficiente de restitución (rebote/elasticidad). * Viscosidad del entorno (fricción del aire). * Alternar el modo de renderizado (p. ej., cambiar entre ver cuerpos sólidos o un modo de visualización de vectores/fuerzas). ### 4. RESTRICCIONES DE ENTREGA * Genera código de producción real, completo y completamente funcional. * No omitas secciones con comentarios de tipo "// El código de las colisiones va aquí". * No incluyas explicaciones previas ni posteriores, entrega directamente el bloque de código HTML.

A system prompt was added to support web rendering