Structiv — Website for a Custom Home Design-Build Studio
Visit website ↗
Tags
- Web Development
Stack
- Next.js 15
- React 19
- TypeScript
- GSAP
- ScrollTrigger
- Lenis
- Zod
(Info)A design-build studio in Greater Dallas that designs and builds custom estates: architecture, engineering, permitting, construction and interiors under one contract. Its clients, homeowners planning a multi-million-dollar house, fear the finger-pointing between architect, builder and designer more than anything, so the site had to show one team carrying a home from an empty lot to the day the family moves in.
Process
The site is laid out as a set of construction drawings: seven full-screen panels numbered like drawing sheets (A-00 to A-06), each with a title block and a progress ruler drawn like a scale bar. They slide sideways as the visitor scrolls, and after the last sheet the site loops back to the empty lot with "Your lot is next." It opens with a 15-second build film that follows one house from bare dirt through excavation, framing and finishes to an aerial view of the finished estate, with a day counter running from 1 to 412 and the phase names over the footage. The film ends on exactly the frame of the aerial still, so markers on the pool, skylight, motor court and facade open close-ups of each detail. Then come a divider dragged between blueprint and photo, a day, dusk and night slider over three renders of the same view, a great room with clickable finish details, a timeline comparing a traditional schedule with design-build, a cost estimator that turns square footage, finish tier, lot and pool into a price range and timeline, and a consultation form that carries the estimate into the request. Built with Next.js 15, GSAP ScrollTrigger and Lenis; on phones the panels stack vertically, and with reduced motion the film plays only on request.
