Zum Inhalt springen
UI Kit
Accent

Mikroanimationen

Icons, die sich mit Bedeutung bewegen, Statussymbole, die sich selbst zeichnen, Konfetti für gute Momente und Zeichnungen beim Scrollen.

4 Components · 21 Variants
Kategorie wechseln

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

animated-icon

Animierte Icons

Sechzehn Icons, die sich mit Sinn bewegen, wenn du auf sie oder ihren Knopf zeigst. Gleiches Raster und gleicher Strich wie die Kit-Icons.

Props und Details · Animierte Icons

Glocke

Die Glocke schwingt, der Klöppel folgt einen Takt später. Spielt beim Zeigen und beim Tastaturfokus des Knopfs.

Hoch- und Herunterladen

Der Pfeil verlässt die Schale und kommt von der anderen Seite zurück. In einer Ablagefläche läuft er von selbst.

Senden

Der Flieger holt aus, startet nach oben rechts und landet wieder von unten links.

Liken und merken

Umschalter mit gefülltem Zustand. Das Herz schlägt, der Stern dreht ein Fünftel und kommt zur Ruhe.

Alle Icons

Das ganze Set als Knöpfe. Zeig auf eins oder geh mit Tab durch, jedes spielt seine eigene Bewegung.

In einer Liste

Icons, die von selbst spielen, mit langer Pause und versetzt, damit sich die Liste nie auf einmal bewegt.

status-animation

Status-Animationen

Haken, die sich zeichnen, ein Fehler, der einmal wackelt, drei Spinner, ein Ring, der sich füllt, und ein Live-Puls. Nur SVG und CSS.

Props und Details · Status-Animationen

Erfolg

Der Kreis zeichnet sich, der Haken folgt, ein kleiner Kranz schließt ab. Spielt einmal beim Hereinscrollen.

Fehler und Warnung

Das Kreuz zeichnet sich in zwei Strichen und wackelt einmal. Das Warnzeichen lässt sein Ausrufezeichen weich hineinfallen.

Laden

Ein Ring mit weicher Drehung, drei atmende Punkte und vier Balken. Bei reduzierter Bewegung stehen sie still.

Fortschrittsring

Ringe füllen sich beim Erscheinen auf ihren Wert, die Zahl zählt mit.

Live-Puls

Ein Punkt mit zwei weichen Ringen für das, was gerade läuft. Ruhig, nie im Gleichschritt mit dem nächsten.

Knopf-Zustände

Ein echter Knopf, der durch Laden und Erfolg läuft und zurückkehrt. Die Textwechsel werden vorgelesen.

celebrate

Feiern

Momente der Freude für deine Seite, von Konfetti und Regen über einer Karte bis zu Feuerwerk, Kanonen von der Seite und funkelnden Sternen. Eine feste Ebene, die die Seite nie verbreitert, Farben aus dem Theme, ruhig bei reduzierter Bewegung. Aus dem Code, per Klick oder beim Hereinscrollen.

Props und Details · Feiern

Veröffentlichen-Knopf

Der Knopf arbeitet, wird zum Haken, und Konfetti springt aus ihm heraus. So endet eine lange Aufgabe.

Im Studio öffnen

Erfolgskarte

Eine Bestellbestätigung, über deren Karte beim Hereinscrollen ein sanfter Konfettiregen fällt.

Im Studio öffnen

Meilenstein

Eine Zahl zählt bis zum Meilenstein, dann öffnen sich darüber drei Feuerwerksbögen.

Im Studio öffnen

Start-Kanonen

Konfetti schießt aus beiden unteren Ecken des Fensters, sobald das Start-Banner im Bild ist, der Knopf feuert erneut.

Im Studio öffnen

Funkeln

Kleine Sterne funkeln um ein Wort und ein Badge, beim Hover schneller. Der Knopf lässt ein kleines eigenes Konfetti springen.

Im Studio öffnen

scroll-drawing

Scroll-Zeichnung

Eine Strichzeichnung, die sich beim Scrollen zeichnet und beim Zurückscrollen wieder verschwindet. Vier Zeichnungen dabei, eigene SVG-Pfade gehen auch.

Props und Details · Scroll-Zeichnung

Bauplan

Bodenlinie, Wände, Dach, Tür, Fenster und zuletzt die Maße, in dieser Reihenfolge.

Route

Erst Höhenlinien und ein Fluss, dann der Weg vom Startpunkt bis zum Gipfel.

Wachstumslinie

Achsen und Raster, dann die Linie, dann die Meilensteine mit Beschriftung.

Arbeitsplatz

Stillleben eines Schreibtischs, Stück für Stück gezeichnet.

Ähnliche Components

Mehr aus Visuals, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Mikroanimationen stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert