SpotlightUI - Guided Focus Module

[Vvshenok]

Current Version: v1.0.0-pre (Pre-release)

SpotlightUI is an open-source guided focus module that lets you quickly build interactive tutorials, onboarding flows, and visual guidance systems in Roblox with just a few lines of code. It allows you to highlight UI elements and world objects using dynamic spotlight masks, pulsing effects, and step-based sequences through a clean, chainable API.

The module works using a step system. Each step focuses on a specific UI element or 3D object, and you can move between steps through code or player actions. This makes it easy to build onboarding tutorials, feature hints, or interactive walkthroughs. SpotlightUI supports different shapes like circles and squares and works for both UI and world targets.

SpotlightUI updates targets at runtime, so highlights stay accurate even if UI moves or changes. While it’s mainly built for tutorials, it can also be used for quick callouts or temporary highlights.

DEMO:

Rectangle / Square Shape [UI]

Circle Shape [UI]

World / Viewpoint [3D]

Getting started: Getting Started – SpotlightUI

Links:

Development Roadmap / Changelog

Development Roadmap

SpotlightUI is actively maintained and continuously improved. This section outlines planned features, bug fixes, and future enhancements.

---

Current Version: v1.0 (Pre-Release)

Known Issues

• Potential memory leaks in long-running or repeated spotlight sequences
• Circle shape width inconsistency on certain screen sizes
• Triangle shape rendering issue (appears as a sideways rectangle instead of a triangle)

---

Version 1.1 (Next Release)

Bug Fixes

• Fix memory leaks and improve cleanup reliability
• Fix triangle shape rendering and positioning
• Correct circle shape width inconsistencies
• Improve mobile touch detection
• Enhanced performance for multiple spotlights

New Features

• Custom Color Themes
• Click-to-Advance (auto progress on interaction)
• Progress Indicators (e.g. “Step 2 of 5”)
• Step Callbacks (OnShow, OnComplete)
• Arrow Indicators pointing to spotlight targets

---

Version 1.2 (Planned)

Features

• Multi-Target Highlighting
• Animation Presets (fade, bounce, zoom, slide)
• Custom Shapes (polygon support)
• Replay Controls (skip, previous, replay)
• Mobile Gestures support

---

Version 2.0 (Future)

Advanced Features

• Conditional Steps
• Branching Tutorials
• Voice-Over Integration
• World Space UI (billboard spotlights)

Polish & Accessibility

• High Contrast Mode
• Reduced Motion option
• Screen Reader compatible hints
• Analytics & Metrics

---

Community Requests

Have a feature request? Open an issue on GitHub.

Last updated: January 20, 2026

---

Credits

• @pobammer for the package Janitor
• @stravant for the package GoodSignal

[lolbiIlyyy]

Great module, very impressive documentation as well!

[IAmSamuelz]

Awesome product! Good work vv.

[Vvshenok]

Thank you, I appreciate the feedback!

[LoordySr (LoordySir)]

Could you show a vid of this in use?
: D

[Vvshenok]

Hello, I’ve uploaded videos to the Original Post!

[sz_Tolu (Tolu)]

awesome product, ty so much this gonna help soo much for onboarding systems

[remiel430 (Remy)]

This is great, you should set the anchor to middle

[Vvshenok]

Good Idea, i’m currently using top left based positioning internally I guess switching to center-anchored model would simplify the shape alignment and save me the work of doing alot of offset math

[iNvtellaX (Nutella)]

Is there any way i can disable the Text holder when activating the spotlight? i do not need it, and i’ve searched in the api and couldnt find any way to disable it.

[Vvshenok]

I’ll add a new method to disable the text holder!

[wolfscouthello1]

Awesome resource but I think you should tinker with the AnchorPoint because in one of your videos I was able to see a “breathing” animation but it wasn’t centered

[scooter_user (scooter)]

how did you make the circle shape spotlight? is it like an ImageLabel or what?

[Vvshenok]

Yes, someone else mentioned the anchor point, it is top left based and it’s not centered which will be fixed in the up-coming release.

[Vvshenok]

It’s a Frame with a UIStroke set to 10,000 thickness in Border mode and the stroke covers the screen while the frame itself becomes the transparent spotlight hole.

[BoowPows (00B)]

Can it follow ui element that changes positions

[Vvshenok]

Currently no, it’ll be added in the next release. You can manually run FocusUI with a RenderStepped connection if you know how to, until more features are added.

[xTheodxre (Exalted)]

This is great, I love it!!! Will definitely be using this in my current game. Just waiting on the better positioning

[xTheodxre (Exalted)]

You have any time estimation for when the next update is releasing??

[Vvshenok]

Due to Roblox terminating my Roblox account I cannot release any updates to the asset but I’ll make sure I have an update ready to go for when I receive my account back. Both appeals have been accepted, this SpotlightUI Asset was involved in the violation for “Misusing Roblox Systems” although it was false moderation thankfully.