Referensi API

Setiap ekspor @kkwaenggwari/animated-chorus dengan props, tipe, dan nilai bawaannya. Nama yang sama bekerja di web dan React Native.

Filter17 API

Angka dan teks

MotionNumber

Angka yang digitnya bergulir seperti roda.

Prop	Tipe	Bawaan	Deskripsi
`value`	`number \| bigint \| string`	`—`wajib	Angka, atau teks angka yang diformat pemanggil.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` menggerakkan setiap digit yang berubah satu langkah; `roll` melewati digit di antaranya.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` mengikuti perubahan besaran sehingga simpanan bergulir ke satu arah; `digit` membandingkan setiap digit sendiri-sendiri.
`stagger`	`number`	`45`	Milidetik antar digit yang berubah, dari satuan ke luar. Seluruh riaknya dibatasi.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Fungsi yang mengembalikan teks untuk ditampilkan, atau opsi `Intl.NumberFormat` (dengan `intl`).
`intl`	`boolean`	`false`	Gunakan `Intl.NumberFormat` bawaan. Mati secara bawaan agar tidak ada runtime yang memerlukan `Intl`.
`locale`	`string \| string[]`		Locale untuk `intl`.
`prefix`	`string`		Teks sebelum angka.
`suffix`	`string`		Teks setelah angka.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.
`onMotionComplete`	`(value) => void`		Berjalan dengan nilainya setelah digit berhenti.

Halaman komponen dan meja kerja

MotionText

Teks yang beranimasi saat berubah: teks angka bergulir per digit, teks lain bertukar.

Prop	Tipe	Bawaan	Deskripsi
`children`	`ReactNode`		Teks yang ditampilkan.
`as`	`element`	`'span'`	Elemen yang dirender.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.
`onMotionComplete`	`(text) => void`		Berjalan saat gerak berhenti.

Halaman komponen dan meja kerja

MotionStream

Teks mengalir yang ditampilkan dengan tempo stabil dan menyusul saat ada lonjakan.

Prop	Tipe	Bawaan	Deskripsi
`text`	`string`	`—`wajib	Teks sejauh ini. Teks yang bertambah ditampilkan dengan tempo stabil; teks yang ditulis ulang melanjutkan dari awal yang sama.
`speed`	`number`	`90`	Laju tampilan dasar dalam karakter per detik.
`catchUp`	`number`	`900`	Tumpukan antrean ditampilkan dalam sekitar sekian milidetik dengan mempercepat.
`initial`	`boolean`	`false`	Tampilkan perlahan juga teks yang ada saat mount (jika tidak, langsung tampil).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` memunculkan karakter baru perlahan; `none` menampilkannya langsung.
`children`	`(visible: string) => ReactNode`		Fungsi yang menerima teks bertempo, misalnya untuk merender Markdown.
`as`	`element`	`'span'`	Elemen yang dirender.
`onMotionComplete`	`(text) => void`		Berjalan setiap kali tampilan menyusul `text`.

Halaman komponen dan meja kerja

Konten dan ukuran

MotionSwap

Konten yang bertukar dengan crossfade saat elemen berubah ukuran.

Prop	Tipe	Bawaan	Deskripsi
`value`	`unknown`		Identitas konten; nilai baru memicu pertukaran. Children berupa teks biasa adalah identitasnya sendiri.
`children`	`ReactNode`		Kontennya.
`as`	`element`	`'span'`	Elemen yang dirender.
`inline`	`boolean`	`as === 'span'`	`true` menyesuaikan ukuran dengan konten (label, ikon); `false` mengisi lebar induk dan menganimasikan tinggi.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Posisi konten selama ukuran berubah.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Cara konten masuk dan pergi: `up` naik, `down` turun, `scale` membesar.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.
`onMotionComplete`	`(value) => void`		Berjalan saat gerak berhenti.

Halaman komponen dan meja kerja

MotionHeight

Menganimasikan tinggi ke kontennya: menciut, meluas, dan perubahan konten.

Prop	Tipe	Bawaan	Deskripsi
`open`	`boolean`	`true`	`false` menciut ke tinggi nol; konten tetap terpasang tetapi tersembunyi dan inert.
`children`	`ReactNode`		Kontennya.
`as`	`element`	`'div'`	Elemen yang dirender.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.
`onMotionComplete`	`(open) => void`		Berjalan dengan `open` setelah tinggi berhenti.

Halaman komponen dan meja kerja

MotionPresence

Menjaga konten tetap terpasang saat beranimasi masuk dan keluar.

Prop	Tipe	Bawaan	Deskripsi
`present`	`boolean`	`—`wajib	Tampilkan atau sembunyikan konten. Ubah ini alih-alih melakukan unmount.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Pose saat diam.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Pose saat konten pergi dan tempat asal saat ia masuk.
`as`	`element`	`'div'`	Elemen yang dirender.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.
`onExitComplete`	`() => void`		Berjalan setelah konten pergi dan dihapus.

Halaman komponen dan meja kerja

Pilihan dan halaman

MotionHighlight

Item dari data dengan satu sorotan yang berpindah ke item terpilih.

Prop	Tipe	Bawaan	Deskripsi
`items`	`readonly T[]`	`—`wajib	Array data Anda.
`value`	`key \| null`	`—`wajib	Key item yang disorot; `null` menyembunyikan sorotan.
`onValueChange`	`(key, item) => void`		Berjalan dengan key dan item saat sebuah item ditekan.
`getKey`	`(item) => string \| number`	`item.id`	Mengembalikan key yang unik dan stabil untuk sebuah item. Bawaannya `item.id`, atau item itu sendiri untuk string dan angka.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Menggambar item; menerima apakah item itu terpilih.
`hover`	`boolean`	`false`	Mengikuti pointer di atas item dan kembali ke `value` saat pointer pergi (web).
`itemAs`	`element`	`'button'`	Elemen untuk setiap item.
`itemClassName`	`string`		Class untuk setiap elemen item; `itemStyle` mengatur gaya inline-nya.
`highlightClassName`	`string`		Class untuk sorotan; `highlightStyle` mengatur gaya inline-nya.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.

Halaman komponen dan meja kerja

MotionPager

Halaman yang bisa digeser dari data.

Prop	Tipe	Bawaan	Deskripsi
`items`	`readonly T[]`	`—`wajib	Array data Anda.
`index`	`number`		Halaman yang ditampilkan. Kosongkan agar pager mengelolanya sendiri.
`defaultIndex`	`number`	`0`	Halaman awal saat `index` tidak dikendalikan.
`onIndexChange`	`(index, item) => void`		Berjalan dengan index dan item begitu geseran, tombol, atau gestur roda berhenti.
`getKey`	`(item) => string \| number`	`item.id`	Mengembalikan key yang unik dan stabil untuk sebuah item. Bawaannya `item.id`, atau item itu sendiri untuk string dan angka.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Menggambar halaman; menerima index-nya dan apakah halaman itu aktif.
`gap`	`number`	`0`	Jarak antarhalaman dalam piksel.
`itemClassName`	`string`		Class untuk setiap elemen item; `itemStyle` mengatur gaya inline-nya.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.

Halaman komponen dan meja kerja

Daftar

MotionList

Daftar ber-key dari data yang hanya menganimasikan yang berubah.

Prop	Tipe	Bawaan	Deskripsi
`items`	`readonly T[]`	`—`wajib	Array data Anda.
`getKey`	`(item) => string \| number`	`item.id`	Mengembalikan key yang unik dan stabil untuk sebuah item. Bawaannya `item.id`, atau item itu sendiri untuk string dan angka.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Menggambar item.
`as`	`element`	`'div'`	Elemen yang dirender.
`itemAs`	`element`	`'li' \| 'div'`	Elemen untuk setiap item.
`itemClassName`	`string`		Class untuk setiap elemen item; `itemStyle` mengatur gaya inline-nya.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Cara item masuk dan pergi.
`distance`	`number`	`16`	Jarak tempuh `rise` dan `slide` dalam piksel.
`stagger`	`number`	`40`	Milidetik antar item yang masuk.
`order`	`'forward' \| 'reverse'`	`'forward'`	Arah kaskade.
`present`	`boolean`	`true`	`false` menganimasikan setiap item keluar sambil mempertahankan tata letak; `true` mengembalikannya.
`initial`	`boolean`	`true`	Putar animasi masuk saat daftar terpasang.
`playKey`	`string \| number`		Mengubahnya memutar ulang animasi masuk.
`transition`	`Transition`	`spring`	Transisi untuk item yang masuk dan pergi.
`layoutTransition`	`Transition`	`spring`	Transisi untuk item yang meluncur ke posisi baru.

Halaman komponen dan meja kerja

MotionReorder

Seret untuk mengurutkan ulang daftar atau grid, dengan perpindahan keyboard.

Prop	Tipe	Bawaan	Deskripsi
`items`	`readonly T[]`		Item, saat Anda mengendalikan urutannya.
`defaultItems`	`readonly T[]`	`[]`	Item awal, saat komponen yang menyimpan urutannya.
`onItemsChange`	`(items, { reason, key }) => void`		Berjalan dengan urutan baru dan apakah perubahan itu berasal dari seretan, lepasan, atau keyboard.
`getKey`	`(item) => string \| number`	`item`	Mengembalikan key unik untuk sebuah item. Bawaannya item itu sendiri.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Menggambar item; menerima index-nya dan apakah sedang diseret.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` menggeser item lain selama menyeret; `drop` menunggu lepasan.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` atau `grid`.
`columns`	`number`	`3`	Kolom dalam grid.
`gap`	`number`	`12`	Jarak antaritem dalam piksel.
`disabled`	`boolean`	`false`	Mematikan seret.
`duration`	`number`	`260`	Milidetik untuk item yang menyingkir.
`itemClassName`	`string`		Class untuk setiap elemen item; `itemStyle` mengatur gaya inline-nya.

Halaman komponen dan meja kerja

Gestur

MotionSwipe

Baris yang memunculkan aksi dengan geseran horizontal dan bisa digeser pergi.

Prop	Tipe	Bawaan	Deskripsi
`children`	`ReactNode`		Konten baris.
`startActions`	`ReactNode`		Muncul di awal inline saat baris diseret ke arah akhir.
`endActions`	`ReactNode`		Muncul di akhir inline saat baris diseret ke arah awal.
`dismiss`	`'start' \| 'end' \| 'both'`		Sisi tempat geseran panjang atau lemparan menghapus baris.
`onDismiss`	`(side) => void`		Berjalan setelah baris meluncur keluar dan menciut; hapus item dari data Anda di sini.
`onOpenChange`	`(side \| null) => void`		Berjalan dengan sisi yang terbuka, atau `null` saat baris tertutup.
`disabled`	`boolean`	`false`	Mematikan geser.
`contentClassName`	`string`		Class untuk konten baris; `contentStyle` mengatur gaya inline-nya.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.

Halaman komponen dan meja kerja

MotionHold

Tekan dan tahan untuk mengonfirmasi; melepas terlalu cepat memundurkannya.

Prop	Tipe	Bawaan	Deskripsi
`children`	`ReactNode`		Label tombol.
`onConfirm`	`() => void`		Berjalan setelah tahanan selesai.
`duration`	`number`	`1200`	Milidetik tekanan harus ditahan.
`disabled`	`boolean`	`false`	Mematikan tombol.
`fillClassName`	`string`		Class untuk isian yang bertambah; `fillStyle` mengatur gaya inline-nya.

Halaman komponen dan meja kerja

Overlay

MotionSheet

Sheet bawah, sheet atas, atau laci samping dengan detent.

Prop	Tipe	Bawaan	Deskripsi
`open`	`boolean`	`false`	Apakah sheet ditampilkan.
`onOpenChange`	`(open) => void`		Berjalan dengan `false` saat sheet ditutup dengan seretan, ketukan, atau Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Ukuran saat diam: pecahan layar, piksel, atau `'content'`.
`detent`	`number`		Index detent yang dikendalikan.
`defaultDetent`	`number`	`0`	Index detent yang dipakai saat membuka tanpa `detent`.
`onDetentChange`	`(index) => void`		Berjalan dengan index detent tempat sheet berhenti.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Tepi asal sheet.
`modal`	`boolean`	`true`	Menambahkan backdrop, menjaga fokus di dalam, dan membuat halaman inert.
`dismissible`	`boolean`	`true`	Menyeret melewati detent terkecil, backdrop, dan Escape menutupnya.
`backdropClassName`	`string`		Class untuk backdrop; `backdropStyle` mengatur gaya inline-nya.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.

Halaman komponen dan meja kerja

MotionZoom

Gambar yang membesar dari tempatnya hingga memenuhi layar.

Prop	Tipe	Bawaan	Deskripsi
`src`	`string`		Gambar yang ditampilkan di tempatnya.
`zoomSrc`	`string`		Gambar lebih besar yang ditampilkan setelah dimuat; pertahankan rasio aspek yang sama.
`margin`	`number`	`24`	Ruang di sekitar gambar yang diperbesar dalam piksel.
`disabled`	`boolean`	`false`	Mematikan zoom.
`onZoomChange`	`(zoomed) => void`		Berjalan dengan `true` saat diperbesar dan `false` saat ditutup.
`backdropStyle`	`CSSProperties`		Gaya inline untuk backdrop.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.

Halaman komponen dan meja kerja

Progres

ProgressBar

Garis progres terkendali dengan keadaan tak tentu.

Prop	Tipe	Bawaan	Deskripsi
`value`	`number \| null`		Progres dari `0` sampai `max`; `null` berarti tak tentu.
`max`	`number`	`100`	Nilai yang berarti selesai.
`color`	`string`	`'currentColor'`	Warna isian.
`trackColor`	`string`	`'#e7ece9'`	Warna trek.
`thickness`	`number`	`8`	Ketebalan garis dalam piksel.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Mengisi dari kiri (`ltr`) atau dari kanan (`rtl`).
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.

Halaman komponen dan meja kerja

ProgressRing

Cincin progres terkendali dengan keadaan tak tentu.

Prop	Tipe	Bawaan	Deskripsi
`value`	`number \| null`		Progres dari `0` sampai `max`; `null` berarti tak tentu.
`max`	`number`	`100`	Nilai yang berarti selesai.
`size`	`number`	`96`	Diameter dalam piksel.
`thickness`	`number`	`8`	Ketebalan cincin dalam piksel.
`color`	`string`	`'currentColor'`	Warna busur.
`trackColor`	`string`	`'#e7ece9'`	Warna trek.
`children`	`ReactNode`		Label yang ditampilkan di tengah.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.

Halaman komponen dan meja kerja

Transisi

motionTokens

Nilai siap pakai untuk prop transition mana pun.

Prop	Tipe	Bawaan	Deskripsi
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Durasi dalam milidetik.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Transisi timing dengan durasi dan kurva bernama.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Transisi pegas, dari yang cepat dan kokoh hingga lembut dan memantul.

Transisi

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} />
    </>
  );
}