Calls to action
CTA - Sticky progress bar
Bottom-anchored sticky bar that reveals after a scroll threshold, with a scroll-progress hairline.
- Scroll progress
- Conditional reveal
- scaleX transform
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
A call-to-action bar is anchored to the bottom of the viewport and stays hidden until the visitor scrolls past a set threshold, then slides into view. Along its edge a hairline tracks reading progress, scaling horizontally as scroll position advances so the visitor can see how far through the page they are.
When to use it
- A long landing page that wants a persistent CTA without an intrusive popup
- A content or blog page where a progress hairline adds useful orientation
- Any page where you want the CTA to appear only once the visitor is engaged
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 0.05-0.7
revealAtReveal at scroll
Related components
Using this block
Buy it, then copy components/blocks/cta-sticky-progress/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.