Strategy
Positioning, structure and content that knows where it is going.
OBJECTS FOR THE WEB / 014Orbital Path
A LINE OF LIGHT FOR YOUR PAGEEnergy that
Energy that
finds its way.
Path
Color
SCROLL — THE ENERGY FOLLOWS YOUFOUR WAYS TO PLACE IT
01 · AS A TIMELINEFrom first call
From first call
to launch day.
A vertical Line with five nodes. Each step lights up as the energy reaches it.
- 01
Discover
We listen first: goals, audience, constraints and what success looks like.
- 02
Direction
A clear visual idea, tested on real content before anything is polished.
- 03
Design
Pages, motion and details, built as a system rather than a set of screens.
- 04
Build
Fast, accessible, responsive. Every interaction tuned on real devices.
- 05
Launch
Published, measured and handed over with everything your team needs.
Interface
Layouts and interactions that carry the reader forward.
Motion
Movement with a purpose, from the first scroll to the last.
Design the path.
Let the page
do the rest.
04 · CUSTOM SVG PATHAny shape
Any shape
you can draw.
Paste the d of an SVG path. It is fitted to the frame and the head travels the real curve.
M 10 150 C 90 30, 190 30, 230 120 C 260 190, 180 220, 170 150 C 160 80, 300 40, 390 110 S 560 170, 630 60ONE PATH. ANY PAGE.Guide the eye
Guide the eye
with light.
Line, Circle, Ellipse, Wave or your own SVG path, drawn by scroll or looping on its own. Place it behind content, between cards, around sections or as a timeline, with glow, trail, particles and nodes you control.
Download the componentOne Code File. React and Framer only.
Responsive, reduced motion and canvas preview included.