Ecrin Digital developed the marketing website for Hear.ai, an AI-native contact center intelligence platform, with designer Robin Kane. The project earned an Awwwards Honorable Mention and a CSS Winner Site of the Day.
The project
Hear.ai is an AI platform that analyzes customer conversations across calls, chats and tickets, for CX, compliance, operations and sales teams.
They needed a website that would do three things: prove the AI capability is real, build trust with enterprise compliance buyers, and stand out in a crowded AI landscape.
Design approach
Scroll-driven narrative
We designed the entire site as a scroll-driven experience. Instead of jumping between sections, the content unfolds like a story. Each scroll interaction reveals a new layer of the product, from raw conversation data to AI-extracted insights to compliance alerts.
This approach works because Hear.ai's value proposition is sequential: data comes in, AI processes it, insights come out. The scroll mimics the product flow.
Motion design
Every animation serves a purpose. The motion is built with Motion and Lenis smooth scrolling, with SVG path morphing handled by flubber. Signature moments include:
- A dot grid that ripples outward as you scroll, before its center dot grows into a full-screen panel
- Hero "magnetic field" lines that flow as you scroll
- An orbit stepper that snaps scroll progress into three eased steps: Learn, Evolve, Transform
- A door-to-wormhole call to action, where a ball rides an SVG spiral using CSS offset-path
Visual language
Robin Kane's design pairs dark grey with a single coral accent and the Byrd typeface, with recurring motifs of dots, orbits, field lines and arches.
Technical implementation
| Layer | Choice |
|---|---|
| Framework | Next.js, React, TypeScript |
| Animation | Motion, Lenis, flubber |
| 3D | Three.js |
| Blog CMS | Webflow |
Since launch, Hear's in-house team has taken over the site and keeps evolving it.
Awards
The Hear.ai website earned:
- Awwwards Honorable Mention (March 2026)
- CSS Winner Site of the Day (March 2026)
These awards validated our approach to interactive, scroll-driven design and confirmed that small studios can compete at the highest level of web design.
Key takeaways
- Scroll-driven design works best when the product narrative is sequential
- Enterprise buyers respond to real data, not placeholder content
- Motion should demonstrate capability, not decorate
- Awards follow craft, not the other way around
This project showed that a small studio can produce Awwwards-level work, and it opened doors to larger conversations with post-funded startups looking for the same quality.
