The marketing site had been functional. Header, hero, features list, pricing cards, footer. It worked the way a résumé works — it contained the information without making you feel anything about it.
Five waves of changes turned it into something that moves.
The first wave was structural. A useScrollReveal composable built on IntersectionObserver, four CSS reveal utilities, and a migration of Home, Pricing, and TryDemo into a shared PublicLayout. That migration alone deleted 1,200 lines of duplicate header and footer code across three pages. The composable became the foundation for everything that followed — elements that don't exist until you scroll to them, then materialize with purpose.
Ten new marketing components emerged. A hero section with an animated browser mockup where SVG polygons draw themselves onto a lawn image — showing the product doing its thing before anyone reads a word of copy. A social proof bar where statistics count up from zero as you scroll past. Feature showcases in alternating rows, left-right-left, with images that slide in from the side they're on. A how-it-works section with three steps connected by an SVG line that traces the path between them. Differentiators. A pricing teaser that pulls you toward the full pricing page. Every section reveals on scroll, staggered so the page feels alive without feeling busy.
The TryDemo page got its own animation layer. A typing animation in the URL bar — the address appearing character by character. A pulsing play overlay. A one-shot polygon draw that traces the measurement path across the property. Count-up results that land with weight. The demo doesn't just show a screenshot of the product. It performs a compressed version of the product experience.
Pricing cards stagger their reveal — first card, then second, then third, each one a beat behind. A trust section below. A comparison table. An FAQ section. All scroll-triggered, all respecting prefers-reduced-motion for users who've opted out of animation.
SEO went in alongside the visual work. Meta descriptions, Open Graph tags, Twitter cards on every page. JSON-LD Organization and SoftwareApplication schema on Home. FAQPage schema on Pricing. Dynamic meta on feature detail pages. The invisible architecture that search engines read while humans read the animations.
The composable-first approach was the multiplier. useScrollReveal plus MarketingSectionHeader plus the reveal CSS utilities became a kit — drop them into any section and it inherits the same timing, the same motion language, the same sense of a page that's been choreographed rather than stacked. Consistency without repetition. Motion without chaos.