Academic/personal Project
Apr 2024 – May 2024

Day / Night Cycle Demo

A lightweight animated day/night scene originally created for the MyAtlas social media app to evoke the feeling of travel and changing environments.

Day / Night Cycle Demo thumbnail

Project Overview

This project is a small interactive day/night cycle originally designed as part of the website for MyAtlas, a travel-focused social media app. The goal was to create a more atmospheric landing experience that conveyed the feeling of traveling through different places and times of day.

The scene transitions through sunrise, daytime, sunset, and several nighttime stages while the sun and moon move continuously across the sky. Clouds and stars add depth to the scene. The animation speed can be adjusted interactively for the demo.

The implementation is intentionally simple, using standard HTML, CSS, and JavaScript rather than a framework. Much of the visual effect comes from layered backgrounds, CSS animation, and lightweight JavaScript controlling the celestial cycle.

Although it is no longer tied closely to the original MyAtlas application, I kept the project as a standalone front-end demo and visual experiment.