API রেফারেন্স

@kkwaenggwari/animated-chorus-এর প্রতিটি এক্সপোর্ট, তার props, টাইপ আর ডিফল্টসহ। একই নাম ওয়েব আর React Native-এ কাজ করে।

ফিল্টার17টি API

সংখ্যা আর লেখা

MotionNumber

এমন সংখ্যা যার অঙ্ক চাকার মতো ঘোরে।

Prop	টাইপ	ডিফল্ট	বিবরণ
`value`	`number \| bigint \| string`	`—`আবশ্যক	সংখ্যা, বা কলকারীর ফরম্যাট করা সংখ্যাসূচক লেখা।
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` প্রতিটি বদলানো অঙ্ক এক ধাপ সরায়; `roll` মাঝের অঙ্ক পেরিয়ে যায়।
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` আকারের পরিবর্তন অনুসরণ করে যাতে হাতে-থাকা একদিকে ঘোরে; `digit` প্রতিটি অঙ্ক আলাদাভাবে তুলনা করে।
`stagger`	`number`	`45`	বদলানো অঙ্কের মধ্যে মিলিসেকেন্ড, এককের ঘর থেকে বাইরের দিকে। পুরো ঢেউ সীমিত।
`format`	`(value) => string \| Intl.NumberFormatOptions`		দেখানোর লেখা ফেরত দেওয়া ফাংশন, বা `Intl.NumberFormat` বিকল্প (`intl`-সহ)।
`intl`	`boolean`	`false`	অন্তর্নির্মিত `Intl.NumberFormat` ব্যবহার করুন। ডিফল্টভাবে বন্ধ, যাতে কোনো রানটাইমের `Intl` না লাগে।
`locale`	`string \| string[]`		`intl`-এর লোকেল।
`prefix`	`string`		সংখ্যার আগের লেখা।
`suffix`	`string`		সংখ্যার পরের লেখা।
`transition`	`Transition`	`spring`	timing বক্ররেখা `{ duration, easing }` বা স্প্রিং `{ tempo: 'spring', spring }`। বাধা পেলে স্প্রিং নিজের গতি ধরে রাখে।
`onMotionComplete`	`(value) => void`		অঙ্কগুলো স্থির হলে মান নিয়ে চলে।

কম্পোনেন্ট পাতা আর ওয়ার্কবেঞ্চ

MotionText

বদলালে অ্যানিমেট হওয়া লেখা: সংখ্যাসূচক লেখা অঙ্ক ধরে ঘোরে, অন্য লেখা সোয়াপ হয়।

Prop	টাইপ	ডিফল্ট	বিবরণ
`children`	`ReactNode`		দেখানোর লেখা।
`as`	`element`	`'span'`	রেন্ডার করার এলিমেন্ট।
`transition`	`Transition`	`spring`	timing বক্ররেখা `{ duration, easing }` বা স্প্রিং `{ tempo: 'spring', spring }`। বাধা পেলে স্প্রিং নিজের গতি ধরে রাখে।
`onMotionComplete`	`(text) => void`		গতি স্থির হলে চলে।

কম্পোনেন্ট পাতা আর ওয়ার্কবেঞ্চ

MotionStream

স্থির গতিতে দেখানো স্ট্রিম হওয়া লেখা, যা ঝাপটার সঙ্গে তাল মেলায়।

Prop	টাইপ	ডিফল্ট	বিবরণ
`text`	`string`	`—`আবশ্যক	এখন পর্যন্ত লেখা। বাড়তে থাকা লেখা স্থির গতিতে দেখা দেয়; আবার লেখা ভাগ করা শুরু থেকে এগোয়।
`speed`	`number`	`90`	প্রতি সেকেন্ডে অক্ষরে মূল প্রকাশের হার।
`catchUp`	`number`	`900`	জমে থাকা অংশ গতি বাড়িয়ে প্রায় এত মিলিসেকেন্ডে দেখানো হয়।
`initial`	`boolean`	`false`	মাউন্টের সময় থাকা লেখাও ধীরে দেখান (নাহলে সঙ্গে সঙ্গে দেখায়)।
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` নতুন অক্ষর ফুটিয়ে তোলে; `none` সরাসরি দেখায়।
`children`	`(visible: string) => ReactNode`		গতি মেনে দেওয়া লেখা পাওয়া ফাংশন, যেমন Markdown রেন্ডার করতে।
`as`	`element`	`'span'`	রেন্ডার করার এলিমেন্ট।
`onMotionComplete`	`(text) => void`		প্রকাশ যখনই `text`-এর সমান হয়, চলে।

কম্পোনেন্ট পাতা আর ওয়ার্কবেঞ্চ

বিষয়বস্তু আর আকার

MotionSwap

এলিমেন্টের আকার বদলানোর সময় ক্রস-ফেড হওয়া বিষয়বস্তু।

Prop	টাইপ	ডিফল্ট	বিবরণ
`value`	`unknown`		বিষয়বস্তুর পরিচয়; নতুন মান সোয়াপ করে। সাধারণ লেখার children নিজেরাই নিজেদের পরিচয়।
`children`	`ReactNode`		বিষয়বস্তু।
`as`	`element`	`'span'`	রেন্ডার করার এলিমেন্ট।
`inline`	`boolean`	`as === 'span'`	`true` বিষয়বস্তু অনুযায়ী আকার নেয় (লেবেল, আইকন); `false` প্যারেন্টের প্রস্থ ভরে আর উচ্চতা অ্যানিমেট করে।
`align`	`'start' \| 'center' \| 'end'`	`'center'`	আকার বদলানোর সময় বিষয়বস্তু কোথায় থাকে।
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	বিষয়বস্তু কীভাবে আসে আর যায়: `up` ওঠে, `down` নামে, `scale` বড় হয়।
`transition`	`Transition`	`spring`	timing বক্ররেখা `{ duration, easing }` বা স্প্রিং `{ tempo: 'spring', spring }`। বাধা পেলে স্প্রিং নিজের গতি ধরে রাখে।
`onMotionComplete`	`(value) => void`		গতি স্থির হলে চলে।

কম্পোনেন্ট পাতা আর ওয়ার্কবেঞ্চ

MotionHeight

উচ্চতা বিষয়বস্তু পর্যন্ত অ্যানিমেট করে: সংকোচন, প্রসারণ আর বিষয়বস্তুর পরিবর্তন।

Prop	টাইপ	ডিফল্ট	বিবরণ
`open`	`boolean`	`true`	`false` শূন্য উচ্চতায় গুটিয়ে নেয়; বিষয়বস্তু মাউন্ট থাকে কিন্তু লুকানো ও নিষ্ক্রিয়।
`children`	`ReactNode`		বিষয়বস্তু।
`as`	`element`	`'div'`	রেন্ডার করার এলিমেন্ট।
`transition`	`Transition`	`spring`	timing বক্ররেখা `{ duration, easing }` বা স্প্রিং `{ tempo: 'spring', spring }`। বাধা পেলে স্প্রিং নিজের গতি ধরে রাখে।
`onMotionComplete`	`(open) => void`		উচ্চতা স্থির হলে `open` নিয়ে চলে।

কম্পোনেন্ট পাতা আর ওয়ার্কবেঞ্চ

MotionPresence

ভেতরে-বাইরে অ্যানিমেট হওয়ার সময় বিষয়বস্তু মাউন্ট রাখে।

Prop	টাইপ	ডিফল্ট	বিবরণ
`present`	`boolean`	`—`আবশ্যক	বিষয়বস্তু দেখান বা লুকান। আনমাউন্টের বদলে এটি বদলান।
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	স্থির অবস্থার pose।
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	যে pose নিয়ে বিষয়বস্তু চলে যায় আর যেখান থেকে আসে।
`as`	`element`	`'div'`	রেন্ডার করার এলিমেন্ট।
`transition`	`Transition`	`spring`	timing বক্ররেখা `{ duration, easing }` বা স্প্রিং `{ tempo: 'spring', spring }`। বাধা পেলে স্প্রিং নিজের গতি ধরে রাখে।
`onExitComplete`	`() => void`		বিষয়বস্তু চলে গিয়ে সরানো হলে চলে।

কম্পোনেন্ট পাতা আর ওয়ার্কবেঞ্চ

বাছাই আর পেজিং

MotionHighlight

ডেটা থেকে আইটেম, একটি হাইলাইটসহ যা বাছাই করা আইটেমের দিকে যায়।

Prop	টাইপ	ডিফল্ট	বিবরণ
`items`	`readonly T[]`	`—`আবশ্যক	আপনার ডেটা অ্যারে।
`value`	`key \| null`	`—`আবশ্যক	হাইলাইট করা আইটেমের key; `null` হাইলাইট লুকায়।
`onValueChange`	`(key, item) => void`		আইটেম চাপলে key আর আইটেম নিয়ে চলে।
`getKey`	`(item) => string \| number`	`item.id`	আইটেমের জন্য অনন্য, স্থির key ফেরত দেয়। ডিফল্ট `item.id`, বা স্ট্রিং ও সংখ্যার জন্য আইটেম নিজেই।
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	আইটেম আঁকে; বাছাই করা কি না তা পায়।
`hover`	`boolean`	`false`	আইটেমের ওপর পয়েন্টারের পিছু নেয় আর সরে গেলে `value`-তে ফেরে (ওয়েব)।
`itemAs`	`element`	`'button'`	প্রতিটি আইটেমের এলিমেন্ট।
`itemClassName`	`string`		প্রতিটি আইটেম এলিমেন্টের class; `itemStyle` তার inline স্টাইল ঠিক করে।
`highlightClassName`	`string`		হাইলাইটের class; `highlightStyle` তার inline স্টাইল ঠিক করে।
`transition`	`Transition`	`spring`	timing বক্ররেখা `{ duration, easing }` বা স্প্রিং `{ tempo: 'spring', spring }`। বাধা পেলে স্প্রিং নিজের গতি ধরে রাখে।

কম্পোনেন্ট পাতা আর ওয়ার্কবেঞ্চ

MotionPager

ডেটা থেকে সোয়াইপযোগ্য পাতা।

Prop	টাইপ	ডিফল্ট	বিবরণ
`items`	`readonly T[]`	`—`আবশ্যক	আপনার ডেটা অ্যারে।
`index`	`number`		দেখানো পাতা। পেজারকে নিজেরটা রাখতে দিতে বাদ দিন।
`defaultIndex`	`number`	`0`	`index` নিয়ন্ত্রিত না হলে শুরুর পাতা।
`onIndexChange`	`(index, item) => void`		সোয়াইপ, কি বা হুইল জেসচার স্থির হওয়ামাত্র index আর আইটেম নিয়ে চলে।
`getKey`	`(item) => string \| number`	`item.id`	আইটেমের জন্য অনন্য, স্থির key ফেরত দেয়। ডিফল্ট `item.id`, বা স্ট্রিং ও সংখ্যার জন্য আইটেম নিজেই।
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	পাতা আঁকে; নিজের index আর সক্রিয় কি না তা পায়।
`gap`	`number`	`0`	পাতার মধ্যে পিক্সেলে ফাঁক।
`itemClassName`	`string`		প্রতিটি আইটেম এলিমেন্টের class; `itemStyle` তার inline স্টাইল ঠিক করে।
`transition`	`Transition`	`spring`	timing বক্ররেখা `{ duration, easing }` বা স্প্রিং `{ tempo: 'spring', spring }`। বাধা পেলে স্প্রিং নিজের গতি ধরে রাখে।

কম্পোনেন্ট পাতা আর ওয়ার্কবেঞ্চ

তালিকা

MotionList

ডেটা থেকে key-যুক্ত তালিকা যা শুধু বদলানোটুকু অ্যানিমেট করে।

Prop	টাইপ	ডিফল্ট	বিবরণ
`items`	`readonly T[]`	`—`আবশ্যক	আপনার ডেটা অ্যারে।
`getKey`	`(item) => string \| number`	`item.id`	আইটেমের জন্য অনন্য, স্থির key ফেরত দেয়। ডিফল্ট `item.id`, বা স্ট্রিং ও সংখ্যার জন্য আইটেম নিজেই।
`renderItem`	`(item, index) => ReactNode`	`item.label`	আইটেম আঁকে।
`as`	`element`	`'div'`	রেন্ডার করার এলিমেন্ট।
`itemAs`	`element`	`'li' \| 'div'`	প্রতিটি আইটেমের এলিমেন্ট।
`itemClassName`	`string`		প্রতিটি আইটেম এলিমেন্টের class; `itemStyle` তার inline স্টাইল ঠিক করে।
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	আইটেম কীভাবে আসে আর যায়।
`distance`	`number`	`16`	পিক্সেলে `rise` আর `slide`-এর দূরত্ব।
`stagger`	`number`	`40`	আসা আইটেমের মধ্যে মিলিসেকেন্ড।
`order`	`'forward' \| 'reverse'`	`'forward'`	ক্যাসকেডের দিক।
`present`	`boolean`	`true`	`false` লেআউট রেখে প্রতিটি আইটেম বাইরে অ্যানিমেট করে; `true` ফিরিয়ে আনে।
`initial`	`boolean`	`true`	তালিকা মাউন্ট হলে প্রবেশ চালান।
`playKey`	`string \| number`		এটি বদলালে প্রবেশ আবার চলে।
`transition`	`Transition`	`spring`	আসা আর যাওয়া আইটেমের transition।
`layoutTransition`	`Transition`	`spring`	নতুন জায়গায় পিছলে যাওয়া আইটেমের transition।

কম্পোনেন্ট পাতা আর ওয়ার্কবেঞ্চ

MotionReorder

টেনে তালিকা বা গ্রিডের ক্রম বদলান, কিবোর্ডে সরানোসহ।

Prop	টাইপ	ডিফল্ট	বিবরণ
`items`	`readonly T[]`		আইটেম, যখন ক্রম আপনি নিয়ন্ত্রণ করেন।
`defaultItems`	`readonly T[]`	`[]`	শুরুর আইটেম, যখন কম্পোনেন্ট ক্রম রাখে।
`onItemsChange`	`(items, { reason, key }) => void`		নতুন ক্রম নিয়ে চলে, আর জানায় সেটি টানা, ছাড়া না কিবোর্ড থেকে এসেছে।
`getKey`	`(item) => string \| number`	`item`	আইটেমের জন্য অনন্য key ফেরত দেয়। ডিফল্ট আইটেম নিজেই।
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	আইটেম আঁকে; নিজের index আর টানা হচ্ছে কি না তা পায়।
`reorder`	`'live' \| 'drop'`	`'live'`	`live` টানার সময় অন্য আইটেম সরায়; `drop` ছাড়ার অপেক্ষা করে।
`layout`	`'list' \| 'grid'`	`'grid'`	`list` বা `grid`।
`columns`	`number`	`3`	গ্রিডের কলাম।
`gap`	`number`	`12`	আইটেমের মধ্যে পিক্সেলে ফাঁক।
`disabled`	`boolean`	`false`	টানা বন্ধ করে।
`duration`	`number`	`260`	পথ ছেড়ে দেওয়া আইটেমের মিলিসেকেন্ড।
`itemClassName`	`string`		প্রতিটি আইটেম এলিমেন্টের class; `itemStyle` তার inline স্টাইল ঠিক করে।

কম্পোনেন্ট পাতা আর ওয়ার্কবেঞ্চ

জেসচার

MotionSwipe

আনুভূমিক সোয়াইপে অ্যাকশন দেখানো সারি, যা সোয়াইপে সরানো যায়।

Prop	টাইপ	ডিফল্ট	বিবরণ
`children`	`ReactNode`		সারির বিষয়বস্তু।
`startActions`	`ReactNode`		সারি শেষের দিকে টানলে inline শুরুতে দেখা দেয়।
`endActions`	`ReactNode`		সারি শুরুর দিকে টানলে inline শেষে দেখা দেয়।
`dismiss`	`'start' \| 'end' \| 'both'`		যে দিকগুলোতে লম্বা সোয়াইপ বা ছুড়ে দেওয়া সারি সরায়।
`onDismiss`	`(side) => void`		সারি বাইরে সরে গুটিয়ে গেলে চলে; এখানে আইটেম আপনার ডেটা থেকে সরান।
`onOpenChange`	`(side \| null) => void`		খোলা দিক নিয়ে চলে, বা সারি বন্ধ হলে `null` নিয়ে।
`disabled`	`boolean`	`false`	সোয়াইপ বন্ধ করে।
`contentClassName`	`string`		সারির বিষয়বস্তুর class; `contentStyle` তার inline স্টাইল ঠিক করে।
`transition`	`Transition`	`spring`	timing বক্ররেখা `{ duration, easing }` বা স্প্রিং `{ tempo: 'spring', spring }`। বাধা পেলে স্প্রিং নিজের গতি ধরে রাখে।

কম্পোনেন্ট পাতা আর ওয়ার্কবেঞ্চ

MotionHold

নিশ্চিত করতে চেপে ধরুন; আগে ছেড়ে দিলে পিছিয়ে যায়।

Prop	টাইপ	ডিফল্ট	বিবরণ
`children`	`ReactNode`		বোতামের লেবেল।
`onConfirm`	`() => void`		চেপে ধরা সম্পূর্ণ হলে চলে।
`duration`	`number`	`1200`	কত মিলিসেকেন্ড চেপে ধরতে হবে।
`disabled`	`boolean`	`false`	বোতাম বন্ধ করে।
`fillClassName`	`string`		বাড়তে থাকা ভরাটের class; `fillStyle` তার inline স্টাইল ঠিক করে।

কম্পোনেন্ট পাতা আর ওয়ার্কবেঞ্চ

ওভারলে

MotionSheet

detent-সহ নিচের শিট, ওপরের শিট বা পাশের ড্রয়ার।

Prop	টাইপ	ডিফল্ট	বিবরণ
`open`	`boolean`	`false`	শিট দেখানো হচ্ছে কি না।
`onOpenChange`	`(open) => void`		শিট টেনে, ট্যাপ করে বা Escape দিয়ে বন্ধ হলে `false` নিয়ে চলে।
`detents`	`(number \| 'content')[]`	`['content']`	স্থির অবস্থার আকার: স্ক্রিনের ভগ্নাংশ, পিক্সেল, বা `'content'`।
`detent`	`number`		নিয়ন্ত্রিত detent index।
`defaultDetent`	`number`	`0`	`detent` ছাড়া খোলার সময় ব্যবহৃত detent index।
`onDetentChange`	`(index) => void`		শিট যে detent-এ স্থির হয় তার index নিয়ে চলে।
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	শিট যে প্রান্ত থেকে আসে।
`modal`	`boolean`	`true`	ব্যাকড্রপ যোগ করে, ফোকাস ভেতরে রাখে আর পাতা নিষ্ক্রিয় করে।
`dismissible`	`boolean`	`true`	সবচেয়ে ছোট detent পেরিয়ে টানা, ব্যাকড্রপ আর Escape এটি বন্ধ করে।
`backdropClassName`	`string`		ব্যাকড্রপের class; `backdropStyle` তার inline স্টাইল ঠিক করে।
`transition`	`Transition`	`spring`	timing বক্ররেখা `{ duration, easing }` বা স্প্রিং `{ tempo: 'spring', spring }`। বাধা পেলে স্প্রিং নিজের গতি ধরে রাখে।

কম্পোনেন্ট পাতা আর ওয়ার্কবেঞ্চ

MotionZoom

এমন ছবি যা নিজের জায়গা থেকে স্ক্রিন ভরাতে জুম হয়।

Prop	টাইপ	ডিফল্ট	বিবরণ
`src`	`string`		জায়গায় দেখানো ছবি।
`zoomSrc`	`string`		লোড হলে দেখানো বড় ছবি; একই অনুপাত রাখুন।
`margin`	`number`	`24`	জুম করা ছবির চারপাশে পিক্সেলে ফাঁক।
`disabled`	`boolean`	`false`	জুম বন্ধ করে।
`onZoomChange`	`(zoomed) => void`		জুম হলে `true` আর বন্ধ হলে `false` নিয়ে চলে।
`backdropStyle`	`CSSProperties`		ব্যাকড্রপের inline স্টাইল।
`transition`	`Transition`	`spring`	timing বক্ররেখা `{ duration, easing }` বা স্প্রিং `{ tempo: 'spring', spring }`। বাধা পেলে স্প্রিং নিজের গতি ধরে রাখে।

কম্পোনেন্ট পাতা আর ওয়ার্কবেঞ্চ

অগ্রগতি

ProgressBar

অনির্দিষ্ট অবস্থাসহ নিয়ন্ত্রিত অগ্রগতির রেখা।

Prop	টাইপ	ডিফল্ট	বিবরণ
`value`	`number \| null`		`0` থেকে `max` পর্যন্ত অগ্রগতি; `null` অনির্দিষ্ট।
`max`	`number`	`100`	যে মানের অর্থ সম্পূর্ণ।
`color`	`string`	`'currentColor'`	ভরাটের রং।
`trackColor`	`string`	`'#e7ece9'`	ট্র্যাকের রং।
`thickness`	`number`	`8`	পিক্সেলে রেখার পুরুত্ব।
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	বাঁ দিক (`ltr`) বা ডান দিক (`rtl`) থেকে ভরাট।
`transition`	`Transition`	`spring`	timing বক্ররেখা `{ duration, easing }` বা স্প্রিং `{ tempo: 'spring', spring }`। বাধা পেলে স্প্রিং নিজের গতি ধরে রাখে।

কম্পোনেন্ট পাতা আর ওয়ার্কবেঞ্চ

ProgressRing

অনির্দিষ্ট অবস্থাসহ নিয়ন্ত্রিত অগ্রগতির বলয়।

Prop	টাইপ	ডিফল্ট	বিবরণ
`value`	`number \| null`		`0` থেকে `max` পর্যন্ত অগ্রগতি; `null` অনির্দিষ্ট।
`max`	`number`	`100`	যে মানের অর্থ সম্পূর্ণ।
`size`	`number`	`96`	পিক্সেলে ব্যাস।
`thickness`	`number`	`8`	পিক্সেলে বলয়ের পুরুত্ব।
`color`	`string`	`'currentColor'`	চাপের রং।
`trackColor`	`string`	`'#e7ece9'`	ট্র্যাকের রং।
`children`	`ReactNode`		মাঝখানে দেখানো লেবেল।
`transition`	`Transition`	`spring`	timing বক্ররেখা `{ duration, easing }` বা স্প্রিং `{ tempo: 'spring', spring }`। বাধা পেলে স্প্রিং নিজের গতি ধরে রাখে।

কম্পোনেন্ট পাতা আর ওয়ার্কবেঞ্চ

Transition

motionTokens

যেকোনো transition prop-এর জন্য তৈরি মান।

Prop	টাইপ	ডিফল্ট	বিবরণ
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	মিলিসেকেন্ডে সময়কাল।
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	সময়কাল আর নামযুক্ত বক্ররেখাসহ timing transition।
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	স্প্রিং transition, দ্রুত ও দৃঢ় থেকে কোমল ও লাফানো পর্যন্ত।

Transition

App.jsx

// Web and React Native: the same import.
import { MotionNumber, MotionList } from '@kkwaenggwari/animated-chorus';

export function Score({ points, players }) {
  return (
    <>
      <MotionNumber value={points} />
      <MotionList items={players} renderItem={(player) => player.name} />
    </>
  );
}