Ageless Media

A Webflow site for a Chicago wedding media studio selling photography, cinematography and creative direction across proposals, engagement sessions and full wedding days.

What they came with

Enquiries land at three different points in the same relationship: a proposal being planned in secret, an engagement session, a wedding still a long way out. Each needs its own package, and the packages separate on hours on site, team size, film length and deliverable list rather than on one headline number. The work is film as much as stills, so a grid of photographs on its own does not carry it. And the studio writes about each couple at length, which is a different content shape from a portfolio card.

What the build had to do

Tiers that can be compared

Wedding pricing splits into two tabbed families, bundles and film-only, each running five tiers, and the tiers are not clean supersets of one another: a six-hour bundle and an eight-hour film package differ on team shape, film length and photo count at the same time. One card has to hold an icon feature list, a team badge, a price and an expandable deliverables panel without the reader losing the thread between two of them.

A separate surface for proposals

Proposals and engagements get their own page and their own tabs, because the feature vocabulary is different: hidden cameras, a hidden microphone, custom set design, a second shooter. The same card component renders both families, which means the feature list has to be data rather than markup.

Add-ons and partner vendors

Below the tiers sit priced extras, from a themed exit to an audio guest book, and then a rail of named partner vendors, each with a role and a link out. It is a second, flatter kind of offer on the same page, and it has to read as something bookable rather than as a directory.

A cover video that behaves

The home page opens on full-bleed footage with a poster frame set as a background image, muted autoplay, playsinline, and both WebM and MP4 transcodes. Display type, auto-scrolling marquee rails and a curved wordmark sit on top of it, so the type has to hold its legibility against a moving image rather than a fixed one.

A coverage map instead of a list

Travel is settled with a drawn state map carrying pinned place labels beside the line that says travel is included in the indicated areas. Naming the same places as a bullet list would have been quicker to build, and would have made the couple in Grand Rapids work out whether they counted.

Technical detail

Static publish, one dynamic edge

Every page is published as static HTML to Webflow's CDN behind Cloudflare, so no application server sits in the request path. The single dynamic dependency is the consultation form, which posts to a Google Form on another domain; that boundary is why the phone number stays pinned in the top bar on every page, as a route to the studio that does not depend on the off-site form being reachable.

Four motion systems, scoped apart

Webflow's own interactions runtime and jQuery 3.5.1 sit underneath GSAP 3.12 for scroll work, Splide 4.1 with the auto-scroll extension for the marquee rails, and CircleType for the curved wordmark. Each is bound to its own class so they do not contend for the same nodes, and the hero video ships a poster frame so first paint never waits on a transcode to buffer.

CMS grid, hand-built stories

The portfolio is a Webflow collection list rendered through w-dyn-list markup: designed poster covers with written alt text and responsive srcsets at 500 and 800 as well as native width, plus AVIF sources. The couple pages behind it each return a distinct data-wf-page id, so they are standalone pages with their own layouts rather than one shared collection template. That buys per-couple editorial control at the cost of two edits when a project ships, which is the right trade when the writing is the product.