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.
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
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
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)
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
Add to Canvas - Drag ScrollCue component onto your Framer canvas
Position - Place at the bottom of your hero section or anywhere you want to guide scrolling
Customize - Adjust colors, sizes, and timing in the component properties
Publish - Your scroll indicator is ready to guide users
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
1 ScrollCue component
Full customization controls
Ready to use out of the box
Lifetime updates
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.
Michael Slotta
