All projects · SaaS Product Tools
HeatMapPro — Interactive Website Heatmap Generator
An interactive website behavioral analytics studio and thermal heatmap engine.
An interactive website behavioral analytics studio and thermal heatmap engine. Visualizes clicks, cursor movements, vertical scroll depth, and active reading attention over a modern SaaS landing page ('Brandly'). Features an offscreen radial kernel accumulation algorithm with a 256-color continuous thermal gradient LUT, responsive device emulation (Desktop, Tablet, Mobile), real-time live interaction tracking, dead click detection, A/B landing page comparison, session replays, and an AI UX recommendations engine.
- Pure JavaScript thermal heatmap generator mapping coordinates into a continuous scalar field without naive colored discs
- Multiple heatmap visualizers: Click Heatmap, Movement (cursor trails), Scroll reach depth, Attention dwell times, and Dead Clicks
- Real-time interactive tracking mode allowing users to browse, click, and stream live interaction points into the active dataset
- Responsive device simulator supporting Desktop (1200px), Tablet (768px), and Mobile (390px) with normalized coordinate projection
- Dead Click Detector flagging non-responsive elements that cause user frustration with calculated frustration rate
- A/B comparison mode showing side-by-side metric deltas and heatmaps between original and optimized variants
- AI UX heuristics auditor generating actionable conversion rate optimization recommendations
- 100% offline, privacy-safe tracking with client-side IP anonymization, form input masking, and PNG heatmap export
Built with: Vanilla JavaScript, HTML5 Canvas, Continuous Thermal LUT, Radial Kernel Accumulator, Behavioral Analytics, Dead Click Detection, Responsive Emulation