← Library
Journey
Path Trace Journey
A hairline route draws across the stage as you scroll while a marker — a plane, a footprint trail, a cursor — travels along it, banking into the curves and dropping waypoint labels as it passes them.
- Difficulty
- Advanced
- Credits saved
- ~260
- Access
- Members
Technique
stroke-dashoffset tied to progress for the draw, getPointAtLength on the same path for the marker position, and a second sample a few pixels ahead to derive the heading angle so the marker banks correctly.
Choreography spec
300vh wrapper, sticky 100vh stage
- 0 → 1dashoffset draws the route continuously
- per waypointmarker passes → dot scales in, label fades up
- curvesheading derived from a +6px lookahead sample
Reversibility
Marker position is a pure function of progress along the path.
Reduced motion
Full route drawn, all waypoints labelled, marker at the end.
path-trace-journey.prompt
Build a "path-trace-journey" section for my landing page. TECHNIQUE stroke-dashoffset tied to progress for the draw, getPointAtLength on the same path for the marker position, and a second sample a few pixels ahead to derive the heading angle so the marker banks correctly. SPEC ██████████████████████████████████████████████ ██████████████████████████████████████ ████████████████████████████████████████████████████ RULES ████████████████████████████████████████████ ██████████████████████████████████████████████████
Full prompt unlocks with membership.
Journey