Heardlist: an interactive landing page that explains itself

Heardlist is a concept product. It listens to client calls and turns every promise into a task with an owner, a due date, and the line it came from. I designed and built the landing page in Framer, animation and interactive pieces included. The film above is the live page scrolling, composited into a licensed photograph of a laptop on a desk, so what you are watching is the real thing rather than a mockup of it.

The claim the whole product rests on is that a task remembers where it came from. A voice arrives as scattered sound, organises into a waveform, flattens into a written line, and the line becomes a task with a timestamp threading back to the moment it was said. Open any task on the page and you get the sentence, the speaker and the time.

Three sample calls, each a different shape, each producing its own list. I gave the three waveforms separate frequency seeds rather than offsetting one wave, because three versions of the same voice would have quietly undercut the point.

Every card on the page is a solid slab with a thickness edge, a rim light and a tilt that follows the cursor, so the four cards rise out of the field in 3D here rather than fading in flat. Building the page also meant cutting it from eight sections to five, so the story arrives faster.

Privacy shown as behaviour instead of claimed in a sentence. The retention window narrows from 90 days to 30 to 7, and the recordings that fall outside it go. It runs in that direction on purpose: deletion is the honest thing to demonstrate, and widening the window would have shown recordings appearing from nowhere.

The hero is a particle scene I wrote as a Framer code component. About 7,600 points move like two voices on a call, gather into the sentence "I'll send the revised scope by Thursday", then reassemble into a task card with a timestamp that counts forward as if the recording were playing. The engine samples the real text, so the words form sharply instead of blurring into a smudge. The transcript, the confirm step, the sample lists and the retention control are custom TypeScript components.

Anyone with reduced motion switched on sees the finished card as a still image with nothing ticking, and everyone else gets a pause button. Screen readers hear stable text instead of numbers that change every second. The published page scores 100 for accessibility and 100 for best practices in Lighthouse.

The product, the customers and the prices are invented. Everything else here I designed and built, and the page is live.