API-Referenz

Jeder Export von @kkwaenggwari/animated-chorus mit seinen props, Typen und Standardwerten. Dieselben Namen funktionieren im Web und unter React Native.

Filter17 APIs

Zahlen und Text

MotionNumber

Eine Zahl, deren Stellen wie Räder rollen.

Prop	Typ	Standard	Beschreibung
`value`	`number \| bigint \| string`	`—`erforderlich	Die Zahl oder vom Aufrufer formatierter Zahlentext.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` bewegt jede geänderte Stelle um einen Schritt; `roll` läuft durch die Ziffern dazwischen.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` folgt der Größenänderung, sodass Überträge in eine Richtung rollen; `digit` vergleicht jede Stelle für sich.
`stagger`	`number`	`45`	Millisekunden zwischen geänderten Stellen, von den Einern nach außen. Die gesamte Welle ist begrenzt.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Eine Funktion, die den anzuzeigenden Text zurückgibt, oder `Intl.NumberFormat`-Optionen (mit `intl`).
`intl`	`boolean`	`false`	Nutzt das eingebaute `Intl.NumberFormat`. Standardmäßig aus, damit keine Laufzeitumgebung `Intl` braucht.
`locale`	`string \| string[]`		Locale für `intl`.
`prefix`	`string`		Text vor der Zahl.
`suffix`	`string`		Text nach der Zahl.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.
`onMotionComplete`	`(value) => void`		Läuft mit dem Wert, sobald die Stellen zur Ruhe gekommen sind.

Komponentenseite und Werkbank

MotionText

Text, der animiert, wenn er sich ändert: Zahlentext rollt pro Stelle, anderer Text wird ausgetauscht.

Prop	Typ	Standard	Beschreibung
`children`	`ReactNode`		Der anzuzeigende Text.
`as`	`element`	`'span'`	Das zu rendernde Element.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.
`onMotionComplete`	`(text) => void`		Läuft, wenn die Bewegung zur Ruhe kommt.

Komponentenseite und Werkbank

MotionStream

Gestreamter Text, gleichmäßig eingeblendet, der bei Schüben aufholt.

Prop	Typ	Standard	Beschreibung
`text`	`string`	`—`erforderlich	Der bisherige Text. Wachsender Text wird gleichmäßig eingeblendet; eine Umschreibung setzt am gemeinsamen Anfang an.
`speed`	`number`	`90`	Grundtempo des Einblendens in Zeichen pro Sekunde.
`catchUp`	`number`	`900`	Ein Rückstau wird durch Beschleunigen in etwa so vielen Millisekunden eingeblendet.
`initial`	`boolean`	`false`	Auch den beim Mount vorhandenen Text einblenden (sonst erscheint er sofort).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` blendet neue Zeichen ein; `none` zeigt sie direkt.
`children`	`(visible: string) => ReactNode`		Eine Funktion, die den getakteten Text erhält, etwa um Markdown zu rendern.
`as`	`element`	`'span'`	Das zu rendernde Element.
`onMotionComplete`	`(text) => void`		Läuft, sobald das Einblenden `text` eingeholt hat.

Komponentenseite und Werkbank

Inhalt und Größe

MotionSwap

Inhalt, der überblendet, während das Element seine Größe ändert.

Prop	Typ	Standard	Beschreibung
`value`	`unknown`		Identität des Inhalts; ein neuer Wert löst den Wechsel aus. Reine Text-Kinder sind ihre eigene Identität.
`children`	`ReactNode`		Der Inhalt.
`as`	`element`	`'span'`	Das zu rendernde Element.
`inline`	`boolean`	`as === 'span'`	`true` passt die Größe an den Inhalt an (Labels, Icons); `false` füllt die Breite des Elternelements und animiert die Höhe.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Wo der Inhalt sitzt, während sich die Größe ändert.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Wie Inhalt kommt und geht: `up` steigt, `down` fällt, `scale` wächst.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.
`onMotionComplete`	`(value) => void`		Läuft, wenn die Bewegung zur Ruhe kommt.

Komponentenseite und Werkbank

MotionHeight

Animiert die Höhe auf ihren Inhalt: Ein- und Ausklappen sowie Inhaltsänderungen.

Prop	Typ	Standard	Beschreibung
`open`	`boolean`	`true`	`false` klappt auf Höhe null ein; der Inhalt bleibt gemountet, aber versteckt und inaktiv.
`children`	`ReactNode`		Der Inhalt.
`as`	`element`	`'div'`	Das zu rendernde Element.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.
`onMotionComplete`	`(open) => void`		Läuft mit `open`, sobald die Höhe zur Ruhe gekommen ist.

Komponentenseite und Werkbank

MotionPresence

Hält Inhalt gemountet, während er ein- und ausblendet.

Prop	Typ	Standard	Beschreibung
`present`	`boolean`	`—`erforderlich	Inhalt zeigen oder verbergen. Ändere das, statt zu unmounten.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Die Pose in Ruhe.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Die Pose, mit der der Inhalt geht und aus der er kommt.
`as`	`element`	`'div'`	Das zu rendernde Element.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.
`onExitComplete`	`() => void`		Läuft, nachdem der Inhalt abgegangen und entfernt ist.

Komponentenseite und Werkbank

Auswahl und Blättern

MotionHighlight

Elemente aus Daten mit einer Hervorhebung, die zum ausgewählten Element wandert.

Prop	Typ	Standard	Beschreibung
`items`	`readonly T[]`	`—`erforderlich	Dein Daten-Array.
`value`	`key \| null`	`—`erforderlich	Key des hervorgehobenen Elements; `null` blendet die Hervorhebung aus.
`onValueChange`	`(key, item) => void`		Läuft mit Key und Element, wenn ein Element gedrückt wird.
`getKey`	`(item) => string \| number`	`item.id`	Gibt einen eindeutigen, stabilen Key für ein Element zurück. Standard ist `item.id` oder bei Strings und Zahlen das Element selbst.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Zeichnet ein Element; erhält, ob es ausgewählt ist.
`hover`	`boolean`	`false`	Dem Zeiger über Elemente folgen und beim Verlassen zu `value` zurückkehren (Web).
`itemAs`	`element`	`'button'`	Das Element für jeden Eintrag.
`itemClassName`	`string`		Klasse für jedes Eintragselement; `itemStyle` setzt seinen Inline-Style.
`highlightClassName`	`string`		Klasse für die Hervorhebung; `highlightStyle` setzt ihren Inline-Style.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.

Komponentenseite und Werkbank

MotionPager

Wischbare Seiten aus Daten.

Prop	Typ	Standard	Beschreibung
`items`	`readonly T[]`	`—`erforderlich	Dein Daten-Array.
`index`	`number`		Die angezeigte Seite. Weglassen, damit der Pager seine eigene verwaltet.
`defaultIndex`	`number`	`0`	Startseite, wenn `index` nicht kontrolliert wird.
`onIndexChange`	`(index, item) => void`		Läuft mit Index und Element, sobald eine Wisch-, Tasten- oder Mausradgeste einrastet.
`getKey`	`(item) => string \| number`	`item.id`	Gibt einen eindeutigen, stabilen Key für ein Element zurück. Standard ist `item.id` oder bei Strings und Zahlen das Element selbst.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Zeichnet eine Seite; erhält ihren Index und ob sie aktiv ist.
`gap`	`number`	`0`	Abstand zwischen Seiten in Pixeln.
`itemClassName`	`string`		Klasse für jedes Eintragselement; `itemStyle` setzt seinen Inline-Style.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.

Komponentenseite und Werkbank

Listen

MotionList

Eine Liste mit Keys aus Daten, die nur das Geänderte animiert.

Prop	Typ	Standard	Beschreibung
`items`	`readonly T[]`	`—`erforderlich	Dein Daten-Array.
`getKey`	`(item) => string \| number`	`item.id`	Gibt einen eindeutigen, stabilen Key für ein Element zurück. Standard ist `item.id` oder bei Strings und Zahlen das Element selbst.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Zeichnet ein Element.
`as`	`element`	`'div'`	Das zu rendernde Element.
`itemAs`	`element`	`'li' \| 'div'`	Das Element für jeden Eintrag.
`itemClassName`	`string`		Klasse für jedes Eintragselement; `itemStyle` setzt seinen Inline-Style.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Wie Elemente kommen und gehen.
`distance`	`number`	`16`	Weg von `rise` und `slide` in Pixeln.
`stagger`	`number`	`40`	Millisekunden zwischen erscheinenden Elementen.
`order`	`'forward' \| 'reverse'`	`'forward'`	Richtung des Versatzes.
`present`	`boolean`	`true`	`false` animiert alle Elemente hinaus und behält das Layout; `true` holt sie zurück.
`initial`	`boolean`	`true`	Das Erscheinen abspielen, wenn die Liste gemountet wird.
`playKey`	`string \| number`		Eine Änderung spielt das Erscheinen erneut ab.
`transition`	`Transition`	`spring`	Übergang für erscheinende und verschwindende Elemente.
`layoutTransition`	`Transition`	`spring`	Übergang für Elemente, die an neue Positionen gleiten.

Komponentenseite und Werkbank

MotionReorder

Zum Umsortieren einer Liste oder eines Rasters ziehen, mit Tastaturbewegungen.

Prop	Typ	Standard	Beschreibung
`items`	`readonly T[]`		Die Elemente, wenn du die Reihenfolge kontrollierst.
`defaultItems`	`readonly T[]`	`[]`	Startelemente, wenn die Komponente die Reihenfolge verwaltet.
`onItemsChange`	`(items, { reason, key }) => void`		Läuft mit der neuen Reihenfolge und ob sie vom Ziehen, Ablegen oder von der Tastatur kam.
`getKey`	`(item) => string \| number`	`item`	Gibt einen eindeutigen Key für ein Element zurück. Standard ist das Element selbst.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Zeichnet ein Element; erhält seinen Index und ob es gerade gezogen wird.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` bewegt andere Elemente beim Ziehen; `drop` wartet auf das Ablegen.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` oder `grid`.
`columns`	`number`	`3`	Spalten in einem Raster.
`gap`	`number`	`12`	Abstand zwischen Elementen in Pixeln.
`disabled`	`boolean`	`false`	Schaltet das Ziehen aus.
`duration`	`number`	`260`	Millisekunden für ausweichende Elemente.
`itemClassName`	`string`		Klasse für jedes Eintragselement; `itemStyle` setzt seinen Inline-Style.

Komponentenseite und Werkbank

Gesten

MotionSwipe

Eine Zeile, die per horizontalem Wischen Aktionen freilegt und weggewischt werden kann.

Prop	Typ	Standard	Beschreibung
`children`	`ReactNode`		Der Zeileninhalt.
`startActions`	`ReactNode`		Erscheinen am Zeilenanfang, wenn die Zeile zum Ende gezogen wird.
`endActions`	`ReactNode`		Erscheinen am Zeilenende, wenn die Zeile zum Anfang gezogen wird.
`dismiss`	`'start' \| 'end' \| 'both'`		Seiten, auf denen ein langes Wischen oder ein Wurf die Zeile entfernt.
`onDismiss`	`(side) => void`		Läuft, nachdem die Zeile hinausgeglitten und eingeklappt ist; entferne das Element hier aus deinen Daten.
`onOpenChange`	`(side \| null) => void`		Läuft mit der geöffneten Seite oder `null`, wenn die Zeile schließt.
`disabled`	`boolean`	`false`	Schaltet das Wischen aus.
`contentClassName`	`string`		Klasse für den Zeileninhalt; `contentStyle` setzt seinen Inline-Style.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.

Komponentenseite und Werkbank

MotionHold

Gedrückt halten zum Bestätigen; zu frühes Loslassen spult zurück.

Prop	Typ	Standard	Beschreibung
`children`	`ReactNode`		Die Button-Beschriftung.
`onConfirm`	`() => void`		Läuft einmal, wenn das Halten abgeschlossen ist.
`duration`	`number`	`1200`	Millisekunden, die der Druck gehalten werden muss.
`disabled`	`boolean`	`false`	Schaltet den Button aus.
`fillClassName`	`string`		Klasse für die wachsende Füllung; `fillStyle` setzt ihren Inline-Style.

Komponentenseite und Werkbank

Overlays

MotionSheet

Ein Bottom Sheet, Top Sheet oder seitliche Schublade mit Rastpunkten.

Prop	Typ	Standard	Beschreibung
`open`	`boolean`	`false`	Ob das Sheet angezeigt wird.
`onOpenChange`	`(open) => void`		Läuft mit `false`, wenn das Sheet per Ziehen, Tippen oder Escape geschlossen wird.
`detents`	`(number \| 'content')[]`	`['content']`	Ruhegrößen: ein Bruchteil des Bildschirms, Pixel oder `'content'`.
`detent`	`number`		Kontrollierter Rastpunkt-Index.
`defaultDetent`	`number`	`0`	Rastpunkt-Index beim Öffnen ohne `detent`.
`onDetentChange`	`(index) => void`		Läuft mit dem Index des Rastpunkts, an dem das Sheet zur Ruhe kommt.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Die Kante, von der das Sheet kommt.
`modal`	`boolean`	`true`	Fügt einen Hintergrund hinzu, hält den Fokus innen und macht die Seite inaktiv.
`dismissible`	`boolean`	`true`	Ziehen über den kleinsten Rastpunkt hinaus, der Hintergrund und Escape schließen es.
`backdropClassName`	`string`		Klasse für den Hintergrund; `backdropStyle` setzt seinen Inline-Style.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.

Komponentenseite und Werkbank

MotionZoom

Ein Bild, das von seiner Position auf Bildschirmgröße zoomt.

Prop	Typ	Standard	Beschreibung
`src`	`string`		Das an Ort und Stelle gezeigte Bild.
`zoomSrc`	`string`		Ein größeres Bild, das nach dem Laden angezeigt wird; behalte dasselbe Seitenverhältnis.
`margin`	`number`	`24`	Freiraum um das vergrößerte Bild in Pixeln.
`disabled`	`boolean`	`false`	Schaltet den Zoom aus.
`onZoomChange`	`(zoomed) => void`		Läuft mit `true` beim Vergrößern und `false` beim Schließen.
`backdropStyle`	`CSSProperties`		Inline-Style für den Hintergrund.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.

Komponentenseite und Werkbank

Fortschritt

ProgressBar

Eine kontrollierte Fortschrittslinie mit unbestimmtem Zustand.

Prop	Typ	Standard	Beschreibung
`value`	`number \| null`		Fortschritt von `0` bis `max`; `null` ist unbestimmt.
`max`	`number`	`100`	Der Wert, der „fertig“ bedeutet.
`color`	`string`	`'currentColor'`	Füllfarbe.
`trackColor`	`string`	`'#e7ece9'`	Farbe der Spur.
`thickness`	`number`	`8`	Linienstärke in Pixeln.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Von links (`ltr`) oder von rechts (`rtl`) füllen.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.

Komponentenseite und Werkbank

ProgressRing

Ein kontrollierter Fortschrittsring mit unbestimmtem Zustand.

Prop	Typ	Standard	Beschreibung
`value`	`number \| null`		Fortschritt von `0` bis `max`; `null` ist unbestimmt.
`max`	`number`	`100`	Der Wert, der „fertig“ bedeutet.
`size`	`number`	`96`	Durchmesser in Pixeln.
`thickness`	`number`	`8`	Ringstärke in Pixeln.
`color`	`string`	`'currentColor'`	Bogenfarbe.
`trackColor`	`string`	`'#e7ece9'`	Farbe der Spur.
`children`	`ReactNode`		Eine Beschriftung in der Mitte.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.

Komponentenseite und Werkbank

Übergänge

motionTokens

Fertige Werte für jede transition-Prop.

Prop	Typ	Standard	Beschreibung
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Dauern in Millisekunden.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Timing-Übergänge mit einer Dauer und einer benannten Kurve.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Feder-Übergänge, von schnell und straff bis sanft und federnd.

Übergänge

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