Patio Shade Calculator
South-facing patio cover sizing using solar geometry.
A calculator for building a patio cover on the south side of a house in Sacramento (38.6°N) and figuring out how deep it needs to be to block direct sunlight from entering the windows. It computes how much of an 8.25′ window is shaded by a given cover depth at any time of day on any date, and quantifies the trade between summer shade and winter passive heating.
I was sizing a patio cover for the south side of the house and wanted a sharper answer than "deeper is better." Deeper covers shade more in summer but also block the low winter sun that's worth keeping for passive heating. None of the off-the-shelf solar calculators showed that trade in a way that mapped to my window and my latitude.
Built as a single React component with a daily simulation mode (pick a date, scrub through hours, watch the cross-section animate) and a seasonal overview (how many days of full coverage at noon across a chosen month range). Sun altitude and azimuth come from standard solar-geometry formulas, which feed a profile-angle calculation against the cover edge to get wall shade height. The calculator also reports indoor sunlight penetration and the nearest point of direct sun on the patio ground.
The graph that ended up doing the most work was the seasonal noon shade chart, with full-coverage days highlighted. It made the winter trade-off legible in a single glance, which is what I had wanted from a tool and not been able to find.
- Solar-geometry kernel (sun altitude, azimuth, profile angle)
- Indoor penetration and patio ground sun measurements
- Daily simulator + seasonal noon-shade chart
- Claude (artifact pair-authoring)
- React, inline SVG