A 3D Scroll Experience
for a Local Contractor

The Client

Strelecki & Sons LLC is a father-and-son renovation contractor based in Moscow, PA. Kitchen remodeling, bathroom renovation, interior and exterior work, decks, and general contracting — the kind of hands-on trade work that has been in their family for over 30 years.

They had no website. In a market where homeowners search "kitchen remodeling near me" before they ask their neighbors, that meant they were invisible to the largest pool of potential customers in their own service area. Every competitor with even a basic website was ranking above them by default.

They needed more than a template with a stock photo of a kitchen. They needed something that would stop a homeowner mid-scroll and make them remember the name. Something that would outrank every other contractor in Lackawanna County. Something that a renovation company from Moscow, PA has no business having — and that is exactly why it works.

What We Built

3D Scroll-Driven Hero

The first thing you see is an exploding brick wall — a WebGL animation where bricks shatter outward to reveal the company name. Once that clears, you enter a full 3D scene: a log cabin surrounded by pine trees, a lake, fences, and seasonal terrain — all rendered in Three.js and captured as a 300-frame JPEG sequence. As the user scrolls, the camera orbits the scene in a full 360-degree loop. Text overlays slide in and out at specific angles, synchronized to the camera position.

The production page does not run Three.js at all. The frames are pre-rendered and played back on a canvas element driven by scroll position. This means the 3D experience works on every device — phones, tablets, old laptops — without requiring WebGL support or a dedicated GPU. The visual complexity of a 3D scene with the performance profile of a static image sequence.

Angle-Based UI System

The text overlays are not positioned at fixed scroll percentages. They are mapped to camera angles. Each overlay is assigned a degree on the 360-degree orbit, with a spread value that controls how long it stays visible and an exit animation that slides it off-screen as the camera rotates past. Dead zones in the center of each spread keep the text perfectly still while the scene moves behind it. This creates the feeling that the content exists in the 3D world rather than floating on top of it.

Five overlays tell the story: the hero ("Built Right. Built to Last."), a personal quote from the owner, a "Why Us" panel with four differentiators, an impact statement, and an "Explore Our Work" prompt that signals the transition from the 3D experience into the traditional page sections below.

Traditional Sections Below the Orbit

Once the orbit ends, the 3D canvas fades out and the page transitions into conventional stacked sections: About, Services (6-card grid), Gallery (masonry photo grid), Process (4-step timeline), Testimonials (3-column review cards), Service Area (18 clickable town tags), FAQ (7-item accordion), a final CTA, and a full contact form. Every section uses scroll-triggered reveal animations via IntersectionObserver.

18 SEO Location Pages

Every town in their service area got its own landing page with unique, locally-relevant content. Moscow talks about hometown roots and the North Pocono School District. Carbondale references Victorian preservation and historic coal-era construction. Old Forge mentions row homes and compact renovations. Clarks Summit targets the affluent Abington Heights crowd. Each page includes JSON-LD LocalBusiness schema with city-specific areaServed markup, a full services grid, and internal links to blog articles and the main site.

This is not the same page with the city name swapped out eighteen times. Google penalizes that. Every page stands on its own because the content is genuinely different.

6 Blog Articles

Six long-form articles targeting high-intent local keywords: kitchen remodeling costs in Northeast PA, bathroom renovation timelines, how to hire a contractor in Moscow PA, spring maintenance checklists for Pocono homeowners, deck building guides for PA weather, and a Lackawanna County renovation permit guide. Each article includes Article schema, cross-links to location pages, related articles sections, and a CTA with the phone number.

Full Structured Data

The main page carries HomeAndConstructionBusiness schema with complete service catalog, geo coordinates, area served, and business hours. A FAQPage schema maps the seven FAQ items. Review schema marks up the three testimonials with aggregate ratings. Every blog article and location page has its own JSON-LD block. Breadcrumb schema on all interior pages. This is the kind of structured data that gets you rich snippets, knowledge panels, and featured answers in Google.

Technical Stack

Build Timeline

Why This Works

A homeowner in Scranton searches "kitchen remodeling near me." They see a list of contractor websites that all look the same — stock photos, template layouts, the same blue-and-white color scheme. Then they click on Strelecki & Sons and a brick wall explodes, a 3D cabin scene orbits past them, and they are reading about a family that has been renovating homes in their own neighborhood for 30 years.

They are not going back to the other results.

That is the difference between a website that exists and a website that converts. The 3D experience is the hook. The 26 pages of locally-relevant content are the SEO engine. The structured data is the technical foundation. Together, they give a two-person renovation crew from Moscow, PA the kind of digital presence that franchise operations spend six figures trying to build.