Stone & Timber Remodeling

Overview

Stone & Timber Remodeling was developed as a high-end contractor concept for Central Florida. The goal was to move beyond the standard contractor-template format and create a cinematic, scroll-led experience built around construction, material detail, and project confidence. This is a fictional portfolio concept — not a real client engagement.

The Challenge

Most contractor websites rely on predictable hero sections, service cards, stock imagery, and generic calls to action. The challenge was to create a website that could communicate craftsmanship, project control, and premium positioning before a visitor read every detail.

What This Concept Demonstrates

• — A stronger first impression for contractors who want to look established, not templated.
• — Scroll-driven storytelling used in place of a static service-card layout.
• — A structured, multi-step consultation flow that makes requesting an estimate feel considered.

The Approach

The site is structured around a single scrollable journey rather than separate pages — each section transitions with intent.

• — Full-screen responsive video hero with WebM/MP4 and poster fallback
• — Large restrained typography over full-bleed construction media
• — Fixed transparent navigation that reads cleanly over dark video
• — Scroll-controlled hero transition from video into narrative
• — Pinned horizontal narrative on desktop — Plan, Build, and Deliver scenes progress as the user scrolls
• — Vertical narrative fallback on tablet and mobile with full scene visibility
• — Slot-machine metric animation on key project statistics
• — Editorial featured-project presentation with full-bleed photography
• — Multi-step consultation form with validation
• — Cinematic closing footer with full-width construction imagery
• — Reduced-motion and prefers-reduced-motion accessibility handling
• — Responsive poster images for every video segment

Design Direction

Dark Architectural with Material Editorial relief. The visual system moves between two registers — cinematic and editorial — to hold attention across a long scroll.

• — Deep charcoal surfaces in full-bleed video and narrative sections
• — Warm plaster and limestone sections providing editorial contrast and readability
• — Restrained copper accents as the primary brand tone
• — Satoshi Variable — geometric sans at display and body weight throughout
• — Construction and material-focused imagery at every section break
• — Deliberate contrast between cinematic dark scenes and warm editorial content

Motion System

• — GSAP — core animation engine throughout
• — ScrollTrigger — scroll-scrubbed media transforms and section pin control
• — SplitText — headline reveal animations and character-level entrance timing
• — Lenis — smooth scroll implementation with consistent scrub behavior
• — Scroll-scrubbed media transforms — video and image scale, opacity, and position driven by scroll position
• — Desktop pin distance — narrative section pinned for full Plan · Build · Deliver progression
• — Scene-to-scene media progression — each scroll scene transitions to the next via scrubbed opacity and transform
• — Mobile fallback — full vertical narrative sequence without pin scroll
• — Reduced-motion fallback — all GSAP instances respect prefers-reduced-motion

Technical Implementation

• — React 19 · TypeScript 5.9 · Vite 7
• — GSAP 3.15 — ScrollTrigger and SplitText plugins
• — Lenis 1.3 — smooth scroll with consistent scrub behavior
• — React Hook Form 7.8 · Zod 4.4 — multi-step consultation form validation
• — Netlify Forms — zero-backend form submission handling
• — Responsive WebM/MP4 — video served with format fallback and poster image per breakpoint
• — Responsive image srcset — scene photography loaded at appropriate resolution per viewport
• — Accessibility-conscious motion handling — all animations respect prefers-reduced-motion

Outcome

The final concept demonstrates how a contractor website can move beyond a conventional brochure layout and use cinematic media, scroll choreography, and a structured consultation flow to create a stronger premium impression.