Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Animation

Gooey blob field

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

Gooey blob field verwenden

Gooey blob field verwendet das Vorschauformat „breit“ mit der Theme-Einstellung „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.

EinstellungTypStandardwertVorschaugrenzen
ballCountnumber12Von 4 bis 24; Schrittweite 1
speednumber0.35Von 0.05 bis 1.2; Schrittweite 0.05
spreadnumber1Von 0.4 bis 2; Schrittweite 0.1
accentcolor#9BE15DKeine weitere Grenze in den Metadaten.
pointerColorcolor#FF6A1FKeine weitere Grenze in den Metadaten.
followPointerbooleantrueKeine weitere Grenze in den Metadaten.
Für welche Frameworks ist Gooey blob field verfügbar?

Gooey blob field 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 Gooey blob field?

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

Welche Details zur Barrierefreiheit sind in Gooey blob field erkennbar?

Der React-Quellcode von Gooey blob field enthält: Attribute und Ereignisbehandler (aria-hidden). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Gooey blob field reduzierte Bewegung?

Gooey blob field 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

Standbild der UI-Komponente Crank sea automaton von Fieldbook aus der Kategorie Animation.
2908Crank sea automatonAnimationEin Automat aus Sperrholz, bei dem eine Kurbel eine Reihe von Nocken dreht, die Holzfische über gleitende Wellen heben, mit genug Trägheit, um nach einem Schwung weiterzulaufen.
Standbild der UI-Komponente Focus Lens von Fieldbook aus der Kategorie Animation.
2155Focus LensAnimationEine umrissene Form, die überall weich und unscharf bleibt, außer in einem kleinen Kreis, der dem Zeiger folgt und dort scharf einrastet.
Standbild der UI-Komponente Orbiting Avatar Intro von Fieldbook aus der Kategorie Animation.
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 Orbiting badges von Fieldbook aus der Kategorie Animation.
1791Orbiting badgesAnimationKleine 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.
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.
Standbild der UI-Komponente Resonant sand plate von Fieldbook aus der Kategorie Animation.
2916Resonant sand plateAnimationFeiner Sand auf einer schwingenden Stahlplatte springt aus den bewegten Bereichen und sammelt sich entlang der ruhigen Linien, sodass bei jedem Tonwechsel eine neue Figur entsteht.