Scroll-Drawn Journey Path — Multi-Stage Roadmap Lesson

What it does

• Scroll-drawn path — a faint dashed path is visible on load; an active colored path draws itself in as the learner scrolls
• Activating milestone markers — each marker fills, scales up, and gains a soft shadow as the learner reaches its point on the path
• Per-milestone teaching card — each card fades in and slides up alongside its milestone with a headline, two paragraphs, and a focus box
• Alternating left/right layout — cards alternate sides along the meandering curve on desktop, collapsing to a single column on mobile
• Honest cost block — a 'what this journey will cost you' reflection block names the actual cost of the work in plain language
• Closing CTA card — closes with a 'begin lesson 02' card and a small press feedback for tactile finish

Best use cases

• Recovery and behavior change — sobriety arcs, eating-disorder recovery, smoking cessation, gambling recovery
• Mental health teaching — stages of grief, the arc of postpartum, the shape of burnout recovery
• Career and professional transitions — six stages of leaving an industry, the founder's first year
• Fitness and physical transformation — 12-week strength arcs, postpartum return, race-prep cycles
• Spiritual and contemplative practice — naming the shape of the work as part of the work
• Creative-practice journeys — first novel, year of daily painting, language-learning fluency arc

What you can change with your DNA

When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:

• Colors — six slots: page background, paper, ink, soft ink, journey-path color, and a sparingly used accent. Swap whole-palette per niche (pale blue + navy + amber for fitness, pale rose + plum + gold for relationship work)
• Fonts — two roles: a display serif with italic personality for headlines, and a clean body sans for paragraphs
• Copy — opener, journey title, six milestones (label, headline with italic, two paragraphs, focus box), reflection block, closing CTA. The reflection block is non-negotiable — it's what separates this from a happy-path roadmap
• Images — none required; the path is the only graphic. Markers can swap to icons, emoji, or symbols if numbers don't fit the niche
• Behavior — path geometry (S-curve, climb, descent, spiral, zigzag), number of milestones (five to seven), draw speed, and milestone enter trigger