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.
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.
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.
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.
