Kostenlose animierte UI-Komponenten in HTML, CSS und React
Animierte UI-Komponenten zum Kopieren
Die AIMRAN Library ist eine kostenlose Sammlung von 814 animierten Interface-Komponenten, die ich in echten Projekten baue und verfeinere: CSS-Buttons mit Hover-Effekten, Loader und Spinner, Toggle-Switches, individuelle Checkboxen und Radiobuttons, Eingabefelder, Karten, Tooltips, Toast-Benachrichtigungen, Navigationsmenüs, Modals und Drawer, Liquid-Glass-Elemente, Text- und Scroll-Animationen, Mikrointeraktionen, animierte Hintergründe und komplette 404-Seiten. Jede Komponente läuft live auf der Seite, du kannst also Farben, Größe, Tempo und Texte vor dem Kopieren ändern.
Die meisten Komponenten sind reines HTML und CSS und funktionieren mit jeder Technik: statische Website, WordPress, Webflow, Next.js, Vue oder Laravel. Der Rest sind React-Komponenten mit Motion. Jede Seite zeigt den Code in Tabs (HTML, CSS, JS und React) und liefert einen fertigen Prompt, mit dem ChatGPT, Claude, Cursor, v0 oder Lovable die Komponente an dein Projekt anpassen, zum Beispiel mit Tailwind-Klassen.
Die Library gibt es auf Englisch, Spanisch, Deutsch und Französisch, und alle paar Wochen kommen neue Komponenten dazu.
Häufige Fragen
Was ist die AIMRAN Library?
Die AIMRAN Library ist eine kostenlose Sammlung animierter UI-Komponenten für das Web, erstellt vom Entwickler Aimran Oukham. Jede Komponente lässt sich live anpassen und als HTML, CSS, JavaScript oder React kopieren.
Ist die AIMRAN Library kostenlos? Brauche ich ein Konto?
Ja, sie ist kostenlos und ohne Anmeldung. Komponente öffnen, anpassen und Code kopieren.
Kann ich die Komponenten mit Tailwind, Vue oder einem anderen Framework nutzen?
Ja. Die HTML- und CSS-Komponenten funktionieren überall. Für ein bestimmtes Framework kopierst du den KI-Prompt von der Komponentenseite und fügst ihn in ChatGPT, Claude oder Cursor ein, um eine Version für Tailwind, Vue, Svelte oder React zu bekommen.
Wie nutze ich eine Komponente mit einem KI-Assistenten?
Jede Komponentenseite hat einen Button Prompt kopieren. Der Prompt beschreibt die Komponente, deine Einstellungen und den Code, damit ein Assistent wie Claude, ChatGPT, Cursor, v0 oder Lovable sie ohne Raten in dein Projekt einbaut.
Sind die Komponenten barrierefrei?
Sie nutzen echte Buttons, Inputs und Labels, einen sichtbaren Tastaturfokus und aria-Attribute, wo nötig, und die Animationen respektieren prefers-reduced-motion.