इस प्रोजेक्ट के बारे में

# thinking-orbs AI और एजेंट UI के लिए बिंदीदार थॉट-ऑर्ब लोडिंग इंडिकेटर। नौ हाथ से ट्यून किए गए एनिमेटेड स्टेट, प्रत्येक दो उद्देश्य-ट्यून आकारों में उपलब्ध, सादे 2D कैनवास पर रेंडर किया गया — कोई WebGL नहीं, कोई फ़िल्टर नहीं, Chrome, Safari और Firefox में समान रूप से काम करता है। [लाइव डेमो](https://orbs.jakubantalik.com) · [रिपॉजिटरी](https://github.com/Jakubantalik/thinking-orbs) · [समस्या रिपोर्ट करें](https://github.com/Jakubantalik/thinking-orbs/issues) ## इंस्टॉल करें ```bash npm install thinking-orbs ``` ## त्वरित शुरुआत ```tsx import { ThinkingOrb } from 'thinking-orbs'; function Status() { return <ThinkingOrb state="searching" size={64} />; } ``` ## स्टेट नौ क्रियाएँ जो एक एजेंट कर सकता है, प्रत्येक एक अलग एनिमेशन के साथ: ```tsx <ThinkingOrb state="working" /> {/* झुकी हुई कक्षाओं पर कण */} <ThinkingOrb state="searching" /> {/* एक स्कैन मेरिडियन बिंदीदार ग्लोब को स्कैन करता है */} <ThinkingOrb state="solving" /> {/* बैंड स्क्रैम्बल होते हैं, फिर हल होकर वापस क्लिक करते हैं */} <ThinkingOrb state="listening" /> {/* एक वेवफॉर्म रिंग्स के माध्यम से घूमता है */} <ThinkingOrb state="connecting" /> {/* एक नक्षत्र खुद को जोड़ता है */} <ThinkingOrb state="weaving" /> {/* तीन धागे गोले के चारों ओर लटते हैं */} <ThinkingOrb state="composing" /> {/* एक लहरदार मल्टी-बैंड सैश */} <ThinkingOrb state="breathing" /> {/* एक रिंग धीरे-धीरे बदलती है */} <ThinkingOrb state="shaping" /> {/* बिंदीदार रूपरेखा: वृत्त → त्रिभुज → वर्ग */} ``` ## आकार दो ट्यून किए गए प्रीसेट — अलग डिज़ाइन, स्केल फैक्टर नहीं। चैट-अवतार स्केल के लिए `64`, इनलाइन-टेक्स्ट स्केल के लिए `20`। प्रत्येक की अपनी डॉट संख्या, डॉट आकार और गति ट्यूनिंग होती है: ```tsx <ThinkingOrb state="working" size={64} /> <ThinkingOrb state="working" size={20} /> ``` ## थीम सख्ती से मोनोक्रोम — डार्क बैकग्राउंड के लिए हल्की स्याही, हल्के बैकग्राउंड के लिए गहरी स्याही — मोड होस्ट प्रोजेक्ट से स्वचालित रूप से चुना जाता है: ```tsx <ThinkingOrb theme="auto" /> {/* डिफ़ॉल्ट — प्रोजेक्ट से पता लगाता है */} <ThinkingOrb theme="dark" /> {/* पिन: डार्क बैकग्राउंड के लिए हल्के डॉट्स */} <ThinkingOrb theme="light" /> {/* पिन: हल्के बैकग्राउंड के लिए गहरे डॉट्स */} ``` `auto` तीन परतों में हल होता है और उनमें से किसी के बदलने पर लाइव अपडेट होता है: 1. एक पूर्वज `data-theme="dark|light"` विशेषता या `dark`/`light` क्लास (Tailwind / shadcn कन्वेंशन), `MutationObserver` के माध्यम से देखा जाता है; 2. अन्यथा `prefers-color-scheme`, लाइव OS थीम स्विच के लिए सब्सक्राइब किया गया; 3. SSR-सुरक्षित — कैनवास केवल क्लाइंट पर, थीम हल होने के बाद पेंट करता है। ## अन्य प्रॉप्स ```tsx <ThinkingOrb state="solving" size={20} speed={1.5} // प्रीसेट की बेक्ड गति पर गुणक paused={false} // वर्तमान फ्रेम पर फ्रीज़ करें aria-label="Analysing repository…" // प्रति-स्टेट डिफ़ॉल्ट को ओवरराइड करता है /> ``` अन्य सभी `<canvas>` प्रॉप्स (`className`, `style`, `data-*`, …) पास-थ्रू होते हैं। ## एक्सेसिबिलिटी और प्रदर्शन - `role="img"` बॉक्स से बाहर उचित प्रति-स्टेट `aria-label` के साथ। - `prefers-reduced-motion: reduce` एक स्थिर प्रतिनिधि फ्रेम रेंडर करता है — कोई एनिमेशन नहीं — और फिर भी लाइव थीम का पालन करता है। - प्रत्येक इंस्टेंस स्क्रॉल करके ऑफस्क्रीन (`IntersectionObserver`) या टैब छिपे होने पर स्वचालित रूप से रुक जाता है, और चरण में फिर से शुरू होता है — सभी इंस्टेंस एक घड़ी साझा करते हैं। - केवल सादे 2D कैनवास आर्क: कोई `ctx.filter`, कोई SVG फ़िल्टर, कोई WebGL नहीं — हर जगह समान पिक्सेल, कम-अंत डिवाइसों पर सस्ता। डिवाइस-पिक्सेल-अनुपात 2 पर सीमित। ## लाइसेंस MIT © Jakub Antalik