ScrollMotion

ScrollMotion is a fluid, high-end decorative component for Framer that adds a touch of elegance to any website. It features a custom-curved line with a glowing dot that travels smoothly as the user scrolls down the page.

Key Features:

• Dynamic Section Controls: Easily list sections by name or ID to make the line pass "Over" normally or slide "Under" to seamlessly disappear inside elements.

• Scroll-Synced Travelling Dot: An animated dot glides along the path, reacting dynamically to overall page scroll progress.

• Auto-Contrast Color Switching: Automatically detects background colors, images, or videos behind the dot to flip between dark and light modes for optimal visibility.

• Fully Customizable: Adjust line thickness, dot size, curve sway, edge blending, and custom mobile positioning with intuitive property controls.

• Canvas Preview Mode: Test and preview the dot’s position directly on the Framer design canvas without needing a live preview.

How to Use:

Place ScrollMotion once per page (ideally set position to Fixed, top 0, left 0, Width/Height 100%). Add your section names to the control list and enjoy a seamless, premium interactive scrolling experience!