Heart On Scroll

Gradient heart fills on scroll by Aidan Looker

Show PreviewBuy for $3
Heart On Scroll

About Heart On Scroll

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.

Questions or custom requests?