# 🔥 Introducing SmartLine — scroll tracking, section markers, and smart labels in one component **URL:** https://forums.realmacsoftware.com/t/introducing-smartline-scroll-tracking-section-markers-and-smart-labels-in-one-component/55849 **Category:** Elements Store **Tags:** elements, progress-bar **Created:** [April 23, 2026, 1:12pm UTC](https://forums.realmacsoftware.com/t/introducing-smartline-scroll-tracking-section-markers-and-smart-labels-in-one-component/55849 "2026-04-23T13:12:29Z") **Posts on this page:** 1 **Page:** 1
### Author: ![Massimo](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/massimo/32/25456_2.png) [@Massimo](https://forums.realmacsoftware.com/u/Massimo) #### Post date: [April 23, 2026, 1:12pm UTC](https://forums.realmacsoftware.com/t/introducing-smartline-scroll-tracking-section-markers-and-smart-labels-in-one-component/55849/1 "2026-04-23T13:12:29Z")
Hey everyone 👋 Just released SmartLine, now live on the Elements store. Quick heads-up before the feature list: **SmartLine is far more than a simple progress bar.** A progress bar is just one of the things it can render. Underneath, it’s a complete scroll-tracking and section-navigation system — with configurable tracking sources, multiple marker placement strategies, three label styles, and a companion anchor component that turns any page into a live, navigable outline. A bullet list can only convey so much — **do yourself a favour and check the live demo linked below** before forming an opinion. That’s where SmartLine actually shows what it can do. [![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/2/32ff29ca225a198a2480b1176674edbec5146c51.jpeg "SmartLine for Elements") ](https://www.youtube.com/watch?v=AhlqAvMZsr4) ## 3 Tracking modes SmartLine doesn’t just track page scroll. You pick what it follows: • **Full Page** — classic reading-progress behavior, tracks the entire page from top to bottom • **SmartLine Anchors** — tracks sections you’ve marked with the companion SmartLine Anchor component, turning SmartLine into a live table-of-contents navigator • **Custom Element** — tracks any element on the page via CSS selector: the article body, a single feature section, a scrollable panel inside a page, anything This is already a big leap over typical progress bar components, which usually track the whole page and stop there. [screenshot: the 3 tracking modes applied to the same page] ## 4 Marker placement modes Once you enable markers, SmartLine can distribute them in any of these ways: • **Every 10% / 20% / 25% / 50%** — fixed percentage intervals along the tracked range • **SmartLine Anchors** — one marker per anchor dropped on the page • **Heading Tags** — one marker per H1 / H2 / H3 / H4 / H5 / H6 automatically detected in the tracked element • **Custom Selector** — one marker per element matching a CSS selector of your choice That means with two clicks you can turn SmartLine into a proper **document outline** — no manual anchor setup, the component reads the headings for you. ## 3 Label types, with smart content Labels attach to markers and can be rendered in three styles: • **Static Position** — sit next to each marker, always visible • **Dynamic Position** — slide along with the scroll indicator, showing live values • **Tooltip on Hover** — hidden by default, appear when the user hovers a marker And the content isn’t just percentages: • **Tracking Percentage** — live scroll position inside the tracked range • **Reading Time** — estimated time to finish, based on a configurable words-per-minute rate • **SmartLine Anchor Labels** — custom text you set on each anchor • **Heading Tag Labels** — auto-extracted heading text ## Show only in range When SmartLine tracks an anchor or a custom element, it doesn’t have to stay on screen the whole time. Enable **Visible Only in Tracking Range** and SmartLine smoothly appears when the tracked element enters the viewport, and disappears when it leaves. Perfect for long pages where a progress indicator should only show up on the relevant section — not follow the reader everywhere. ## Hover effects everywhere The bar, the markers, and the labels each have their own hover states — colors synced across all three so the interaction feels cohesive. Combined with SmartLine’s theme integration (colors, shadows, border radii, typography), everything stays consistent with your site’s design system. ## And plenty more The above covers the headline features, but SmartLine also includes: four positions (top, bottom, left, right — so horizontal or vertical), arrow and keyboard navigation between sections, URL hash synchronization as the user scrolls, configurable smooth-scroll behavior, draggable dynamic labels, responsive dots on most properties so SmartLine reshapes per breakpoint, and a handful of smaller refinements. The best way to explore them is the live demo linked below. ## Perfect for • Long-form articles and documentation with a real table of contents (pick anchors, heading tags, or a custom selector — your call) • Product pages where progress should show only while the user is on a specific section • Sites and editors with scrollable panels that deserve their own progress indicator • Any layout where “where am I on the page” deserves a proper answer, not just a thin bar at the top ## Links 👉 **Live demo: [SmartLine for Elements - RW Pro Space](https://www.rwpro.space/preview/smartline/)** 👉 **Get SmartLine: [Elements Store](elementsapp://storeProduct/space.rwpro.smartline)** > **The demo walks through all tracking modes** , marker placements, and label styles in context, and it’s where the “much more than a progress bar” part really clicks Happy to answer questions or take feedback here. Thanks! — Massimo