Hear.ai
A website that listens before it speaks
(Fig. 00)Hear.ai, Award-Winning AI Contact Center Website
(01) Context
Hear.ai turns every customer conversation, across calls, chats and tickets, into decisions for CX, compliance, operations and sales teams. We built the flagship website as a scroll-driven narrative where the product's logic, listen, understand, act, becomes the way you move through the page.
(02) Challenge
Enterprise buyers have seen every "AI platform" homepage. Hear.ai needed a site that proved the capability instead of claiming it, earned the trust of compliance-minded teams, and still held its own next to the best SaaS sites in the world, without trading away load time, accessibility or SEO.
(03) Approach
The product works in sequence: conversations come in, intelligence is extracted, action follows. So the site does too. We engineered one continuous scroll in which each interaction reveals the next layer of the product, and gave every animation a job: if a motion did not explain something, it did not ship.
(04) Chapter
A field that moves with you
The hero opens on magnetic field lines that flow as you scroll, a quiet first signal that the page reacts to the visitor. Smooth scrolling with Lenis keeps the pace cinematic without hijacking control, and the type stays readable at every frame.
(05) Chapter
From a dot to a decision
A grid of dots ripples outward on scroll, then its centre grows into a full-screen panel. It is the product in one gesture: a single signal, picked out of thousands of conversations, expanding into insight. Built with Motion and SVG path morphing (flubber), tuned frame by frame so the transition never stutters.
(06) Chapter
Learn, Evolve, Transform
An orbit stepper snaps scroll progress into three eased steps. Instead of a long feature list, the visitor lives through three states of the platform, each with one sentence and one visual. Scroll stays free; the steps simply land where the reader would naturally pause.
(07) Chapter
A door that opens into a call to action
The closing call to action is a door that turns into a wormhole: a ball rides an SVG spiral using CSS offset-path, then lands on the demo request. A playful ending, but a precise one, built to stay smooth on mid-range laptops.
(08) Colophon
- Client
- Hear.ai
- Year
- 2026
- Development, motion and interaction engineering
- Écrin Digital
- Recognition
- Awwwards Honorable Mention (March 2026)CSS Winner Site of the Day (March 2026)
- Studio
- Ecrin Digital
Aura Agence