AIMRAN

Animierte UI-Komponenten

Sonnenfinsternis-404

404HTML + CSS

Glas-Kontrollzentrum

Liquid GlassReact + Motion

Keynote-Absatz beim Scrollen

Text & ScrollReact + Motion

Magnetischer Button

ButtonsReact + Motion

Praxis-404

404HTML + CSS

Glas-Musikplayer

Liquid GlassReact + Motion

Karte wird zum Modal

OverlaysReact + Motion

Houston-404

404HTML + CSS

Animierte Wetterkarte

KartenHTML + CSS

Vinyl mit Play/Pause

MikrointeraktionenReact + Motion

Dynamic Island

Liquid GlassReact + Motion

Hotel-404

404HTML + CSS

Laufband mit Scroll-Tempo

Text & ScrollReact + Motion

Button mit Funken

ButtonsHTML + CSS

Schwarzes-Loch-404

404HTML + CSS

Editoriales Vollbildmenü

NavigationReact + Motion

Eingehender Anruf

Liquid GlassReact + Motion

Café-404

404HTML + CSS

Senden mit Papierflieger

MikrointeraktionenReact + Motion

Karte als Musikplayer

KartenHTML + CSS

James-Webb-404

404HTML + CSS

Partikel-Konstellation

HintergründeHTML + CSS

Checkout-Stepper

NavigationReact + Motion

Entschlüsselte Headline

Text & ScrollReact + Motion

Onlineshop-404

404HTML + CSS

Sperrbildschirm-Mitteilungen

Liquid GlassReact + Motion

Schalter für Tag und Nacht

SchalterHTML + CSS

Zahl im Kilometerzähler-Stil

Text & ScrollReact + Motion

Mondlandung-404

404HTML + CSS

Glas-Widgets

Liquid GlassReact + Motion

Tabs mit flüssigem Tropfen

NavigationReact + Motion

Karte als Eventticket

KartenHTML + CSS

Earthrise-404

404HTML + CSS

Lightbox zum Wegwischen

OverlaysReact + Motion

Glas-Dock

Liquid GlassReact + Motion

Schwerelos-404

404HTML + CSS

Mission-Control-404

404HTML + CSS

Restaurant-404

404HTML + CSS

Fitnessstudio-404

404HTML + CSS

Tierarzt-404

404HTML + CSS

Glas-Button

Liquid GlassReact + Motion

Glas-Tab-Bar

Liquid GlassReact + Motion

Glas-Toggle

Liquid GlassReact + Motion

Glaskarte

Liquid GlassReact + Motion

Spotlight-Suche

Liquid GlassReact + Motion

Glas-Bottom-Sheet

Liquid GlassReact + Motion

Kreis-Spinner

LoaderReact + Motion

Hüpfende Punkte

LoaderReact + Motion

Unbestimmter Fortschrittsbalken

LoaderReact + Motion

Skeleton-Karte

LoaderReact + Motion

Quadrat wird Kreis

LoaderHTML + CSS

Schiebepuzzle-Loader

LoaderHTML + CSS

3D-Würfel

LoaderHTML + CSS

Sich zeichnendes Dreieck

LoaderHTML + CSS

Sechseck-Ring

LoaderHTML + CSS

Konischer Verlaufsring

LoaderHTML + CSS

Konzentrische Ringe

LoaderHTML + CSS

Sich zeichnender Kreis

LoaderHTML + CSS

Punktring

LoaderHTML + CSS

Puls mit Wellen

LoaderHTML + CSS

Springende Punkte mit Schatten

LoaderHTML + CSS

Equalizer-Loader

LoaderHTML + CSS

Punkte werden Linie

LoaderHTML + CSS

Spirale zur Mitte

LoaderHTML + CSS

Gestreifter Fortschrittsbalken

LoaderHTML + CSS

Gooey-Kugeln

LoaderHTML + CSS

Wassertropfen

LoaderHTML + CSS

Füllende Welle

LoaderHTML + CSS

Lavalampen-Loader

LoaderHTML + CSS

Neon-Ring

LoaderHTML + CSS

Neon-Schriftzug

LoaderHTML + CSS

Komet-Loader

LoaderHTML + CSS

Licht am Rand

LoaderHTML + CSS

Pac-Man-Loader

LoaderHTML + CSS

Neugierige Augen

LoaderHTML + CSS

Sanduhr-Loader

LoaderHTML + CSS

Raketen-Loader

LoaderHTML + CSS

Hüpfender Ball

LoaderHTML + CSS

Schlagendes Herz

LoaderHTML + CSS

Skeleton mit Schimmer

LoaderHTML + CSS

Ripple-Button

ButtonsReact + Motion

Lade-Button mit Erfolg

ButtonsReact + Motion

Animierter Verlaufsrahmen

ButtonsReact + Motion

Filter-Chips

FilterReact + Motion

Segmented Control

FilterReact + Motion

Mehrfachauswahl-Dropdown

FilterReact + Motion

Floating-Label-Eingabefeld

EingabefelderReact + Motion

Toggle-Schalter

EingabefelderReact + Motion

3D-Tilt-Karte

KartenReact + Motion

Spotlight-Karte

KartenReact + Motion

Animierte Toast-Benachrichtigung

ToastsReact + Motion

Spinner im macOS-Stil

LoaderReact + Motion

Fortschrittsring

LoaderReact + Motion

Fortschrittsbalken mit Glanz

LoaderReact + Motion

Skeleton für Unterkünfte

LoaderReact + Motion

Atmende Punkte

LoaderReact + Motion

Logo-Loader mit Strich

LoaderReact + Motion

Pillen-Button mit Druck

ButtonsReact + Motion

Lade-Pille mit Häkchen

ButtonsReact + Motion

Like-Button mit Partikeln

ButtonsReact + Motion

Milchglas-Button

ButtonsReact + Motion

Aufklappbarer Aktions-Button

ButtonsReact + Motion

Button mit Lichtkante

ButtonsReact + Motion

Reise-Suchleiste

EingabefelderReact + Motion

Mengenauswahl

EingabefelderReact + Motion

OTP-Code-Eingabe

EingabefelderReact + Motion

Toggle im iOS-Stil

EingabefelderReact + Motion

Preisbereich-Slider

EingabefelderReact + Motion

Segment-Tabs im iOS-Stil

NavigationReact + Motion

Tab-Leiste unten

NavigationReact + Motion

Schrumpfende Navbar

NavigationReact + Motion

Dock mit Vergrößerung

NavigationReact + Motion

Kategorieleiste mit Icons

NavigationReact + Motion

Zusammenklappende Breadcrumb

NavigationReact + Motion

Radiales Aktionsmenü

NavigationReact + Motion

Einklappbare Sidebar

NavigationReact + Motion

Paginierung mit rollenden Zahlen

NavigationReact + Motion

Wetter- und Kalender-Widget

KartenReact + Motion

Bottom Sheet

OverlaysReact + Motion

Popover mit Pfeil

OverlaysReact + Motion

Dynamic-Island-Toast

OverlaysReact + Motion

Kontextmenü

OverlaysReact + Motion

Tooltip mit Verzögerung

OverlaysReact + Motion

Seitenmenü im iOS-Stil

OverlaysReact + Motion

Löschen durch Gedrückthalten

OverlaysReact + Motion

Cookie-Banner mit Einstellungen

OverlaysReact + Motion

Produkttour mit Spotlight

OverlaysReact + Motion

Nachrichtenmenü per Long Press

OverlaysReact + Motion

Headline Wort für Wort

Text & ScrollReact + Motion

Text mit animiertem Verlauf

Text & ScrollReact + Motion

Hochzählende Zahl

Text & ScrollReact + Motion

Einblenden beim Scrollen

Text & ScrollReact + Motion

Headline, die sich umschreibt

Text & ScrollReact + Motion

Schritte im Querformat

Text & ScrollReact + Motion

Lesefortschritt nach Kapiteln

Text & ScrollReact + Motion

Erledigte Aufgabe

MikrointeraktionenReact + Motion

Sternebewertung

MikrointeraktionenReact + Motion

Avatar mit Statusring

MikrointeraktionenReact + Motion

Hüpfendes Benachrichtigungs-Badge

MikrointeraktionenReact + Motion

Sanftes Akkordeon

MikrointeraktionenReact + Motion

Befehl-kopieren-Button

MikrointeraktionenReact + Motion

Elastischer Lautstärkeregler

MikrointeraktionenReact + Motion

Wackelnde Benachrichtigungsglocke

MikrointeraktionenReact + Motion

Merken-Button mit Lesezeichen

MikrointeraktionenReact + Motion

Schwebende Emoji-Reaktionen

MikrointeraktionenReact + Motion

Button mit Glanzeffekt

ButtonsHTML + CSS

Rotierender Verlaufsrand

ButtonsHTML + CSS

Outline-Button mit Füllung

ButtonsHTML + CSS

3D-Button zum Drücken

ButtonsHTML + CSS

Leuchtender Neon-Button

ButtonsHTML + CSS

Button mit rollendem Text

ButtonsHTML + CSS

Button mit wachsendem Pfeil

ButtonsHTML + CSS

Button mit Klick-Welle

ButtonsHTML + CSS

Button mit gezeichnetem Rahmen

ButtonsHTML + CSS

Pulsierender Verlaufsbutton

ButtonsHTML + CSS

Glitch-Button mit Farbversatz

ButtonsHTML + CSS

Checkbox mit gezeichnetem Haken

CheckboxenHTML + CSS

Runde Checkbox

CheckboxenHTML + CSS

Checkbox mit Konfetti

CheckboxenHTML + CSS

Aufgabe zum Durchstreichen

CheckboxenHTML + CSS

3D-Checkbox zum Umdrehen

CheckboxenHTML + CSS

Herz als Like-Button

CheckboxenHTML + CSS

Elastischer iOS-Toggle

SchalterHTML + CSS

ON/OFF-Schalter mit Text

SchalterHTML + CSS

Neon-Schalter mit Leuchten

SchalterHTML + CSS

Toggle mit Kreuz und Haken

SchalterHTML + CSS

Toggle im Soft-UI-Stil

SchalterHTML + CSS

Farbiges schwebendes Label

EingabefelderHTML + CSS

Eingabefeld mit Unterstrich

EingabefelderHTML + CSS

Ausklappbare Suchleiste

EingabefelderHTML + CSS

Eingabefeld mit Verlaufsrand

EingabefelderHTML + CSS

Passwortfeld mit Auge

EingabefelderHTML + CSS

Textfeld mit Zeichenzähler

EingabefelderHTML + CSS

Karte mit Spotlight-Rand

KartenHTML + CSS

Karte mit Lift und Zoom

KartenHTML + CSS

Karte mit 3D-Flip

KartenHTML + CSS

Karte mit lebendigem Verlauf

KartenHTML + CSS

Karte mit verstecktem Inhalt

KartenHTML + CSS

Profilkarte mit Aktionen

KartenHTML + CSS

Tooltip mit Federeffekt

TooltipsHTML + CSS

Tooltip mit Farbverlauf

TooltipsHTML + CSS

Tooltip, der dem Cursor folgt

TooltipsHTML + CSS

Verzögerter Tooltip mit Unschärfe

TooltipsHTML + CSS

Filter-Chips mit gleitender Pille

FilterHTML + CSS

Chips mit Farbfüllung

FilterHTML + CSS

Chips mit Verlaufsrahmen

FilterHTML + CSS

Filter-Chips mit Häkchen

FilterHTML + CSS

Chips mit X zum Entfernen

FilterHTML + CSS

Filter-Chips mit Zähler

FilterHTML + CSS

Segmented Control im iOS-Stil

FilterHTML + CSS

Segmented Control mit Sprung

FilterHTML + CSS

Segmented Control mit Farbwechsel

FilterHTML + CSS

Vertikales Segmented Control

FilterHTML + CSS

Tabs mit gleitender Unterstreichung

FilterHTML + CSS

Tabs mit Leuchtbalken

FilterHTML + CSS

Tabs mit mitlaufender Pille

FilterHTML + CSS

Icon-Tabs mit Beschriftung

FilterHTML + CSS

Tabs im Karteikarten-Stil

FilterHTML + CSS

Dropdown mit Kaskade

FilterHTML + CSS

Mehrfachauswahl mit Chips

FilterHTML + CSS

Dropdown mit Suchfeld

FilterHTML + CSS

Sortiermenü mit Richtungspfeil

FilterHTML + CSS

Länderfilter mit Flaggen

FilterHTML + CSS

Preisfilter mit Wertblasen

FilterHTML + CSS

Stufen-Slider mit Markierungen

FilterHTML + CSS

Range-Slider mit Histogramm

FilterHTML + CSS

Kreisförmiger Slider

FilterHTML + CSS

Mobile Filterleiste

FilterHTML + CSS

Bottom Sheet mit Filtern

FilterHTML + CSS

Schwebender Filter-Button

FilterHTML + CSS

Kompakter Datumsbereich

FilterHTML + CSS

Größenauswahl für Kleidung

FilterHTML + CSS

Farbauswahl mit Ring

FilterHTML + CSS

Seitenleiste mit Filtern

FilterHTML + CSS

Filterleiste mit aktiven Tags

FilterHTML + CSS

Sortierbare Tabelle mit Filter

FilterHTML + CSS

Button „Filter zurücksetzen“

FilterHTML + CSS

Tag-Cloud als Filter

FilterHTML + CSS

Checkbox mit Häkchen und Federeffekt

CheckboxenHTML + CSS

Checkbox mit Kreisfüllung

CheckboxenHTML + CSS

Checkbox mit Funkenregen

CheckboxenHTML + CSS

Aufgabe mit rundem Haken

CheckboxenHTML + CSS

Wende-Checkbox mit Verlauf

CheckboxenHTML + CSS

Häkchen in zwei Strichen

CheckboxenHTML + CSS

Ring, der sich füllt

CheckboxenHTML + CSS

Checkbox mit Welleneffekt

CheckboxenHTML + CSS

Checkbox im Neon-Look

CheckboxenHTML + CSS

Checkbox mit Schloss

CheckboxenHTML + CSS

Radio-Button mit federndem Punkt

RadiobuttonsHTML + CSS

Radio mit gezeichnetem Ring

RadiobuttonsHTML + CSS

Umschalter mit gleitender Pille

RadiobuttonsHTML + CSS

Radio-Karten mit Icon

RadiobuttonsHTML + CSS

Radio mit springendem Punkt

RadiobuttonsHTML + CSS

Radio mit Flüssigkeitsfüllung

RadiobuttonsHTML + CSS

Vertikale Tabs mit Leuchtbalken

RadiobuttonsHTML + CSS

Auswahl für Tarife

RadiobuttonsHTML + CSS

Sternebewertung mit Text

RadiobuttonsHTML + CSS

Radio-Buttons im Neon-Look

RadiobuttonsHTML + CSS

Label, das in die Ecke rutscht

EingabefelderHTML + CSS

Eingabe mit Linie aus der Mitte

EingabefelderHTML + CSS

Feld mit drehendem Verlauf

EingabefelderHTML + CSS

Aufklappende Suche

EingabefelderHTML + CSS

Passwort mit Strich-Auge

EingabefelderHTML + CSS

Textfeld mit Limitbalken

EingabefelderHTML + CSS

E-Mail-Feld mit Live-Prüfung

EingabefelderHTML + CSS

Eingabe für sechsstelligen Code

EingabefelderHTML + CSS

Suche mit tippendem Platzhalter

EingabefelderHTML + CSS

Eingabefeld für Tags

EingabefelderHTML + CSS

Mengenwähler mit Schiebezahl

EingabefelderHTML + CSS

Mitwachsendes Textfeld

EingabefelderHTML + CSS

Mesh-Gradient

HintergründeHTML + CSS

Polarlicht-Hintergrund

HintergründeHTML + CSS

Atmender Farbverlauf

HintergründeHTML + CSS

Flüssiger Sonnenuntergang

HintergründeHTML + CSS

Punktraster mit Welle

HintergründeHTML + CSS

Synthwave-Raster

HintergründeHTML + CSS

Waben-Hintergrund

HintergründeHTML + CSS

Diagonale Lichtlinien

HintergründeHTML + CSS

3D-Sternenfeld

HintergründeHTML + CSS

Schnee mit Tiefe

HintergründeHTML + CSS

Glühwürmchen

HintergründeHTML + CSS

Verlauf mit Filmkorn

HintergründeHTML + CSS

Moiré-Ringe

HintergründeHTML + CSS

Gebürstetes Metall

HintergründeHTML + CSS

Wasser-Kaustik

HintergründeHTML + CSS

Gooey-Blobs als Hintergrund

HintergründeHTML + CSS

Farbiger Rauch

HintergründeHTML + CSS

Lavalampen-Hintergrund

HintergründeHTML + CSS

Matrix-Regen als Hintergrund

HintergründeHTML + CSS

Röhrenmonitor (CRT)

HintergründeHTML + CSS

Leiterplatte

HintergründeHTML + CSS

Radar

HintergründeHTML + CSS

Audio-Spektrum

HintergründeHTML + CSS

Fallende Blütenblätter

HintergründeHTML + CSS

Tropfen im Teich

HintergründeHTML + CSS

Lichtstrahlen

HintergründeHTML + CSS

Flüssiger Marmor

HintergründeHTML + CSS

Tooltip auf Kreisbahn

TooltipsHTML + CSS

Tooltip mit Tastenkürzel

TooltipsHTML + CSS

Tooltip mit Vorschau

TooltipsHTML + CSS

Geteilter Tooltip

TooltipsHTML + CSS

Tooltip mit Lichtschimmer

TooltipsHTML + CSS

Seitlicher Tooltip mit Stiel

TooltipsHTML + CSS

Tooltip mit Statusanzeige

TooltipsHTML + CSS

Tooltip mit Schreibeffekt

TooltipsHTML + CSS

Gestapelter Tooltip

TooltipsHTML + CSS

Tooltip für Kopierbestätigung

TooltipsHTML + CSS

Karte mit Aura

KartenHTML + CSS

Bento-Karte für Kennzahlen

KartenHTML + CSS

Preiskarte mit Hover-Effekt

KartenHTML + CSS

Profilkarte mit Orbit

KartenHTML + CSS

Gestapelte Agenda-Karte

KartenHTML + CSS

Karte für Gerätestatus

KartenHTML + CSS

Notizkarte mit Eselsohr

KartenHTML + CSS

Elastischer Erfolgs-Toast

ToastsHTML + CSS

Toast mit Rückgängig-Button

ToastsHTML + CSS

Toast mit Upload-Fortschritt

ToastsHTML + CSS

Fehler-Toast mit Wackeln

ToastsHTML + CSS

Toast für neue Nachrichten

ToastsHTML + CSS

Gestapelte Toasts

ToastsHTML + CSS

Insel-Pillen-Toast

ToastsHTML + CSS

Kalender-Toast für Termine

ToastsHTML + CSS

Toast für Verbindungsstatus

ToastsHTML + CSS

Toast mit zwei Aktionen

ToastsHTML + CSS

Animierte UI-Komponenten zum Kopieren

Die AIMRAN Library ist eine kostenlose Sammlung von Interface-Bausteinen, die ich in echten Projekten einsetze und verfeinere: Buttons, Ladeanimationen, Schalter, Modals, Menüs, Hintergründe und sogar komplette 404-Seiten. Alles läuft live auf der Seite, du kannst also Farben, Tempo und Texte anpassen, bevor du den Code kopierst.

Die meisten Bausteine sind reines HTML und CSS, andere sind React-Komponenten mit Framer Motion. Code kopieren, ins Projekt einfügen und an deine Marke anpassen. Wenn du mit einem KI-Assistenten arbeitest, gibt es zu jedem Baustein auch einen fertigen Prompt.

Alle paar Wochen kommen neue Bausteine dazu.