web · 2026

Crestline Roofing Co.

A cinematic scroll-film website for a residential roofing brand — designed and built end-to-end, where the hero plays like a scrubbable film that hands off into a crisp, editorial marketing site.

Crestline Roofing Co. is a launch-ready roofing site built around a signature move: a scroll-film hero where a canvas image sequence is scrubbed frame-by-frame as you scroll, timed to two-part captions that snap from claim to qualifier — "Over every home / Under every warranty." The film never hard-stops; it hands off into a second act of editorial content that rises over its final frame, so the closing footer is literally the last shot of the movie. The craft lives in the details — a slate-red accent against mono-labeled technical chrome, cursor-summoned stills on the service list, a pin-split story that holds an image while the copy scrolls past, a horizontal gallery panned by vertical scroll, and count-up stats that animate on entry. It runs on hand-written vanilla HTML, CSS, and JavaScript with Lenis smoothing and GSAP ScrollTrigger, and degrades gracefully: with no JS or reduced-motion, every word stays visible. The hero footage itself is generated in-house through a ComfyUI and Wan image-to-video pipeline, then baked to an optimized WebP frame set for the scrubber.

• ▸Scroll-scrubbed film hero — a canvas image sequence driven frame-by-frame by scroll, synced to two-part claim/qualifier captions
• ▸Signature interaction set — cursor-summoned stills on the service list, a pin-split story that holds while text scrolls, and a horizontal gallery panned by vertical scroll
• ▸Slate-red editorial system — mono-label chrome, animated count-up stats, a marquee ticker, and a closing frame that doubles as the film’s final shot
• ▸Buttery scroll feel from Lenis smoothing plus GSAP ScrollTrigger, with a full no-JS and reduced-motion fallback that keeps every word readable
• ▸Cinematic hero footage generated in-house via a ComfyUI + Wan image-to-video pipeline, exported to an optimized WebP frame set

• HTML
• CSS
• JavaScript
• GSAP
• ScrollTrigger
• Lenis
• ComfyUI
• Wan i2v

The footer isn’t really a footer — it’s the last frame of the hero film, so the whole site ends on “Fin.” like the closing title card of a movie.

WEB & DESIGNGAMESAPPS & TOOLSAI & AGENTSCONTENTMUSICWEB & DESIGNGAMESAPPS & TOOLSAI & AGENTSCONTENTMUSIC

MUSICCONTENTAI & AGENTSAPPS & TOOLSGAMESWEB & DESIGNMUSICCONTENTAI & AGENTSAPPS & TOOLSGAMESWEB & DESIGN