Orbital Scroll Path

About Orbital Path

Guide the eye with light. A line of energy that fills as the page scrolls while a glowing head travels the real curve, trailing light and sparks. Line, Circle, Ellipse, Wave or your own SVG path, placed behind content, between cards, around sections or as a timeline with nodes that light up. Scroll-driven or looping, responsive, lighter on mobile, reduced motion included.

Features

• Five path types, including any custom SVG path.

• Scroll-driven progress with start, end and smoothing, or a continuous loop.

• A light head that rides exactly on the path, with halo, speed streak and trail.

• Soft glow, base line color and opacity.

• Optional particles shed by the moving head.

• Timeline nodes that light up as the energy passes.

• Reverse direction and start angle.

• Rebuilt for every size; fewer particles and softer glow on mobile.

• Click-through, decorative and reduced-motion aware.

• One standalone React + TypeScript file.

• 29 controls in the Framer properties panel

• Respects prefers-reduced-motion

• Renders correctly on the Framer canvas and in export

Created by LUNAUT Studio.