The Build Lab · Case study · Sales page

The Scroll-Built Sales Page

An animated sales page for an architecture practice: scroll, and the house builds itself.

Screenshot of The Scroll-Built Sales Page

The problem

A small architecture practice has beautiful work but a website that reads like a brochure and never gets enquiries.

What I built

A scroll-animated sales page where a home assembles itself from foundations to finished interior as you read, with the story, process, pricing and a clear enquiry form built around it.

What it replaces

A static portfolio site that looks nice and converts nobody.

Who it's for

Architects, builders, interior designers and other visual trades whose work is beautiful but whose website does not turn visitors into enquiries.

How it works

  1. The page opens on the finished home and one clear promise.
  2. As the visitor scrolls, the house builds in stages: groundwork, frame, walls, roof, glazing, interior.
  3. Each stage lines up with a step of the practice's process, so the story and the pictures move together.
  4. It ends on pricing guidance, proof and a short enquiry form that books a first call.

The result

A website people remember and scroll to the end of, with every section leading to the enquiry form.

Connects to

  • Website
  • Enquiry form
  • Gmail
  • Calendly

Demo video

Watch it work

How I built this

I built this with Claude as a single page.

The house is one architectural drawing split into layers: groundwork, foundations, frame, walls, roof, glazing, then the lights and garden. Each layer is tied to how far down the page you are, so the build keeps pace with the six steps of the practice's process as you read them.

Underneath the animation it is a plain sales page: a clear promise, the process, a testimonial, fee guidance and a short enquiry form. The real version sends each enquiry to your inbox and offers a Calendly slot for the first call.

Hale & Birch is made up, and so are the fees, so nothing here is really taking bookings.

Same sales page underneath. People just scroll to the end of it.

Questions

Frequently asked

Can AI build a sales page for my business?

Yes. AI tools like Claude can write the copy, plan the structure and write the code for a sales page, including animations like this one. What AI cannot supply is the substance: your real projects, photographs, process, prices and client words are what make a page convert. The best results come from giving Claude that raw material, asking it to structure the story around one clear call to action, then editing hard. You can build the finished page on Webflow, Framer, WordPress or Squarespace, or as a small custom site if you want full control over the animation.

What is a scroll-animated website and does it help sales?

A scroll-animated website changes as the visitor scrolls, so images, text or illustrations move, build or reveal in step with the story. Here, a house assembles from foundations to finished interior while the practice explains each stage of its process. Animation helps when it explains something, such as how a build unfolds, and hurts when it is decoration that slows the page down. Whether it helps sales depends on the rest of the page: clear pricing guidance, proof and an easy enquiry form still do the heavy lifting.

How do I make a scroll animation for my website?

The easiest route is a website builder with scroll effects built in. Framer and Webflow both let you tie movement to scroll position without writing code, and many WordPress themes include simple scroll effects. For something bespoke like a building that assembles in stages, you need a sequence of images or illustrations plus a little JavaScript, and Claude can write that code if you describe the stages clearly. Start with the story in plain words, then match one visual change to each paragraph so the animation and the argument move together.

Will a scroll animation slow my website down or hurt SEO?

It does not have to. Keep the images compressed and sized for phones, load the later stages only when they are needed, and make sure all your headings and copy are real text on the page rather than baked into pictures, so Google and AI search tools can read them. The page should also respect the "reduce motion" setting on visitors' devices and show a still version instead. Test it with Google's free PageSpeed Insights before launch, especially on a mid-range phone, because that is how most people will first see it.

How much does an animated sales page cost to build?

It depends mostly on who does the design and build. Doing it yourself on Framer, Webflow or WordPress costs a monthly site plan plus your time, and Claude Pro at around £20 a month can help with the copy and custom code. The images or illustrations for each build stage are often the biggest job, especially if you commission drawings or renders. Agency builds vary widely, so get a fixed quote. A realistic self-build with good source material usually takes a couple of weeks of evenings rather than a weekend.

Does this kind of sales page work for trades other than architects?

Yes. The idea works for any business where the process is the selling point. A kitchen fitter can show a room going from bare walls to finished kitchen, a landscaper can grow a garden from plan to planting, and an interior designer can furnish a room as the visitor reads. The rule is the same in every case: one clear promise at the top, each stage of the animation paired with a step of your process, then proof, pricing guidance and one simple way to enquire.

Can I get help building a page like this?

Yes. My 1:1 AI implementation is done-with-you support over six weeks: we build the page together around the tools you already use, so you understand every step and can keep it running without me. It is not a done-for-you service, and it suits people who want to learn the skill rather than hand it off. If you would rather go it alone, the answers on this page are enough to get a first version working, and starting small is the right call either way.

← Back to the Build Lab