Awesome GitHub RepositoriesInterface Element Highlighting Systems

Driver.js is a browser-based library designed for creating interactive product tours and guided walkthroughs. It provides a framework for building step-by-step instructional sequences that help users navigate complex application interfaces, facilitating onboarding and feature discovery. The library distinguishes itself through its state-driven orchestration, which manages the sequence of steps and transition logic for guided tours. It utilizes a full-screen overlay layer to capture user interactions and isolate specific interface components, employing visual masking techniques to dim surround

This project is a declarative visualization library and geospatial framework designed for rendering large-scale data sets within web browsers. It functions as a high-performance graphics engine that leverages hardware acceleration to display complex 2D and 3D visual layers, enabling the visualization of millions of data points through a structured, component-based syntax. The framework distinguishes itself through its ability to synchronize custom data visualizations with third-party mapping platforms. By managing camera states and coordinate systems, it allows developers to overlay high-perf

Shepherd is a client-side onboarding framework and interactive product tour library used to create step-by-step guided walkthroughs. It functions as a UI guided tour system and DOM element highlighting tool that displays instructional overlays and tooltips to guide users through a web application interface. The system features a dynamic layout engine for anchoring tooltips to target elements and preventing screen overflow. It supports multi-element highlighting to draw attention to several UI components simultaneously and includes focus trapping to restrict keyboard navigation to active tour

react-joyride is a user onboarding library for React applications used to create interactive guided tours and walkthroughs. It provides a framework for defining sequences of tooltips and beacons that highlight specific user interface elements to introduce users to application features. The library distinguishes itself through a programmatic controller that allows developers to manage tour state, navigation, and lifecycle events via external application logic. It supports a high degree of visual extensibility, allowing the replacement of default tooltips and beacons with custom components to m

LaVague is an LLM web agent framework and large action model designed to translate natural language instructions into executable browser automation scripts. It functions as a multi-modal orchestrator that reasons over web page states and HTML content to automate multi-step tasks via a Selenium-based automation engine. The framework features a modular model provider layer, allowing users to swap between different language and vision models from providers such as Anthropic, Gemini, and Azure OpenAI. It employs a multi-modal world model to process screenshots and HTML structures, utilizing retri

ShowcaseView هي مكتبة تراكب واجهة مستخدم لنظام iOS وإطار عمل لتوجيه المستخدم. توفر مكونًا لتسليط الضوء على الميزات القابلة للتخصيص، مصممًا لعزل وتأكيد أزرار أو أقسام معينة في واجهة المستخدم للهاتف المحمول بصريًا. تتيح المكتبة إنشاء جولات تفاعلية للمنتج واكتشاف الميزات داخل التطبيق من خلال لفت الانتباه إلى عناصر واجهة محددة. كما تسمح بتخصيص مظهر التمييز، بما في ذلك الألوان والأشكال، لتتناسب مع المظهر البصري للتطبيق. يدير إطار العمل تجربة توجيه المستخدم من خلال تسليط الضوء على عناصر واجهة المستخدم وإرشاد المستخدمين عبر سلسلة من مكونات الواجهة.

TapTargetView هي مجموعة من مكونات واجهة المستخدم مصممة لتأهيل المستخدم واكتشاف الميزات. توفر وسائل إيضاح مرئية، ومؤشرات تركيز، وعلامات توجه انتباه المستخدم نحو عناصر شاشة معينة لتقديم وظائف جديدة أو مخفية. ينفذ النظام إرشادات Material Design لواجهة اكتشاف الميزات الخاصة به، مما يضمن بقاء الإبرازات المرئية ووسائل الإيضاح التفاعلية متسقة مع مواصفات التصميم الموحدة. يدعم إنشاء جولات منتج تفاعلية عن طريق ربط نقاط تفاعل متعددة في مسار تسلسلي. يتم تحقيق ذلك من خلال التموضع القائم على الإحداثيات ونظام طبقات يضمن بقاء عناصر التوجيه مرئية فوق واجهة التطبيق الحالية.

Instructions هو إطار عمل Swift مصمم لإنشاء جولات إرشادية وتجارب تأهيل المستخدم. يدير تسلسل ورسوم متحركة وتخطيطات فقاعات التعليمات وعلامات التمييز لتوجيه المستخدمين عبر ميزات التطبيق. توفر المكتبة أدوات لتمييز الواجهة، باستخدام تراكبات خلفية خافتة وقصاصات دقيقة لجذب الانتباه إلى عناصر واجهة مستخدم محددة. تتضمن آليات للتحكم في تدفق الجولة، مما يسمح للمطورين بإدارة التقدم الخطي، أو الانتقال إلى خطوات محددة، أو تنفيذ منطق تخطي الجولة. العناصر المرئية قابلة للتخصيص من خلال تراكبات خلفية قابلة للتكوين والقدرة على استبدال مكونات الفقاعة الافتراضية بعروض مخصصة. يتعامل إطار العمل مع مزامنة التخطيط لضمان تحديث العلامات ومسارات القصاصات بشكل صحيح أثناء تغيير حجم الشاشة أو اتجاهها.

bootstrap-tour هي مكتبة جولات منتج مصممة لإنشاء جولات إرشادية لمواقع الويب باستخدام إطار عمل Bootstrap. تعمل كأداة واجهة مستخدم تفاعلية تستخدم سلسلة من تلميحات النوافذ المنبثقة (popover) لتسليط الضوء على عناصر صفحة محددة وتوجيه المستخدمين عبر سير العمل. ينسق النظام التجارب الموجهة عبر صفحات متعددة عن طريق تعيين خطوات الجولة إلى عناوين URL فريدة. ويحافظ على تقدم المستخدم من خلال التخزين المحلي المستمر، مما يضمن استئناف الجولات في الخطوة الصحيحة بعد تحديث الصفحة. تتضمن المكتبة عناصر تحكم برمجية للبدء، أو الإيقاف المؤقت، أو الاستئناف، أو تخطي الخطوات، وتدعم الانتقالات التلقائية القائمة على المؤقت لتقديم التسلسل دون تفاعل يدوي. يتم توفير التوجيه المرئي من خلال تراكب خلفية داكن يعزل العناصر المستهدفة عن بقية محتوى الصفحة.

هذا المشروع عبارة عن مكتبة جولات إرشادية وإطار عمل لتأهيل المستخدمين في تطبيقات React. يوفر نظاماً لإنشاء جولات تفاعلية خطوة بخطوة باستخدام نوافذ منبثقة مثبتة على العناصر وأدوات قناع مرئي لتسليط الضوء على مكونات واجهة محددة. تركز المكتبة على إمكانية الوصول، حيث توفر دعماً مدمجاً لقارئات الشاشة والتنقل عبر لوحة المفاتيح لضمان تأهيل شامل للمستخدمين. يسمح النظام بتخصيص واسع النطاق من خلال تمكين استبدال عناصر الواجهة الافتراضية، مثل الشارات والأزرار، بمكونات React مخصصة. يغطي إطار العمل تنسيق الجولة من خلال إدارة الحالة واستهداف العناصر القائم على المحددات. يتضمن إمكانيات للتمرير التلقائي لمنطقة العرض، وإدارة انتقال النوافذ المنبثقة، والقدرة على تقييد تفاعل المستخدم مع الواجهة الأساسية أثناء الجولة.