This animation shows a year of tides in San Francisco with the sun and moon:
I was inspired to create this after adding a tide forecast to a personal weather dashboard I have running on an old Surface Pro. I realized I didn't understand tides that much. I still don't, but I know more than I did before.
The animation illustrates four components of the tide. The obvious ones are the position of the sun and moon. When the moon is new or full the Earth, sun and moon are all lined up leading to larger 'spring' tides, which happen twice a month just like spring doesn't. As the moon waxes or wanes and becomes half full the moon and sun are at right angles and partially cancel each other out resulting in lower highs and higher lows. This is the neap tide, almost as unhelpful as 'spring'.
As orbits are not circles the Earth is closer or further away from the sun over the course of a year and the moon behaves the same way. When it's close than usual we get super moons and king tides (finally a type of tide that does what it sounds like). In the animation the sun and moon actually grow and shrink in proportion to their distance from Earth.
Here's how to read the animation. The date and time at the bottom of the screen refers to the tide right in the middle. The full screen shows the forecast running from 12 hours before the current time to 12 hours later. The vertical range is from -4 feet to 10 feet, relative to mean lower low water (MLLW), the average lowest tide over 19 years. The sun and moon are on a different scale - 360 degrees horizontally and 90 degrees vertically.
The tide forecast is pulled from the NOAA Tides and Currents API. I used SunCalc-Net for the position of the sun and moon, and the phase of and distance to the moon. For the distance to the sun I used a formula I found on StackExchange.
I wanted to both fit in a full year and run slowly enough to see what's going on each month so the video is around 20 minutes long. I won't be offended if you don't finish it.