Animation

Circular wipe switcher

Ein Farbumschalter, bei dem das neue Thema die gesamte Oberfläche als Kreis überflutet, der sich von genau dem Punkt aus ausdehnt, auf den Sie gedrückt haben, während der Auswahlring zwischen den Farbfeldern gleitet.

Live palette

Pick your accent

Every surface in the workspace repaints to match.

Circular wipe switcher verwenden

Teste die Vorschau mit Maus und Tastatur. Prüfe den sichtbaren Fokus und das Layout auf schmalen Bildschirmen in deiner eigenen Seite. Nenne deinem Agenten die Nummer oder den Bezeichner, um diese Komponente abzurufen.

Eigenschaften: colorA, colorB, colorC, duration, fromPointer

Welche Frameworks sind verfügbar?

Der Katalog enthält diese Versionen: react, vue, svelte, astro, html. Die Vorschau auf dieser Seite verwendet React.

Wie greife ich auf die Implementierung zu?

Vorschau und Beschreibung sind öffentlich. Melde dich mit einem berechtigten Konto an, um Code, Framework-Versionen und Installation zu öffnen.

Verbinde deinen Agenten

Ähnliche Komponenten

1676Composable RevealAnimationEin Reveal-Wrapper, dessen Schiebe-, Fade-, Zoom- und Defokussierungsteile jeweils eingeschaltet und zu einem einzigen Federübergang kombiniert werden können.

2205Pixel CurtainAnimationEin Block aus farbigen Quadraten strömt in zufälliger Reihenfolge über eine Karte, verbirgt den Tausch darunter und verschwindet dann auf die gleiche verstreute Weise.

1808Spring easing toggleAnimationEine Kachel, die zwischen zwei Stopps auf einer Federkurve gleitet, die in einen einfachen CSS-Übergang eingebettet ist, wobei die generierte Kurve daneben dargestellt wird.

1814Swap timing modesAnimationDrei Abzeichen tauschen dasselbe Symbolpaar nebeneinander unter drei unterschiedlichen Ausgangsregeln aus, sodass überlappende, aufeinanderfolgende und Out-of-Flow-Entfernungen auf einen Blick verglichen werden können.

1669Blur revealAnimationEin Wrapper, der sein untergeordnetes Element unscharf und leicht versetzt hält, bis es zum ersten Mal in das Ansichtsfenster eintritt, dann die Unschärfe auflöst und die Lücke in einer Bewegung schließt.

1763Bobble tile gridAnimationEin Gitter aus farbigen Kacheln, die auf einer Feder vom Zeiger wegbewegen und umso stärker abprallen, je schneller der Zeiger darüber gleitet.