প্রকল্প সম্পর্কে

# 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-*`, …) পাস-থ্রু হয়। ## অ্যাক্সেসিবিলিটি ও পারফরম্যান্স - বাক্সের বাইরে একটি বোধগম্য প্রতি-স্টেট `aria-label` সহ `role="img"`। - `prefers-reduced-motion: reduce` একটি স্থির প্রতিনিধিত্বমূলক ফ্রেম রেন্ডার করে — কোনো অ্যানিমেশন নেই — এবং এখনও লাইভ থিম অনুসরণ করে। - প্রতিটি ইনস্ট্যান্স স্ক্রিনের বাইরে স্ক্রোল করা হলে (`IntersectionObserver`) বা ট্যাব লুকানো থাকলে স্বয়ংক্রিয়ভাবে বিরতি দেয় এবং ফেজে পুনরায় শুরু হয় — সমস্ত ইনস্ট্যান্স একটি ঘড়ি ভাগ করে। - শুধুমাত্র সাধারণ 2D ক্যানভাস আর্ক: কোনো `ctx.filter` নেই, কোনো SVG ফিল্টার নেই, কোনো WebGL নেই — সর্বত্র একই পিক্সেল, কম-এন্ড ডিভাইসে সস্তা। ডিভাইস-পিক্সেল-অনুপাত 2-এ সীমাবদ্ধ। ## লাইসেন্স MIT © Jakub Antalik