Hear.ai
Un site qui écoute avant de parler
(Fig. 00)Hear.ai, Award-Winning AI Contact Center Website
(01) Contexte
Hear.ai transforme chaque conversation client, appels, chats et tickets, en décisions pour les équipes CX, conformité, opérations et ventes. Nous avons développé le site vitrine comme un récit piloté par le scroll : la logique du produit, écouter, comprendre, agir, devient la manière de parcourir la page.
(02) Enjeu
Les acheteurs grands comptes ont déjà vu toutes les pages d'accueil « plateforme IA ». Hear.ai avait besoin d'un site qui prouve la technologie au lieu de l'annoncer, rassure des équipes attentives à la conformité, et tienne la comparaison avec les meilleurs sites SaaS au monde, sans rien céder sur la vitesse, l'accessibilité ou le référencement.
(03) Approche
Le produit fonctionne en séquence : les conversations arrivent, l'intelligence en est extraite, l'action suit. Le site aussi. Nous avons construit un scroll continu où chaque interaction révèle la couche suivante du produit, et donné un rôle à chaque animation : si un mouvement n'expliquait rien, il n'était pas mis en ligne.
(04) Chapitre
Un champ qui bouge avec vous
Le hero s'ouvre sur des lignes de champ magnétique qui s'écoulent au scroll, premier signal discret que la page réagit au visiteur. Le scroll fluide de Lenis donne un rythme cinématographique sans confisquer le contrôle, et la typographie reste lisible à chaque image.
(05) Chapitre
D'un point à une décision
Une grille de points ondule au scroll, puis son point central s'agrandit jusqu'à occuper tout l'écran. C'est le produit en un geste : un signal isolé parmi des milliers de conversations, qui devient un insight. Construit avec Motion et le morphing de tracés SVG (flubber), réglé image par image pour que la transition ne saccade jamais.
(06) Chapitre
Learn, Evolve, Transform
Un stepper en orbite découpe la progression du scroll en trois étapes amorties. Plutôt qu'une longue liste de fonctionnalités, le visiteur traverse trois états de la plateforme, chacun avec une phrase et un visuel. Le scroll reste libre : les étapes se posent là où le lecteur ferait naturellement une pause.
(07) Chapitre
Une porte qui s'ouvre sur l'appel à l'action
L'appel à l'action final est une porte qui devient un trou de ver : une bille suit une spirale SVG grâce à CSS offset-path, puis atterrit sur la demande de démo. Une fin ludique mais précise, pensée pour rester fluide sur un ordinateur portable de milieu de gamme.
(08) Colophon
- Client
- Hear.ai
- Année
- 2026
- Développement, motion et ingénierie des interactions
- Écrin Digital
- Distinctions
- Awwwards Honorable Mention (March 2026)CSS Winner Site of the Day (March 2026)
- Studio
- Ecrin Digital
Aura Agence