Animation

Orbiting badges

Orbiting badges: Kleine Abzeichen, die gleichmäßig um eine oder zwei kreisförmige Schienen verteilt sind, wobei sich jeder Ring mit seiner eigenen Geschwindigkeit und Richtung dreht, während die Abzeichen aufrecht bleiben.

Orbiting badges verwenden

Orbiting badges verwendet das Vorschauformat „Karte“ mit der Theme-Einstellung „hell/dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`radius`	`number`	`130`	Von 80 bis 200; Schrittweite 5
`count`	`number`	`5`	Von 3 bis 9; Schrittweite 1
`duration`	`number`	`20`	Von 5 bis 60; Schrittweite 1
`showPath`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.
`innerReverse`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.
`accent`	`color`	`#F5C542`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Orbiting badges verfügbar?

Orbiting badges ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat Orbiting badges?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: clsx.

Welche Details zur Barrierefreiheit sind in Orbiting badges erkennbar?

Der React-Quellcode von Orbiting badges enthält: native Elemente (button); Attribute und Ereignisbehandler (aria-hidden, aria-label). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Orbiting badges reduzierte Bewegung?

Orbiting badges liest die Bewegungseinstellung im React-Quellcode über matchMedia(prefers-reduced-motion). Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

1724Orbiting Avatar IntroAnimationEin Stapel runder Porträts, der sich anhebt, zu einem Kreis auffächert und sich dann langsam um die Mitte dreht, während jedes Porträt aufrecht bleibt.

Standbild der UI-Komponente Gooey blob field von Fieldbook aus der Kategorie Animation.

2159Gooey blob fieldAnimationEin Feld aus weichen Klecksen, die gesäte Pfade umkreisen und bei Annäherung miteinander verschmelzen, mit einem zusätzlichen Klecks, der dem Zeiger folgt.

2192Morphing icon loopAnimationEin einzelnes gefülltes Symbol formt sich kontinuierlich in das nächste Symbol in einer kurzen Liste um, wobei seine Umrisse fließend von einer Silhouette zur nächsten übergehen, während sich seine Füllfarbe entsprechend ändert.

2193Morphing icon toggleAnimationEin kleines Symbol verändert seinen Umriss in einer stetigen Schleife kontinuierlich zwischen zwei Formen und zwei Farben.

Standbild der UI-Komponente Path follower von Fieldbook aus der Kategorie Animation.

1792Path followerAnimationEine abgerundete Kachel, die sich entlang einer spiralförmigen Bahn bewegt, während die Bahn selbst vor ihr einfährt und dann rückwärts zum Start zurückfährt.

Standbild der UI-Komponente Ring bloom von Fieldbook aus der Kategorie Animation.

2211Ring bloomAnimationKonzentrische Lichtringe entstehen in der Mitte, schwellen nach außen an und verblassen, wobei jeder einzelne dem letzten hinterherhinkt und beim Klicken einen Ausbruch auslöst.