---
title: "Scroll Cue — Free Framer component · Best of Framer"
description: "Free Framer component · by Michael Slotta · Sections. Guide users to scroll down"
canonical: "https://framer.elliotli.dev/component/scroll-cue"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Scroll Cue

# Scroll Cue

Guide users to scroll down

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

![Scroll Cue preview image 1](https://framer.elliotli.dev/og/component/scroll-cue/b33b3c65cccb3e1f/1600x1200.jpg)

## Summary

Guide users to scroll down

## Description

## ScrollCue - Animated Scroll Indicator

**Guide users to scroll down effortlessly**

A customizable animated scroll indicator that guides users to explore content below the fold. Features smooth bounce animation, full styling control, and easy integration. Perfect for landing pages, hero sections, and any design needing a scroll hint.

### Features

**Smooth Animation**

-   Looping bounce effect with natural easing
-   Customizable animation speed (0.5s - 3s)
-   Adjustable pause duration between loops (0s - 5s)
-   Built with Framer Motion for optimal performance

**Complete Customization**

-   Adjust container dimensions (width & height)
-   Control animated dot size
-   Customize all colors: icon, background, and border
-   Fine-tune border width and radius
-   Responsive at any size

**Easy Integration**

-   Drag and drop onto your canvas
-   No coding required
-   Works seamlessly with any Framer project
-   Lightweight and performant

### Perfect For

-   **Landing Pages** - Guide visitors to your key content
-   **Hero Sections** - Indicate there's more to discover
-   **Long-Form Content** - Help users navigate lengthy pages
-   **Portfolio Sites** - Add professional polish to your work
-   **SaaS Products** - Improve onboarding and user flows
-   **Storytelling Experiences** - Direct attention naturally

### Customization Options

**Appearance**

-   Mouse container width (default: 28px)
-   Mouse container height (default: 46px)
-   Dot size (default: 8px)
-   Icon color
-   Background color
-   Border color
-   Border width (default: 2px)
-   Border radius (default: 20px)

**Animation**

-   Animation speed (default: 1.5s)
-   Pause duration between loops (default: 0.5s)

### Use Case Examples

**Minimal Landing Page** Set a white background with black border and icon for clean, modern aesthetic

**Dark Mode Design** Use dark background with accent color border to match your brand

**Glassmorphism Style** Add semi-transparent background with subtle border for contemporary look

**Brand Integration** Match your brand colors perfectly with full color control

### How to Use

1.  **Add to Canvas** - Drag ScrollCue component onto your Framer canvas
2.  **Position** - Place at the bottom of your hero section or anywhere you want to guide scrolling
3.  **Customize** - Adjust colors, sizes, and timing in the component properties
4.  **Publish** - Your scroll indicator is ready to guide users

### Technical Details

-   Built with Framer Motion for smooth, performant animations
-   Fully responsive and works at any scale
-   Lightweight with minimal impact on page load
-   Compatible with all modern browsers
-   No external dependencies required

### What's Included

-   1 ScrollCue component
-   Full customization controls
-   Ready to use out of the box
-   Lifetime updates

### Tips for Best Results

-   Place 60-80% down the viewport height for optimal visibility
-   Use contrasting colors to ensure visibility against your background
-   Keep animation speed between 1-2 seconds for natural feel
-   Test on mobile to ensure it's visible but not intrusive
-   Consider using subtle colors to avoid overwhelming your design

**Transform passive viewers into active explorers. Add ScrollCue to your project today.**

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

-   All · #731

## Details

- **Author**: Michael Slotta
- **Published**: 2026-02-12
- **Updated**: 2026-06-07
- **Added**: 2026-02-05
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove