spotlight.js

What It Is

When launching new features in complex web applications, user drop-off often occurs simply because users don't know where to click or how a newly introduced tool operates. Heavy onboarding tour libraries often drag in megabytes of dependencies, break responsive viewports, and clash with host app styles.

spotlight.js was built as a clean, dependency-free vanilla JavaScript library that dims background interfaces, cuts out dynamic SVG masks around focal DOM elements, and walks users through features step-by-step.

---

What It Does

• Dynamic Element Masking: Smoothly animates focus borders and highlights around target HTML elements regardless of screen resize or scroll events.
• Smart Tooltip Placement: Calculates viewport boundaries on the fly to position guidance bubbles above, below, or beside targeted components without overflowing the screen.
• Progress Tracking & Callbacks: Provides event listeners for step progression, skip events, and completion hooks to persist user onboarding state.

---

Skills Used & Key Learnings

• Deep DOM manipulation, geometry calculation, and CSS clip-path masking techniques.
• Built as an educational exploration into UI library development, later applied directly when designing onboarding walkthroughs for client dashboards at DOTIX.