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

# Libraries.dev **AI এজেন্টদের জন্য উচ্চমানের UI লাইব্রেরি।** ইন্টারফেসকে জীবন্ত অনুভব করানোর ইফেক্টের জন্য সাতটি React লাইব্রেরি: একটি কার্ডের বর্ডার ধরে চলা আলোর রশ্মি, মডেল কাজ করার সময় চিন্তা করা অর্ব, জীবন্ত মুখের বট অ্যাভাটার, তরলের মতো মিশে যাওয়া শেপ, আপনার কণ্ঠের সঙ্গে উঠে আসা গ্লো, আলো ধরে রাখা ব্রাশড মেটাল, এবং একটি ইমেজ লোডার যা পিক্সেল মোজাইককে আসল ছবিতে দ্রবীভূত করে। প্রতিটি npm থেকে ইনস্টল হয় এবং আপনার অ্যাপে একটি একক কম্পোনেন্ট হিসেবে ঢুকে পড়ে যা আপনার বিদ্যমান এলিমেন্টকে র‍্যাপ করে। আপনার মার্কআপ তার সেমান্টিক্স ধরে রাখে, ইফেক্টটি তার চারপাশে বা পেছনে রেন্ডার হয়, এবং পুরো জিনিসটি হাতে লেখা WebGL-এর বদলে প্রপস দিয়ে টিউন করা হয়। | লাইব্রেরি | এটি কী করে | npm | পেজ | | --- | --- | --- | --- | | [Border beam](packages/border-beam) | একটি কার্ড, বাটন বা ইনপুটের বর্ডার ধরে চলা নরম গ্লো | `npm install border-beam` | [libraries.dev/beam](https://libraries.dev/beam) | | [Thinking orbs](packages/thinking-orbs) | আপনি অপেক্ষা করার সময় চিন্তা করা অর্ব — AI ইন্টারফেসের জন্য নয়টি লোডিং স্টেট | `npm install thinking-orbs` | [libraries.dev/orbs](https://libraries.dev/orbs) | | [Bot avatars](packages/bot-avatars) | জীবন্ত মুখের অ্যানিমেটেড বট অ্যাভাটার — AI এজেন্টদের জন্য আঠারোটি গ্লসি শেপ, চারটি স্টেট | `npm install bot-avatars` | [libraries.dev/avatars](https://libraries.dev/avatars) | | [Gooey](packages/liquid-gooey) | টুকরো যা গুয়ের মতো মিশে যায় এবং জেলির মতো মরফ করে, টেক্সট স্পষ্ট থাকে | `npm install liquid-gooey` | [libraries.dev/gooey](https://libraries.dev/gooey) | | [Voice](packages/voice-glow) | চ্যাট ইনপুট বা ফোন স্ক্রিনের নিচ থেকে আপনার কণ্ঠের সঙ্গে উঠে আসা গ্লো | `npm install voice-glow` | [libraries.dev/voice](https://libraries.dev/voice) | | [Metal](packages/metal-fx) | বাটন, আইকন, টেক্সট ও ব্যাজের জন্য লিকুইড মেটাল, রিফ্লেকশন ও কার্সর লাইট সহ | `npm install metal-fx` | [libraries.dev/metal](https://libraries.dev/metal) | | [Image](packages/img-fx) | একটি লোডার যা নিজেই ইমেজ হয়ে যায় — একটি WebGL পিক্সেল মোজাইক যা ছবিতে থিতিয়ে পড়ে | `npm install img-fx` | [libraries.dev/image](https://libraries.dev/image) | প্রতিটি [libraries.dev](https://libraries.dev)-এ চেষ্টা করুন: খেলার জন্য একটি লাইভ প্রিভিউ, ইনস্টল কমান্ড, ব্যবহারের কোড, এবং একটি প্লেগ্রাউন্ড যা সঠিক কনফিগারেশন কপি করে। ## কীভাবে ব্যবহার করবেন প্রতিটি লাইব্রেরি একটি প্রম্পট হিসেবে আসে। এটি কপি করুন, আপনার কোডিং এজেন্টে পেস্ট করুন, এবং এটিকে আপনার করে নিন — তিনটি ধাপ, কোনো সেটআপ নেই। 1. **প্রম্পট কপি করুন।** প্রতিটি লাইব্রেরি পেজে একটি *Copy prompt* বাটন আছে। একটি পেস্ট আপনার এজেন্টকে পুরো লাইব্রেরি দেয়: এর প্যারামিটার শব্দভাণ্ডার এবং আপনার বর্তমান সেটিংস। 2. **এটি আপনার এজেন্টে পেস্ট করুন।** এটি Claude Code, Cursor বা Codex-এ ফেলুন। এজেন্ট প্যাকেজটি ইনস্টল করে এবং আপনার থিমের সঙ্গে মিলিয়ে এটি যুক্ত করে। 3. **এটিকে আপনার করে নিন।** প্রতিটি নবের জন্য Pro সহ [Studio](https://libraries.dev/studio.html) খুলুন, লাইভ টিউন করুন এবং ফলাফলটি প্রপস হিসেবে কপি করুন। অথবা সাধারণ উপায়ে: ```bash npm install border-beam # or thinking-orbs, bot-avatars, liquid-gooey, voice-glow, metal-fx, img-fx ``` ```tsx import { BorderBeam } from "border-beam"; <BorderBeam> <button>Get started</button> </BorderBeam> ``` প্রতিটি প্যাকেজের README তার প্রপস ডকুমেন্ট করে। ## FAQ **আমার কী প্রয়োজন?** React 18 বা নতুন। প্রতিটি লাইব্রেরি শূন্য রানটাইম ডিপেন্ডেন্সি সহ একটি স্বতন্ত্র প্যাকেজ, শুধুমাত্র Image ছাড়া, যার একটি পিয়ার ডিপেন্ডেন্সি হিসেবে `three`-ও প্রয়োজন। **এগুলো কি কোডিং এজেন্টদের সঙ্গে কাজ করে?** হ্যাঁ — এটাই মূল কথা। প্রতিটি লাইব্রেরি Cursor, Claude Code এবং Codex থেকে পরিষ্কারভাবে ইনস্টল ও কনফিগার হয়, এবং প্রতিটি প্লেগ্রাউন্ডের কপি-প্রম্পট বাটন আপনার এজেন্টকে লাইব্রেরির সম্পূর্ণ প্যারামিটার শব্দভাণ্ডার এবং আপনার বর্তমান সেটিংস দেয়। **লাইট ও ডার্ক মোড?** উভয়ই, আপনার জন্য সনাক্ত করা হয়। ডিফল্ট `theme="auto"` একটি পূর্বপুরুষে `data-theme` অ্যাট্রিবিউট বা `dark` ক্লাস রিজলভ করে, তারপর `prefers-color-scheme`-এ ফিরে যায়, যেকোনোটি পরিবর্তিত হলে লাইভ আপডেট হয়। একটি পিন করতে `theme="dark"` বা `theme="light"` পাস করুন। **Pro এবং Studio কী?** প্রতিটি লাইব্রেরি জুড়ে একটি প্ল্যান। Pro [Studio](https://libraries.dev/studio.html) আনলক করে — পাবলিক প্লেগ্রাউন্ডের বাইরে গভীর, প্রতি-লাইব্রেরি কাস্টমাইজেশন, সঠিক কনফিগারেশনের এক্সপোর্ট সহ — প্লাস Pro প্রিসেট এবং প্রতিটি ভবিষ্যতের লাইব্রেরি ও আপডেট। [প্রাইসিং](https://libraries.dev/pro.html) দেখুন। **বাণিজ্যিক প্রকল্প?** লাইব্রেরিগুলো MIT — এগুলো যেকোনো জায়গায় ব্যবহার করুন, বাণিজ্যিক কাজ সহ। Pro কনটেন্ট (Studio এক্সপোর্ট, Pro প্রিসেট ও রেসিপি) আপনার বা আপনার টিমের কাছে আপনার কেনা প্ল্যানের অধীনে লাইসেন্সকৃত, সীমাহীন প্রকল্পের জন্য। ## এই রিপোতে কাজ করা npm ওয়ার্কস্পেস: `packages/` প্রকাশিত লাইব্রেরিগুলো ধারণ করে (প্রতি npm প্যাকেজের জন্য একটি ফোল্ডার, প্রতিটির নিজস্ব README ও LICENSE সহ), `sites/` ডেমো সাইটগুলো — `sites/home` হলো libraries.dev। ```bash npm install npm run build:site-home # every library + libraries.dev, as CI does npm run dev -w @sites/home # libraries.dev with every page and the Studio npm run typecheck # every workspace ``` হোম সাইট বিল্ট প্যাকেজগুলো ইমপোর্ট করে, তাই একটি লাইব্রেরি বিল্ড করুন (`npm run build:beam`, `build:orbs`, `build:gooey`, `build:voice`, `build:metal`, `build:image`) তার পেজ বা বেঞ্চের আগে। স্বতন্ত্র ডেমোগুলো (`@sites/beam`, `@sites/gooey`, `@sites/orbs`) তাদের লাইব্রেরিকে এর সোর্সে অ্যালিয়াস করে এবং রিবিল্ড ছাড়াই হট-রিলোড করে। ## রিলিজ করা প্রকাশনা প্রতি প্যাকেজ (`publish.yml`, `npm publish -w <package>`): প্যাকেজ নাম দিয়ে ওয়ার্কফ্লো ম্যানুয়ালি চালান, অথবা একটি GitHub রিলিজ প্রকাশ করুন যার ট্যাগ `<package>@<version>` (`voice-glow@0.2.0`)। রেজিস্ট্রিতে ইতিমধ্যে থাকা একটি ভার্সন এড়িয়ে যাওয়া হয়। ## ডিপ্লয় দুটি সাইট আলাদাভাবে হোস্ট করা হয়, কারণ GitHub Pages প্রতি রিপোতে একটি কাস্টম ডোমেইন পরিবেশন করে: - **beam.jakubantalik.com** — `.github/workflows/deploy.yml`-এর মাধ্যমে GitHub Pages; ডোমেইন বাইন্ডিং `sites/beam/public/CNAME`-এ থাকে। - **gooey.jakubantalik.com** — Cloudflare Pages, এই রিপো থেকে `npm run build:site-gooey` দিয়ে বিল্ট, আউটপুট `sites/gooey/dist`। - **orbs.jakubantalik.com** — Cloudflare Pages, `npm run build:site-orbs` দিয়ে বিল্ট, আউটপুট `sites/orbs/dist`। - **libraries.dev** — Cloudflare Pages, `main`-এ প্রতিটি পুশে `.github/workflows/deploy-home.yml` দ্বারা ডিপ্লয় করা হয় (`npm run build:site-home`, আউটপুট `sites/home/dist`)। মূল সাইট: ল্যান্ডিং, প্রতি লাইব্রেরির জন্য একটি পেজ ও Studio বেঞ্চ, Pro প্রাইসিং, অ্যাকাউন্ট ও লিগ্যাল পেজ। এর ব্যাকএন্ড হলো `api.libraries.dev`, প্রাইভেট `libraries-pro` রিপোতে একটি Worker — `sites/home/README.md` দেখুন। `.node-version` Cloudflare বিল্ডের জন্য Node 20 পিন করে, GitHub ওয়ার্কফ্লোগুলো যে ভার্সন ব্যবহার করে তার সঙ্গে মিলিয়ে; Cloudflare-এর ডিফল্ট পুরোনো। Cloudflare-এর **Retry deployment** ব্রাঞ্চ টিপ আনার বদলে একই কমিট রিপ্লে করে, তাই একটি পুরোনো কমিটে ব্যর্থ হওয়া বিল্ড ব্যর্থই থাকে। একটি নতুন কমিট পুশ করে নতুন একটি পান। শুধুমাত্র beam সাইটে একটি `public/CNAME` আছে; সেই ফাইলটি একটি GitHub Pages মেকানিজম। Cloudflare-হোস্টেড সাইটগুলো পরিবর্তে Pages প্রজেক্টে তাদের ডোমেইন বাইন্ড করে, এবং DNS রেকর্ড নিজেই রেজিস্ট্রারে (inetadmin) থাকে, Cloudflare-এ নয় — `jakubantalik.com` Cloudflare-এর নেমসার্ভারে নেই। `thinking-orbs` `git subtree` দ্বারা এসেছে, তাই এর সম্পূর্ণ ইতিহাস এই রিপোতে আছে — কিন্তু সেই কমিটগুলো `src/…` স্পর্শ করেছিল, `packages/thinking-orbs/src/…` নয়। তাই `git log -- packages/thinking-orbs` মার্জে থেমে যায়। আসল ইতিহাস পড়তে, মার্জ যে কমিটের নাম দেয় সেখান থেকে লগ করুন: ```bash git log --oneline 9c6d5c3 -- ports/ios/PillsDemo/Sources/PillsApp.swift git log --follow packages/thinking-orbs/src/index.ts ``` `thinking-orbs` [`packages/thinking-orbs/ports`](packages/thinking-orbs/ports)-এর অধীনে নেটিভ পোর্টও বহন করে — একটি React Native প্যাকেজ এবং একটি SwiftUI প্যাকেজ, `spec/`-এর গোল্ডেন ভেক্টর দ্বারা ওয়েব রেন্ডারারের সঙ্গে তাল মিলিয়ে রাখা হয়। কোনোটিই এখনো প্রকাশিত হয়নি।