Scroll Navigator

Scroll Navigator

About Scroll Navigator

The indicator now supports hyperlinks, transforming it from a simple scroll tracker into an interactive element.

The Dynamic Scroll Navigator is a highly versatile, animation-driven UI component designed to guide users through long-form content. It serves as both a visual cue and an interactive tool.

Key Features:

  • Four Adaptive Layouts: Seamlessly switch between a rotating text ring, a clean vertical stack, a minimalist icon, or a stylized badge.

  • Scroll-Aware Behavior: Automatically hides or reveals the component based on a custom scroll-depth threshold to ensure a clutter-free experience.

  • Interactive Motion: Features fluid, physics-based entrance animations and customizable "hover-to-pause" behavior for the circular layout.

  • Smooth Navigation: Built-in anchor link support allows users to jump directly to specific section IDs with a smooth scroll effect.

  • Visual Customization: Full control over typography, icon selection (including custom SVG uploads), and component sizing to match your design system.

Implementation Tips

  • For Performance: When using the "Hide on Scroll" feature, ensure your hideAfterPx value is calculated based on the height of your hero or landing section for the best user experience.