spin0.org

Golden Sunrise

A tool for finding when the rising sun lines up with a chosen mountain or landmark

Calculates sunrise alignment between any two locations, showing the dates when the sun rises behind a mountain or other landmark.
Enter the observer and landmark locations, and the app identifies all alignment dates
Supports both coordinate input and interactive map selection.
Includes several preset locations for demonstration.
A user guide and additional information are available from the app menu.

In a place with months of rain and cloud cover, sunrise is something I saw only occasionally.
On the rare clear mornings, I noticed how much the sunrise shifted along the horizon – far to the south or north of Mt. Hood.
That made me wonder when it would rise exactly behind the mountain.

I checked the direction of Mt. Hood from my viewing location using Google Maps, and since it was only a few degrees off true east, I guessed the alignment would happen near the equinoxes.
I wrote a small Python script to compare the bearing with the sunrise azimuth as a quick check.
I went out before sunrise around those dates, and in a relatively clear eastern sky I witnessed a brief “mountain eclipse” where the ridge glowed just before the sun appeared behind Mt. Hood. Seeing that moment made me wonder how to find similar alignments anywhere in the world.

The core idea was simple: compute the bearing from viewer to landmark, then for each day of the year compute the sunrise time and sun’s azimuth, and finally find the days where the azimuth is close to that bearing.
I built small, modular functions to test each step rigorously, running everything from the command line until the results matched my real‑world observations.

Chose Next.js for routing and fast server‑side rendering, React for the UI foundation, and Leaflet for the interactive map.
Designed the UI to reflect the flow of the process: introduction, location input, results, and supporting information, each in a distinct page accessible through the menu.
Connected the prototype calculations to the UI, keeping the logic modular and easy to test.
Added preset locations to make the demo easy to explore, and built an About menu that brings together the app’s features, limitations, and other notes.

The prototype went through several rounds of refinement, because the early results didn’t match my real‑world observations. Accounting for elevation differences, ground distance, and the drop from Earth’s curvature was what finally brought the calculations in line with the dates I had observed.
Coordinating sunrise times across multiple time zones was tricky — calculations used UTC, JavaScript applied local offsets automatically, and results needed to be shown in the observer’s local time, so keeping everything consistent required careful handling.
Designing a clear UI took its own effort, especially around the interactions, transitions, and making the layout work well on mobile.
Learning Next.js added another layer of challenge — understanding what belonged in server components versus client components was a constant part of the process.

How to apply geometry over a curved surface, and how valuable thorough unit tests are when validating prototype calculations.
The practical boundaries between server‑side rendering and client components in Next.js.
UI layout strategies, and how to use CSS effectively to blend real sunrise photos into a clean, minimal interface.

I’m interested in seeing how the calculation behaves elsewhere in the world. I tuned the logic to match my own observations in the mid‑northern hemisphere, and I expect the southern hemisphere may require different adjustments. Polar or equatorial regions are still unknown to me.
Add a photo gallery if users submit images of their own alignment sightings.