Ridge Line

A roof corner whose shingles lay themselves, course by course, under a moving sun.

With Annual and LifetimeScenes
Live 3D in the browser, three.js 0.171. Drag, tap and type in it.Open full screen

Included with Annual and Lifetime

Every premium block, every kit and a new kit every week, for $89 a year. Or once, for life, for $229.

By buying you agree to the Terms and License.

See plansSign in
# Ridge Line

Build a hero section for a roofing company's website: copy on the left, and on the right a corner of a gable roof made in three.js from code, with shingle courses that lay themselves from eave to ridge, a drip edge and ridge cap in the accent, and a slow sun sweep that moves the shadows across the courses.

## Look

- Page and backdrop: warm bone `#EFEBE4`. Text `#141416`, muted `rgba(20,20,22,.66)`.
- One accent: signal `#E8502E`, for the drip edges, the ridge cap, the eyebrow square and the button (text `#141416`).