01 / 07
A film in chapters
Scrolling drives the drone film from the bay to the towers, the terrace and the home. Each chapter gets its own title and a progress index at the bottom.
Velaire Miami
- Year
- 2026
- Location
- Miami, FL
- Platform
- Astro · GSAP · Vercel
- Services
- Web Design
A cinematic site for a Miami brokerage: you steer a film of the bay by scrolling, then browse residences with live filters.
A concept build made to show what we can do for a brand in this market. The brand and people are fictional.
The challenge
Luxury buyers judge a brokerage in seconds. Most Miami sites look like the same listing template. Velaire needed to feel like arriving by boat at golden hour, and still make it easy to find a home.
The approach
We cut a drone film into 97 frames and tied them to the scroll, so the visitor drives the camera from the skyline to a living room. Headlines span the full width with letters rising one by one, reasons to choose Velaire stack like cards, and the listings page filters instantly with animated reordering.
02 / 07
Currently offered
An editorial grid of featured homes: one large, the rest stacked, each with status, area, beds, baths and price at a glance.
03 / 07
Residences with live filters
Area chips, type, price, bedrooms and sort. The grid reorders with an animation and the filters stay in the URL, so a search can be shared.
04 / 07
New developments
Pre-construction towers get their own panel: completion date, units, price from, and a direct request for floor plans.
05 / 07
Inside the home, room by room
Each residence is told room by room, with a heading per space. Any photo opens full screen.
06 / 07
Payment estimate
Buyers slide the down payment and the rate to see a monthly figure, next to a card that sells the neighbourhood.
07 / 07
Neighbourhood guides
Every area has a median price, time to downtown and a few tags, with a link to the homes available there.
The live build
See it in motion
Screen recordings of the real site, unedited: scrolling, animations and page transitions exactly as a visitor sees them.
What moves
- 01
Scroll-scrubbed film hero
97 WebP frames drawn to a canvas, loaded coarse-to-fine so it scrubs within a second.
- 02
Full-width letter reveals
Headlines fitted to the viewport width, each letter rising out of a mask.
- 03
Stacking cards
Sticky panels that settle back as the next one slides over them.
- 04
Filterable listings
Area, type and price filters kept in the URL, with animated reordering.
