Heart On Scroll — 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.