Animations

Bewegte Szenen in SVG und CSS. Chats, Cursor, Dashboards und Seiten, die sich selbst aufbauen.

4 Components · 12 Variants

Kategorie wechseln

Auf dieser Seite

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

Chat-Szene3
Cursor-Szene3
Dashboard-Aufbau3
Seitenaufbau3

chat-scene

Chat-Szene

Ein Gespräch, das sich selbst schreibt. Tipp-Punkte, ein Eingabefeld, das tippt und sendet, Karten in Nachrichten. Darunter springt nie etwas.

Kundenchat
Assistent mit Quellen
Buchen im Chat

Props und Details

Kundenchat

Ein Gast fragt, das Café antwortet. Am Ende erscheinen Schnellantworten.

Installv1.0.2

aiw add @ai-website/chat-scene

Bringt mit utils, kit, motion-scene

Usage

<ChatScene title="Café Mira" messages={[{ from: "me", text: "…" }, { from: "them", text: "…" }]} replies={["Show the menu"]} />

Source

Assistent mit Quellen

Eine Frage zu einem Vertrag, eine Antwort mit einer Quellenkarte in der Nachricht.

Installv1.0.2

aiw add @ai-website/chat-scene

Bringt mit utils, kit, motion-scene

Usage

<ChatScene messages={[{ from: "me", text: "…" }, { from: "them", text: "…", content: <Sources /> }]} />

Source

Buchen im Chat

Zeiten erscheinen als Knöpfe in der Antwort, die Kundin wählt, die Bestätigung bringt einen Kalenderlink.

Installv1.0.2

aiw add @ai-website/chat-scene

Bringt mit utils, kit, motion-scene

Usage

<ChatScene messages={[…, { from: "them", text: "…", content: <Slots /> }, { from: "me", text: "I take 14:00" }, …]} />

Source

cursor-scene

Cursor-Szene

Ein Zeiger arbeitet sich durch eine Oberfläche, und die Oberfläche antwortet im selben Takt. Zeigt einen Ablauf ohne Video.

Formular ausfüllen
Einstellungen ändern
Karte ziehen

Props und Details

Formular ausfüllen

Klick ins Feld, die Adresse tippt sich, der Knopf wird zu Spinner und Haken, ein Toast bestätigt.

Installv1.0.0

aiw add @ai-website/cursor-scene

Bringt mit utils, kit, motion-scene

Usage

<CursorScene steps={[{ x: 140, y: 240, at: 1.4, click: true }, …]}><Typed at={1.7} text="…" /><Cue at={4.5} from="opacity:0" to="opacity:1">…</Cue></CursorScene>

Source

Einstellungen ändern

Zwei Schalter kippen, die Abrechnung gleitet auf jährlich und ein Hinweis erscheint, dann wird Speichern zu Gespeichert.

Installv1.0.0

aiw add @ai-website/cursor-scene

Bringt mit utils, kit, motion-scene

Usage

<CursorScene steps={steps}><Cue at={1.35} from="transform:translateX(0)" to="transform:translateX(16px)" /></CursorScene>

Source

Karte ziehen

Ein Zeiger mit Namen hebt eine Karte an, trägt sie übers Board und legt sie ab. Die Zähler springen um, die Spalte schließt die Lücke.

Installv1.0.0

aiw add @ai-website/cursor-scene

Bringt mit utils, kit, motion-scene

Usage

<CursorScene name="Lena" steps={steps}><Track frames={[[1.55, "…"], [3.1, "transform:translate(408px,104px)"]]}>…</Track></CursorScene>

Source

dashboard-build

Dashboard-Aufbau

Ein Dashboard, das sich im Blickfeld zusammensetzt: Karten steigen auf, Zahlen zählen, die Linie zeichnet sich, Balken wachsen, der Ring füllt sich. "live" hält es im Fluss.

Analytics
Finanzen
Live

Props und Details

Analytics

Vier Kennzahlen, eine Umsatzlinie und Buchungen pro Wochentag.

Installv1.0.1

aiw add @ai-website/dashboard-build

Bringt mit utils, kit, number-ticker, motion-scene

Usage

<DashboardBuild title="Overview" kpis={kpis} series={revenue} bars={bookings} barAxis={["M", …]} />

Source

Finanzen

Kontolinie, ein Ring, der sich Segment für Segment füllt, und die letzten Zahlungen, die hereingleiten.

Installv1.0.1

aiw add @ai-website/dashboard-build

Bringt mit utils, kit, number-ticker, motion-scene

Usage

<DashboardBuild kpis={kpis} series={balance} segments={[{ label: "Team", value: 9800 }, …]} rows={payments} />

Source

Live

Nach dem Aufbau läuft die Linie weiter, die Balken atmen und ein Live-Punkt pulsiert. Mit dem Knopf anhalten.

Installv1.0.1

aiw add @ai-website/dashboard-build

Bringt mit utils, kit, number-ticker, motion-scene

Usage

<DashboardBuild live liveLabel="Live" series={visitors} bars={sales} … />

Source

page-assembly

Seitenaufbau

Components heben aus einer Palette ab, fliegen an ihren Platz und landen, bis die Seite fertig ist und veröffentlicht wird. Von selbst oder mit dem Scrollen.

Landingpage
App-Screen
Mit dem Scrollen

Props und Details

Landingpage

Fünf Sections in Lesereihenfolge. Jede hebt ab, fliegt, landet mit einem Aufleuchten und erscheint von oben.

Installv1.0.0

aiw add @ai-website/page-assembly

Bringt mit utils, kit, motion, motion-scene

Usage

<PageAssembly preset="landing" url="atlas-outdoor.com" />

Source

App-Screen

Sechs Widgets bauen ein Dashboard, die Sidebar zuerst, die Tabelle zuletzt.

Installv1.0.0

aiw add @ai-website/page-assembly

Bringt mit utils, kit, motion, motion-scene

Usage

<PageAssembly preset="app" url="app.northwind.io" speed={1.1} />

Source

Mit dem Scrollen

Jede Component landet in ihrem eigenen Stück des Scrollwegs und fliegt zurück, wenn du hochscrollst.

Installv1.0.0

aiw add @ai-website/page-assembly

Bringt mit utils, kit, motion, motion-scene

Usage

<PageAssembly preset="landing" mode="scroll" />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Animations stehen.

Auf dieser Seite

Kundenchat

Assistent mit Quellen

Buchen im Chat

Formular ausfüllen

Einstellungen ändern

Karte ziehen

Analytics

Finanzen

Live

Landingpage

App-Screen

Mit dem Scrollen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit