Roof Pitch

Drag the pitch, the roof tilts and the price follows.

Free with an accountEstimators
Live 3D in the browser, three.js 0.171. Drag, tap and type in it.Open full screen

Free with an account

Make a free Lumette account to copy the whole prompt and download the file.

Make a free accountSign in
# Roof Pitch

Build a roof estimator section for a roofing company's website: a clay 3D house whose roof tilts as the visitor drags the ridge, a short control panel, a live price range, and a lead form that sends the estimate to the roofer.

## Look

- Page and 3D backdrop: warm bone `#EFEBE4`. Panel card `#F8F6F2`, inputs and the estimate box `#FFFFFF`, hairline borders `rgba(20,20,22,.10)` and `rgba(20,20,22,.18)`, 6 px corners.
- Text `#141416`, secondary `#55524C`, faint `#8B867E`. One accent, copper `#C26A3D`: slider fill, focus rings, the selected option's border, the drag handle, the submit button.