All projects

Case study

Sensory Creative

A scroll-driven sales funnel for a roofing ads agency: a live booking calendar, a personalised ROI calculator, and lead forms wired into the agency's platform.

scroll-driven sections
11
Playwright check scripts
~100
of commits
74%
Role
Lead developer
Year
2026
Client
Sensory Creative, via tarunSoft
Stack
Next.jsReactTypeScriptTailwind CSSFramer MotionPlaywrightVercel
Sensory Creative screenshot

Overview

Sensory Creative is a marketing agency for roofing contractors. Its offer is unusual: roofers pay per booked inspection, not a monthly retainer.

I built the agency’s sales funnel at tarunSoft. It’s the site a roofing company owner lands on: it explains the offer, shows the results, lets them work out their own numbers, and gets them to book a call.

The hero: unlimited roof inspections, no monthly fees

The challenge

  • The offer needs explaining. Pay-per-appointment sounds too good to be true until you see how ads, booking and follow-up fit together.
  • Owners trust their own numbers. The page has to show what the offer means for their business, not an average one.
  • It has to feel like the brand: playful and confident, a “sticker scrapbook on cobalt”, without slowing the page down.

The solution

A story told by scrolling

The home page is one long story in eleven scroll-driven sections. Sticky steppers walk through the playbook, phone mockups show the Facebook ad, the booking and the reminders, and a calendar fills up with appointments as you move between “current” and “with paid ads”.

The calendar filling with booked inspections

Your numbers, inline

The page is personalised as you read. The business name, revenue goal and closer’s name are editable chips inside the copy. The ROI calculator reads like a sentence: enter ad spend, close rate and average job value, and it follows the money from spend to appointments, jobs, revenue, fees, net profit and return on ad spend.

Following the money from ads to roof jobs

Process, team and booking

A five-step process, the crew with department filters, and a pay-per-appointment form close the page. A thank-you page confirms the booking and adds it to Google or Outlook calendars.

The five-step process

The pay-per-appointment form

Small touches carry the brand: interaction sounds, keycap-style buttons, a holographic wax seal, and a footer wordmark whose eyes follow the cursor.

The footer, with its wordmark

Under the hood

  • Next.js 16 (App Router), React 19, strict TypeScript and Tailwind CSS v4.
  • A hand-written scroll engine on requestAnimationFrame, with eased tweens and a reduced-motion fallback, instead of a heavy animation library.
  • One source of truth for the maths. A single function computes the whole funnel, so every number on the page agrees.
  • Lead forms go through a server route that validates input, catches bots with a honeypot, keeps UTM and ad click IDs for attribution, and forwards each lead to the agency’s platform.
  • Sticky layouts that survive. Sections clip their overflow, which breaks position: sticky, so the steppers are split into stacked panels.
  • Scroll restore that doesn’t fight the scroll-driven steppers on reload.
  • Optimised video: H.264, fast-start and small, with poster fallbacks.
  • About 100 Playwright scripts check layouts and interactions with screenshots.
  • Deployed on Vercel.

Key features

  • Eleven-section scroll story with sticky steppers and phone mockups
  • Live booking calendar that fills as the offer kicks in
  • Inline personalisation and a narrative ROI calculator
  • Case studies, testimonials, process and crew sections
  • Lead forms with attribution, wired to the agency’s platform
  • Booking confirmation with add-to-calendar
  • Portfolio, about, FAQ and legal pages