Smartbeat

Marketing site for a connected-health product. Hero is a real-time WebGL heart synchronized to a heartbeat audio cue; product flow scrolls through a diagnostic timeline that animates ECG-like waveforms in sync.

The Problem

A connected-health product had to earn trust in seconds: heart monitoring is abstract, and a static landing page couldn't convey what the device actually senses. The marketing site needed to make an invisible signal feel alive.

The Solution

A hero built around a real-time WebGL heart synchronized to a heartbeat audio cue, followed by a scroll-driven diagnostic timeline that animates ECG-like waveforms in sync. The product story unfolds as a rhythm rather than a feature list.

What I Built

• →Real-time WebGL heart rendered with Three.js
• →Heartbeat audio cue synchronized to the hero animation
• →Scroll-bound diagnostic timeline with ECG-like waveforms
• →Guided scroll flow that unfolds the product story section by section

Highlights

• →WebGL pulsing heart
• →Audio-synced hero
• →ECG waveform timeline

Outcome

• →Made an abstract health signal tangible from the first second on the page
• →Gave the product a launch-grade presence designed to build user trust