Kimi API for Vision-to-Code Generation

Crea una página HTML completa de un solo archivo para un juego arcade de Snake jugable, con todo el CSS y JavaScript incrustados y sin dependencias externas, CDNs, imágenes ni fuentes. Renderiza el tablero en un canvas con una paleta moderna de neón sobre fondo oscuro, movimiento fluido y una suave estela luminosa detrás de la serpiente. Admite controles con las flechas y WASD, además de gestos de deslizamiento en dispositivos táctiles; muestra la puntuación en vivo y un récord persistente, y aumenta gradualmente la velocidad del juego a medida que sube la puntuación. Dispara una pequeña explosión de partículas cada vez que se come comida, muestra una superposición animada de fin de partida con un botón de reinicio y mantén el diseño responsive para que el tablero permanezca centrado y legible tanto en desktop como en móvil.

Crea un único archivo HTML totalmente autónomo (todo el CSS y JavaScript incrustados, absolutamente sin dependencias externas, CDNs, imágenes ni web fonts) que renderice un "terrario digital vivo" interactivo: un frasco de vidrio sellado situado en el centro de la pantalla que contiene una selva tropical en miniatura autosostenible que crece en tiempo real. Al abrirlo en cualquier navegador moderno, debe ejecutarse de inmediato a 60fps sin ningún paso de build. Escena y layout principales: centra la composición de forma simétrica, tratando el frasco de vidrio como el escenario protagonista sobre un fondo oscuro profundo con viñeta (gradiente radial desde un centro suavemente iluminado por musgo que se desvanece hacia bordes casi negros) para que toda la atención recaiga en el frasco. Renderiza todo en un HTML5 Canvas de ventana completa, bajo una capa real de chrome DOM/CSS con glassmorphism: la pared del frasco debe mostrar cualidades genuinas de vidrio — reflejos curvos de refracción, una franja brillante de luz especular en el borde, un sutil desenfoque esmerilado y gotas de condensación dispersas con pequeñas lentes — logradas con gradientes radiales/lineales en capas, backdrop-filter blur, trazos blancos semitransparentes y sombras suaves. Dentro del frasco hay limo húmedo y oscuro en el fondo y una leve niebla volumétrica que deriva lentamente. Las tres capas técnicas que deben apilarse y coexistir (aquí es donde se distinguen los modelos débiles de los fuertes: un modelo débil producirá una imagen estática; uno fuerte hará que todo el frasco esté vivo): 1. Crecimiento recursivo con L-system: enredaderas, frondes de helecho y musgos se generan mediante un L-system / algoritmo de ramificación recursiva y animan su despliegue con el tiempo: los tallos se alargan, las ramas se subdividen, los frondes se desenrollan y las hojas escalan con easing. El crecimiento es orgánico y ligeramente aleatorio por rama (variación de ángulo, afinamiento del grosor, decaimiento de longitud), de modo que no haya dos plantas idénticas al recargar. 2. Sistema de partículas: motas de luz ámbar similares a luciérnagas (decenas) flotan y oscilan a través de la niebla con un suave brillo aditivo y parallax sutil, además de partículas ascendentes de condensación/polen; las partículas reaccionan de forma sutil a las plantas recién crecidas. 3. Ciclo de iluminación día-noche: un bucle continuo de luz ambiental desplaza la luz principal cenital desde el amanecer blanco frío → atardecer dorado cálido → noche índigo profunda y de vuelta, recoloreando toda la escena, los reflejos del vidrio, la niebla y los tonos de las plantas en consecuencia. Las plantas muestran fototropismo: los tallos se curvan e inclinan sus puntas hacia la dirección actual de la luz a medida que esta se mueve. Interacción principal: al hacer clic en cualquier punto de la pared o el interior del frasco, cae una única semilla en el limo en la posición x del clic, y esa semilla reproduce una vida completa y visible en secuencia: la semilla cae y se asienta, germina en un brote, el brote se ramifica recursivamente mediante el L-system y luego florece una pequeña flor luminosa al madurar; cada etapa debe usar easing y ser claramente legible, con una suave ondulación/nube de polvo al aterrizar. Varios clics generan varias plantas que coexisten y siguen creciendo, llenando gradualmente el terrario hasta formar una espesura más densa. Incluye un par de controles inline sutiles en botones tipo píldora con glassmorphism (por ejemplo, "Restablecer terrario" y un conmutador "Día/Noche: auto ⇄ arrastrar" que permita al usuario desplazar la hora del día, además de una pausa opcional). Incluye una línea de pista tenue ("toca el vidrio para plantar una semilla") que se desvanezca tras la primera interacción. Paleta y ambiente: follaje verde tinta de bosque y verde amarillento musgoso, brillo ámbar/miel para las motas de luz y las flores, tintes fríos de vidrio verde azulado en el frasco, lavados de oro cálido e índigo frío a lo largo del ciclo día-noche. La sensación general debe ser tranquila, respirante y meditativa: movimiento lento y suave, sin transiciones bruscas. Requisitos técnicos: usa requestAnimationFrame con delta-time para que la animación sea independiente de la tasa de frames; haz que el canvas responda al cambio de tamaño de la ventana con escalado correcto según devicePixelRatio y mantén el frasco centrado; limita de forma sensata la cantidad de partículas/ramas para que se mantenga fluido; conserva toda la aleatoriedad con semilla por planta para que el crecimiento parezca natural. Todo — geometría, brillo, vidrio, niebla, iluminación, partículas y plantas recursivas — debe dibujarse o calcularse en código, sin ningún asset externo. Entrega únicamente el documento HTML completo, listo para guardarse como un archivo .html y abrirse.