Case study · Demo build · HVAC site engine

Ember & Frost: an HVAC site that shows its work.

A demo heating and cooling brand built to show what an HVAC website can do. The hero is a live cutaway house that explains why the top floor is cold, the outdoor unit comes apart as you scroll, a seasonal offer turns visitors into bookings, and an animated brand film made with HyperFrames tells one night of a cold snap.

Play with it liveWatch the film
Ember & Frost hero: Cold up top? We'll find why, beside a cutaway house with room temperatures
  • 1client file re-skins the whole site
  • 21 sanimated film, 16:9 + 9:16
  • 2seasons, one switch
  • 15%offer popup, any service
  • 0frameworks or libraries

Live, not a video

Drag it. Flip the season.

This is the real site running inside the window. Pick a moment, then drag, click and scroll. Switch to Phone to see how it adapts.

The brand film · made with HyperFrames

2:47 AM. Warm by breakfast.

Drawn entirely in vector from the same pieces as the site: the cutaway house, the service-area map and the exploded unit. Rendered at 1920×1080 and 1080×1920 with HyperFrames; the vertical cut is ready for Reels and TikTok.

What's on the page

Every section teaches something.

  1. 01

    Thermal-house hero

    An SVG cutaway with live temperatures, air moving through the ducts and leaking in the basement, plus a before/after slider that demos itself.

  2. 02

    Heat / Cool seasons

    One switch re-colors the site from the flame to the snowflake in the logo and swaps the headline, the house and the airflow.

  3. 03

    Live airflow

    Thousands of particles drawn on canvas behind the hero. Warm air rises, cool air sinks, and the cursor works like a fan.

  4. 04

    Exploded outdoor unit

    Drawn in isometric code, pulled apart by scroll: pad, compressor, capacitor, coil, cabinet and fan, each explained in plain English.

  5. 05

    Seasonal offer popup

    15% off every service, shown once per visit, never while someone is booking. Claiming it carries the code into the request.

  6. 06

    HyperFrames brand film

    A 21-second animated film drawn entirely in vector: the house goes cold, the van routes across the map, the part is found and replaced, and every room warms back up.

  7. 07

    Real service-area map

    Lake Erie, I-90, I-480, I-71 and I-77 drawn from coordinates, with the shop and the towns it serves.

  8. 08

    Built to resell

    Every company detail lives in one client file. A new HVAC company is a new file and a rebuild, not a redesign.

Screens

Desktop to phone.

Exploded outdoor unit with six labeled parts
Inside the unit
Popup offering 15% off every service
15% offer
Service-area map of Greater Cleveland with Lake Erie and highways
Service area
Ember & Frost hero on a phone
Phone

How it's built

Motion that still sells the call.

  • The phone number and Request Service button stay one tap away on every screen
  • Tested at 390, 768, 1024 and 1440 pixels wide, with no sideways scrolling
  • Every animation pauses off-screen and respects the system reduce-motion setting
  • The offer popup traps keyboard focus, closes with Esc and shows once per visit
  • One engine and one client file, so the next HVAC company is a rebuild, not a redesign
  • Demo brand: Ember & Frost is fictional, with sample reviews, a 555 number and a demo offer

Run an HVAC company? Let's build yours.

Start Your ProjectSee more work

Or call (216) 272-5884