---
title: "Heart On Scroll — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Aidan Looker · Interactive. What is Heart On Scroll?"
canonical: "https://framer.elliotli.dev/component/heart-on-scroll"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Heart On Scroll

# Heart On Scroll

Gradient heart fills on scroll

[View on Framer](https://framer.com/marketplace/components/heart-on-scroll/?via=elliot-li)

![Heart On Scroll preview image 1](https://framer.elliotli.dev/og/component/heart-on-scroll/02b253836a249015/1600x1200.jpg)

## Summary

What is Heart On Scroll?

## Description

## 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.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## 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?

-   We design and build custom Framer components. Get in touch at [contact@teampixel.com.au](mailto:contact@teampixel.com.au).
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #9847

## Details

- **Author**: Aidan Looker
- **Price**: $3.00
- **Published**: 2026-01-14
- **Updated**: 2026-06-13
- **Added**: 2026-01-01
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step