Pill Scroll Bar — Minimalist Scroll Tracker
Elevate your site's UX with a premium, highly-polished Pill Scroll Bar navigation component. Modeled after clean capsule geometries, this tracker gives visitors a sleek, minimalist visual cue of how far they have scrolled down your page.
It is completely collision-proof and engineered to integrate natively with Framer's built-in workspace styling panel.
🌟 Key Features
Perfect Canvas Preview: Displays a 50/50 color split inside your Framer design view so you can immediately preview your style combinations without guessing.
Flawless Live Execution: Synchronizes perfectly with browser viewports to transition smoothly from 100% unprogressed background to full tracking color.
Custom Corner Radius: Use the native slider property to adjust corner roundness. Dial it up for a smooth capsule pill shape or lower it down to fit sharp, boxy grids.
Framer-Native Sizing: Adjust component width and height directly using Framer’s right-hand Size panel—its structural geometry scales perfectly without distortion.
Collision-Proof Layout: Built to leverage Framer’s native wrapper layout properties, preventing preview collapses or 0px rendering bugs.
Instant Sidebar Controls: Toggle your progress tracking and base background colors instantly via built-in color pickers.
Pill Scroll Bar — Minimalist Scroll Tracker
Elevate your site's UX with a premium, highly-polished Pill Scroll Bar navigation component. Modeled after clean capsule geometries, this tracker gives visitors a sleek, minimalist visual cue of how far they have scrolled down your page.
It is completely collision-proof and engineered to integrate natively with Framer's built-in workspace styling panel.
🌟 Key Features
Perfect Canvas Preview: Displays a 50/50 color split inside your Framer design view so you can immediately preview your style combinations without guessing.
Flawless Live Execution: Synchronizes perfectly with browser viewports to transition smoothly from 100% unprogressed background to full tracking color.
Custom Corner Radius: Use the native slider property to adjust corner roundness. Dial it up for a smooth capsule pill shape or lower it down to fit sharp, boxy grids.
Framer-Native Sizing: Adjust component width and height directly using Framer’s right-hand Size panel—its structural geometry scales perfectly without distortion.
Collision-Proof Layout: Built to leverage Framer’s native wrapper layout properties, preventing preview collapses or 0px rendering bugs.
Instant Sidebar Controls: Toggle your progress tracking and base background colors instantly via built-in color pickers.
