Heart On Scroll: Premium Component by Aidan Looker

A captivating scroll progress heart that fills with gradients as users read. Features 5 optional color themes, pulsing beat effects, and 6 fixed positions to add emotional depth.

What is Heart On Scroll?

Heart On Scroll is an emotionally resonant scroll progress indicator that transforms navigation into a visual journey. As visitors scroll, a heart fills with beautiful gradients, gently pulsing when they pause. Perfect for health, wellness, wedding, or storytelling sites where user engagement feels personal and organic rather than mechanical.

Core Features

Dynamic Fill Animation – Smoothly maps scroll depth to fill percentage with spring physics.
5 Premium Color Themes – Includes Rose, Coral, Sunset, Blush, and Neon Glow presets.
Interactive Pulse – Gentle heartbeat animation triggers automatically when scrolling stops.
Smart Positioning – Includes 6 fixed presets (corners & center) with precise offset controls.

Controls inside Framer Theme & Colors

Theme Selection (Presets or Custom)
Custom Gradient Start/Middle/End
Custom Glow Color

Appearance

Size (px)
Show Outline Toggle
Outline Color & Width
Enable Glow & Intensity

Animation & Position

Pulse Intensity & Frequency
Position (Corners/Center)
X/Y Offsets & Z-Index

Best use cases

Long-form Stories – Visualise reading progress emotionally.
Wellness & Health – Add a human touch to medical or lifestyle landing pages.
Wedding & Events – Create a romantic atmosphere for event details.
Donation Pages – Symbolise support "filling up" as users scroll to the donate button.