01 / 07
Un film en chapitres
Le défilement conduit le film de drone de la baie aux tours, puis à la terrasse et au salon. Chaque chapitre a son titre et un index de progression en bas.
Velaire Miami
- Année
- 2026
- Lieu
- Miami, FL
- Plateforme
- Astro · GSAP · Vercel
- Services
- Conception web
Un site cinématographique pour un courtier de Miami : on pilote un film de la baie en défilant, puis on parcourt les résidences avec des filtres en direct.
Un projet concept créé pour montrer ce que nous pouvons faire pour une marque de ce marché. La marque et les personnes sont fictives.
Le défi
Les acheteurs de luxe jugent un courtier en quelques secondes. La plupart des sites de Miami se ressemblent tous. Velaire devait donner l’impression d’arriver par bateau à l’heure dorée, tout en restant simple pour trouver une propriété.
L’approche
Nous avons découpé un film de drone en 97 images liées au défilement : le visiteur conduit la caméra de la ligne d’horizon jusqu’au salon. Les titres couvrent toute la largeur avec des lettres qui montent une à une, les raisons de choisir Velaire s’empilent comme des cartes, et la page d’annonces filtre instantanément avec un réordonnancement animé.
02 / 07
Actuellement offertes
Une grille éditoriale des propriétés vedettes : une grande, les autres empilées, avec statut, quartier, chambres, salles de bain et prix d’un coup d’œil.
03 / 07
Résidences avec filtres en direct
Quartiers, type, prix, chambres et tri. La grille se réorganise en animation et les filtres restent dans l’URL : une recherche se partage.
04 / 07
Projets neufs
Les tours en prévente ont leur propre panneau : livraison, nombre d’unités, prix de départ et demande directe de plans.
05 / 07
L’intérieur, pièce par pièce
Chaque résidence est racontée pièce par pièce, avec un titre par espace. Chaque photo s’ouvre en plein écran.
06 / 07
Estimation des paiements
L’acheteur ajuste la mise de fonds et le taux pour voir un paiement mensuel, à côté d’une carte qui présente le quartier.
07 / 07
Guides de quartiers
Chaque quartier affiche un prix médian, le temps jusqu’au centre et quelques repères, avec un lien vers les propriétés disponibles.
Le site en ligne
Voir le site en mouvement
Des captures d’écran du vrai site, sans montage : le défilement, les animations et les transitions tels qu’un visiteur les voit.
Ce qui bouge
- 01
Héros filmé piloté au défilement
97 images WebP dessinées sur un canvas, chargées du plus grossier au plus fin pour réagir en moins d’une seconde.
- 02
Titres pleine largeur, lettre par lettre
Des titres ajustés à la largeur de l’écran, chaque lettre surgissant d’un masque.
- 03
Cartes empilées
Des panneaux collants qui reculent quand le suivant glisse par-dessus.
- 04
Annonces filtrables
Filtres par quartier, type et prix conservés dans l’URL, avec réordonnancement animé.
