Les presento "Orbit of Night", un reloj web para quedarse viendo el espacio sin pensar en nada.
(orbit.ggoban.com)¡Hola!
Hoy quiero presentarles un proyecto personal que hice desde esta mañana con AI usando "vibe coding": un hermoso reloj con fondo espacial llamado "Órbita de la Noche (Orbit of Night)".
Era una sola página dentro de una función web que estaba desarrollando, pero me pareció un poco desperdicio dejarla solo como una página aislada, así que empecé a convertirla en algo aparte. La hice con la intención de crear una experiencia que diera ganas de quedarse mirándola un momento, como entrando en modo "espacio y nada más".
Características principales
- Fondo animado: estrellas, nebulosas y meteoros moviéndose constantemente
- Seguimiento en tiempo real de la ISS: una órbita senoidal que se mueve de forma estable dentro de la pantalla y se corrige con base en datos reales de la posición de la ISS
- Elementos interactivos: puedes hacer clic en los planetas para escanearlos virtualmente, además de pequeños detalles divertidos como un UFO y efectos de agujero negro
- Configuración de usuario: puedes activar o desactivar elementos como planetas, UFO e ISS según tu gusto, y ofrece 3 temas
Está hecho sin frameworks, solo con JavaScript puro y animaciones CSS (aunque lo implementó la AI; mientras revisaba, hasta me hizo sentir que yo era el exigente). En especial, la órbita de la ISS la construí con un enfoque híbrido que combina una simulación estable con corrección en tiempo real basada en datos.
TMI: la historia de un cuarentón que empezó a desarrollar con AI
La verdad es que ya soy un papá en sus 40, con hijo e hija.
Si me presento brevemente: por mi generación, empecé con juegos de texto y MUD en el pasado, y también soy un gamer con mucho cariño por los web games.
Estudié ingeniería en computación y sí he trabajado en el área de IT, pero más cerca de la ingeniería de servidores. Por eso terminé aprendiendo a moverme también en middleware, backend y frontend: un trabajador común y corriente.
Eso sí, desde hace mucho siempre tuve el sueño de crear juegos. Después de experimentar lo mucho que ha avanzado la AI, pensé: "¡ahora sí llegó el momento!", y desde octubre del año pasado he pasado mi tiempo libre haciendo lo que hoy llaman vibe coding con AI.
Ahora mismo voy por mi tercer toy project de web game. En medio del proceso, al crear una página para una función, improvisé una pantalla en la que terminé poniendo bastante esfuerzo. Luego pensé que era una pena usarla solo ahí, y así fue como nació este proyecto.
¿Qué les parece si se pasan a echarse un rato de "espacio en blanco mental"?
¡Toda retroalimentación es bienvenida!
21 comentarios
Es un proyecto genial.
¡Gracias por tu interés!
¡Está genial!
¡Gracias por el cálido interés!
¡Queda buenísimo como fondo del navegador! Se siente parecido a tener el espacio de fondo en el iPhone.
¡Gracias por el cálido interés! Yo pienso dejarlo abierto en una tablet algo vieja que tengo en casa y hacerle un marco sencillo para usarla como reloj, jaja.
Está muy bien~
Creo que estaría aún mejor si también mejoraran los planetas tomando esto como referencia.
https://codepen.io/jamesfinn180/pen/VwzENbR
¡Guau! De verdad hay muchísima gente increíble en el mundo. Gracias por su interés. Como la idea es la sensación de verlo desde la Tierra, probablemente la Tierra no aparezca tal cual, pero voy a intentar mejorarlo y actualizarlo aplicando esa idea.
De verdad fue muy reconfortante y me hizo feliz.
Gracias por crear una obra tan bonita. :)
Muchas gracias por tu respuesta tan cálidaT_T me da aún más ánimo.
¡He incorporado las opiniones que me compartieron y ya hice las correcciones! 1. Los planetas tienen información fija cuando se generan. 2. La opción de lluvia de meteoros ahora puede cambiarse en la configuración según las preferencias de cada persona. (frecuencia, velocidad, cantidad) 3. Se ajustaron las nebulosas y, aunque quizá no se note mucho, también la Vía Láctea y el brillo de las estrellas. 4. Si desactivas la opción de agujero negro, ahora ya no funciona. 5. Añadí un efecto como homenaje, similar al warp de Sxwox. 6. A veces aparecen unos amigos peculiares sobre los planetas. ¡Muchas gracias a todos por el gran interés!
Es algo menor, pero aunque desactives el efecto de agujero negro, el efecto de agujero negro sigue funcionando igual. ^^ ¡Qué proyecto tan genial~!
Sí, gracias ^^ Estamos por aplicar pronto una versión mejorada que refleja esos errores y también las opiniones de otras personas. ¡Gracias por el interés!
Se parece al diseño que vi antes en algún sitio de pomodoro. ¿Qué tal si hacen que aparezcan varios planetas?
Ah, como dicen, no hay nada nuevo bajo el sol en este mundo...! Estaba pensando en hacerlo más interesante mostrando solo 1 planeta y haciendo que aparezcan elementos únicos sobre él, pero también voy a probar con varios planetas. Gracias.
A mí también me dijeron que era para quedarse mirando al vacío, así que esperaba algo como una toma real del espacio con larga exposición... pero creo que fue muy distinto de lo que esperaba.
Muchas gracias por tu valiosa opinión. También vamos a pensarlo con ayuda de la IA. Jaja. De todos modos, como el concepto está planteado para expresar todo lo posible únicamente mediante css o svg, voy a inspirarme viendo fotos relacionadas.
Creo que estaría bueno que apareciera un espacio un poco más estático y realista~
Vamos a ampliarlo para que puedas elegir entre varios universos además de los temas de color. ¡Gracias por tus valiosos comentarios!
Gracias por presentar un proyecto con tanto significado. Es admirable y digno de respeto ver que, incluso con el paso del tiempo, no pierdes tus sueños y sigues aceptando desafíos. ¡Creo que a tus hijos también les gustará! Si te puedo dar algunos comentarios: 1) La lluvia de meteoros cae demasiado rápido y en demasiada cantidad, así que quizá se siente demasiado intensa como para quedarse contemplando el espacio. Si cayeran un poco más tenues, en menor cantidad y más lentamente, creo que podrían crear una atmósfera más serena y emotiva. 2) En el escaneo de planetas, ¿qué te parecería hacer que para un mismo planeta aparezca siempre la misma información? 3) En la configuración, ¿el efecto de agujero negro se refiere al efecto al hacer clic? Aunque lo pongo en Off, ese efecto no se desactiva. 4) No me queda muy claro qué color cambia exactamente la opción
Random Coloren la configuración.Gracias por los comentarios. En cuanto a la lluvia de meteoros, estoy considerando una opción para ajustar la frecuencia mediante un deslizador. También está entre las correcciones pendientes la parte de que al hacer clic en los planetas aparezca información distinta cada vez T_T snif.
Random Colores una opción para que el color del planeta que aparece salga aleatoriamente cada vez. Como el planeta en sí se mueve lentamente, si quieren comprobarlo pueden apagar y volver a encender la opciónPlanetde arriba, y verán que aparece un planeta de otro color jaja. Originalmente quería que el agujero negro tuviera un efecto donde las estrellas de alrededor y la nave espacial fueran absorbidas al hacer clic, pero esa parte no era nada fácil de manejar solo con el navegador y JavaScript, así que por ahora solo implementé una sensación de que únicamente algunas partículas son atraídas T_T. Lo de que no se apaga conofftambién está previsto corregirse. ¡Muchas gracias por sus valiosas opiniones!