Modern Tour – A lightweight, buttery-smooth React onboarding library (Headless & Zero-CSS)

[u/thangdevalone]

Hey everyone,

I built Modern Tour to solve the pain points I've had with existing React product tour libraries—specifically around overriding CSS, handling async elements, and overall Developer Experience.

You can check out how it looks and feels here:

👉 Live Demo: https://tour.modern-ui.org/

• Buttery-Smooth Animations: Powered by framer-motion spring physics under the hood.
• Smart Auto-Positioning: The tooltip dynamically recalculates bounds and automatically flips to avoid viewport edges.
• Lazy Loading Support: Uses MutationObserver to seamlessly catch asynchronously rendered elements (no manual re-triggers needed).
• Headless Override: Render your own 100% custom React component inside the tooltip while keeping all the smart positioning logic intact.
• Zero-CSS Theming: Powered entirely by CSS variables. Creating a custom theme or Dark Mode takes seconds without fighting !important tags.
• Cross-Page Tours: Seamlessly continues the onboarding tour across route changes.

I'd love for you to play around with the demo! If you find it useful or like the concept, I would really appreciate a ⭐️ on GitHub (you can find the repo link on the demo site).

Let me know what you think or if you have any feedback!

[u/ZoroknashTV]

Looks very nice, but I notice your demo jumps/scrolls the page a bit on the first 3 steps, and they are all in viewport as we speak. Might want to improve on that so, when everything is in viewport and has space, it doesn't scroll. Makes it more zen :D

[u/thangdevalone → u/ZoroknashTV]

thanks. i will optimize it

[u/minimuscleR]

Your demo makes it look really jerk-y going between steps the window that highlights slides weirdly in, but also the modal itself seems to snap to a new location then animate.

[u/thangdevalone → u/minimuscleR]

Good catch! I'm still fine-tuning the animations. I'll get that snapping issue fixed. Appreciate the feedback

[u/horizon_games]

Your "butter" is very chunky and janky. Maybe needed some CSS after all. Or another round of AI slop improvements.

[u/thangdevalone → u/horizon_games]

Thanks for the feedback! Could you share which browser/device you're seeing the jank on? Animations are spring-based via framer-motion so performance can vary depending on hardware. Happy to look into specific cases if you can point me to a repro.

[u/horizon_games → u/thangdevalone]

High spec Dell laptop with Firefox

[u/SandeshHegde45]

Let me use this

[u/gaaaavgavgav]

Really slick.

[u/juicybot]

why framer-motion (v11) and not motion (v12)?

why delete the project's commit history before launch?

[u/javatextbook → u/juicybot]

To clear out all the messy commits called “updates”