Orbital Scroll Path

Orbital Scroll Path
Orbital Scroll Path

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

From Lunaut Studio

Dissolve
Refraction Glass Kit
Liquid Transition
Light Threads

Related Components

Motion Text FX
Magnetic Button pro
Watter ripple effect
Softly Tilt