# Remotion-Vorlagen für UI-Komponenten und Ablaufanimationen 14 kostenlose Remotion-Vorlagen für UI-Animationen: Comboboxen, Befehlsmenüs, Toasts, Schieberegler, Tabs und komplette Anmelde-, Checkout- und Einstellungsabläufe. Bearbeiten oder Code holen. Canonical URL: https://www.subclip.app/de/motion-graphics-templates/remotion/ui-animations Diese Remotion-Vorlagen animieren die Teile einer Oberfläche: eine Combobox, die sich öffnet, ein Befehlsmenü, das filtert, ein Toast, der nach einem Klick hereingleitet, ein Schieberegler, der gezogen wird. Mehrere davon sind komplette Abläufe, in denen ein Cursor ein Anmeldeformular ausfüllt oder einen Checkout abschließt. Sie sind nützlich für Produktdemos und SaaS-Launch-Videos, die eine funktionierende App zeigen sollen, ohne eine aufzunehmen. ## Komponenten und Abläufe Die Komponentenvorlagen spielen jeweils eine Interaktion ab: Combobox tippt eine Suchanfrage und wählt ein Ergebnis, Command Menu filtert eine Befehlsliste, Context Menu öffnet sich per Rechtsklick, Tabs wechselt Panels, Slider zieht einen Wert, Stepper geht Schritte durch, Resizable zieht einen Trenngriff, Skeleton löst sich in geladenen Inhalt auf, Toast bestätigt eine Aktion und Typing Indicator zeigt das Pulsieren der drei Punkte. Search Reveal baut eine Suchleiste aus Konstruktionskreisen auf. Die Abläufe verketten diese: Signup Flow füllt jedes Feld aus und sendet ab, Checkout Flow wählt einen Tarif und gibt Kartendaten ein, und Settings Toggle Flow legt Schalter um, wählt ein Theme und speichert. ## Die Oberfläche bearbeiten Jede Vorlage ist eine TSX-Komponente mit Beschriftungen, Werten und Timings in einfachen Props und Arrays, sodass Sie die Texte an Ihr Produkt anpassen können. Bearbeiten Sie sie in Subclip neben Ihren Bildschirmaufnahmen, oder kopieren Sie den Code in Ihr eigenes Remotion-Projekt. ## 14 Vorlagen - [Search Reveal](https://www.subclip.app/de/motion-graphics-templates/remotion/search-reveal) (Remotion, Oberfläche): Feine Konstruktionskreise wachsen und rasten zu einer Suchleiste ein, Ihr Text wird eingetippt, und dahinter öffnet sich ein farbiges Grafikpanel. - [Combobox](https://www.subclip.app/de/motion-graphics-templates/remotion/combobox) (Remotion, Oberfläche): Eine durchsuchbare Auswahlkomponente mit Platzhalter-Auslöser, geöffnetem Optionspanel und hervorgehobener Zeile, für UI-Demovideos. - [Command Menu](https://www.subclip.app/de/motion-graphics-templates/remotion/command-menu) (Remotion, Oberfläche): Eine Befehlspalette für die Tastatur mit Suchfeld und einer Liste von Befehlen mit Tastenkürzeln, geöffnet über einem abgedunkelten Hintergrund. - [Context Menu](https://www.subclip.app/de/motion-graphics-templates/remotion/context-menu) (Remotion, Oberfläche): Ein Rechtsklick-Menü mit vier Aktionen und einer Zeile im Hover-Zustand, bereit zur Platzierung an einem Cursorpunkt in einer UI-Demo. - [Resizable](https://www.subclip.app/de/motion-graphics-templates/remotion/resizable) (Remotion, Oberfläche): Ein Layout mit zwei Panels und einem Trenngriff, bei dem Aufteilungsverhältnis und Griffzustand für UI-Demovideos eingestellt werden können. - [Skeleton](https://www.subclip.app/de/motion-graphics-templates/remotion/skeleton) (Remotion, Oberfläche): Eine Skeleton-Ladekarte mit einem Schimmer, der über einen runden Avatar und zwei Textzeilen streicht. - [Slider](https://www.subclip.app/de/motion-graphics-templates/remotion/slider) (Remotion, Oberfläche): Ein sauberer Schieberegler, dessen Füllwert und Reglerzustand eingestellt werden können, mit dem aktuellen Wert über dem Regler. - [Stepper](https://www.subclip.app/de/motion-graphics-templates/remotion/stepper) (Remotion, Oberfläche): Ein horizontaler Onboarding-Stepper mit drei beschrifteten Schritten, bei dem der aktive Schritt eingestellt werden kann, um Fortschritt zu zeigen. - [Tabs](https://www.subclip.app/de/motion-graphics-templates/remotion/tabs) (Remotion, Oberfläche): Eine Tab-Komponente mit Pillen- oder Unterstrich-Anzeige und einem kurzen Textpanel für den aktiven Tab. - [Toast](https://www.subclip.app/de/motion-graphics-templates/remotion/toast) (Remotion, Oberfläche): Eine kleine Benachrichtigungskarte mit Icon, Titel und Detailzeile, im Standard- oder Erfolgsstil, für App-Demovideos. - [Typing Indicator](https://www.subclip.app/de/motion-graphics-templates/remotion/typing-indicator) (Remotion, Oberfläche): Eine Reihe kleiner Punkte, die nacheinander in einer sanften Welle hüpfen, wie die Tipp-Anzeige in einer Chat-App. - [Signup Flow](https://www.subclip.app/de/motion-graphics-templates/remotion/signup-flow) (Remotion, Oberfläche): Eine Anmeldekarte im shadcn-Stil, in der ein Cursor Name, E-Mail und Passwort ausfüllt, mit Ladezustand absendet und einen Erfolgs-Toast erhält. - [Checkout Flow](https://www.subclip.app/de/motion-graphics-templates/remotion/checkout-flow) (Remotion, Oberfläche): Eine Checkout-Karte mit Abrechnungsumschalter, Karteneingabe und Bedingungs-Checkbox, die ein Cursor ausfüllt und bezahlt, mit einem Erfolgs-Toast am Ende. - [Settings Toggle Flow](https://www.subclip.app/de/motion-graphics-templates/remotion/settings-toggle-flow) (Remotion, Oberfläche): Eine zweispaltige Einstellungskarte, in der ein Cursor Benachrichtigungen einschaltet, ein Theme wählt, einen Regler zieht und speichert.