---
title: "Scroll Circle — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Kevin Hardmeier · Text. Scroll Circle Animation is a unique Framer component that draws a circle around your text as the user scrolls.Perfect for section titles,…"
canonical: "https://framer.elliotli.dev/component/scroll-circle"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Scroll Circle

# Scroll Circle

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

![Scroll Circle preview image 1](https://framer.elliotli.dev/og/component/scroll-circle/56ef922c5f30f2d6/1600x1200.jpg)

## Summary

Scroll Circle Animation is a unique Framer component that draws a circle around your text as the user scrolls.Perfect for section titles, key messages, or callouts, it adds a…

## Description

Scroll Circle Animation is a unique Framer component that draws a circle around your text as the user scrolls.Perfect for section titles, key messages, or callouts, it adds a smooth, attention-grabbing effect with full customization.

## Instructions

-   Paste the component into your project.
    
-   Set your text and heading style (H1–H6).
    
-   Adjust circle distance, thickness, and animation speed.
    
-   Customize colors, fonts, and background to match your brand.
    
-   Preview in real-time inside Framer.
    

## How It Works

-   **Text / Heading Type**: Choose your label and heading size.
    
-   **Circle Distance**: Adjust spacing between text and circle.
    
-   **Circle Color & Thickness**: Full styling controls.
    
-   **Animation Speed & Delay**: Fine-tune scroll effect.
    
-   **Font & Text Color**: Match your design system.
    
-   **Background Color & Overflow**: Control visibility.
    

## Main Features

-   Eye-catching scroll animation.
    
-   Fully customizable design (fonts, colors, thickness).
    
-   Works with any heading or label.
    
-   Responsive and smooth in all layouts.
    
-   Plug & play, no code needed.
    

## Use Cases

-   Highlighting section titles on landing pages.
    
-   Drawing attention to services or features.
    
-   Adding storytelling elements in scroll experiences.
    
-   Creative headings in portfolios and agency sites.
    
-   Blog or editorial headers with emphasis.
    

Made with love by Le Lab Framer.

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

-   All · #9919

## Details

- **Author**: Kevin Hardmeier
- **Price**: $3.00
- **Published**: 2025-10-08
- **Updated**: 2025-10-08
- **Added**: 2025-10-02
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos