Webdesign: UI-Komponenten, Animationen & Inspiration
Fertige, animierte UI-Bausteine, Effekte und Inspirationsquellen für moderne Websites und App-Oberflächen. Viele Bibliotheken basieren auf React, Tailwind CSS und shadcn/ui und lassen sich per Copy-Paste, Befehlszeile oder direkt über KI-Agenten (z.B. Claude per MCP) in eigene Projekte übernehmen.
Componentry
Komponenten-Bibliothek für polierte Oberflächen: schöne, animierte React-Komponenten mit bearbeitbarem Quellcode (Tailwind CSS, TypeScript, Framer Motion). Installation per shadcn-CLI oder direkt im KI-Editor per MCP.
21st.dev
Über 12.000 React- und Tailwind-Komponenten, Templates und Themes: echte Designs einfach kopieren, passende Prompts übernehmen und mit dem KI-Agenten eine polierte UI bauen (kostenlose Templates verfügbar).
Skiper UI
Sammlung von über 100 animationsstarken, ungewöhnlichen React- und Next.js-Komponenten auf Basis von shadcn/ui – z.B. Text-Scroll-Effekte, kinetische Eingabefelder, Dynamic Islands und Theme-Toggles.
Kokonut UI
„Components that feel right“: Open-Source-React-Komponenten mit Tailwind CSS, Motion und shadcn/ui. Jede Komponente ist live ausprobierbar und mit einem Befehl oder einem Prompt installiert.
Bencho
Bibliothek interaktiver React-Komponenten und Micro-Interactions: alles live erkunden, anpassen und direkt ins eigene Projekt übernehmen.
libraries.dev
Hochwertige UI-Effekte für KI-Anwendungen, bereit für Coding-Agenten: animierte Rahmen, „Denk“-Anzeigen, Voice-Visualizer, Bot-Avatare, Liquid Metal und Bild-Loader (Open Source).
Motion
Die Animations-Bibliothek, die Menschen und KI-Agenten gleichermaßen lieben: Layout-, Scroll-, Gesten- und 3D-Animationen mit Hardware-Beschleunigung für React, Vue und JavaScript.
ShaderGradient
Erstelle wunderschöne, bewegte Farbverläufe (Shader-Gradients) für Framer, Figma und React – ideal für Hintergründe und Hero-Bereiche.
Liquid Orb Editor
Echtzeit-Editor für animierte „Liquid Glass“-Kugeln – gebaut mit React, WebGPU/WGSL und Toolcraft UI. Perfekt für KI-Assistenten-Avatare oder Lade-Animationen.
Bklit UI
Sorgfältig gestaltete Diagramme und Datenvisualisierungen als Komponenten-Bibliothek auf Basis von shadcn/ui.
Pryzm
Visual Studio für Designer im Browser: Erstelle in Sekunden einzigartige Hintergründe und Texturen für Websites, Templates und Designs.
Grainrad
Kostenloses Effekt-Tool für Bilder und Videos im Browser (WebGPU, 60 fps): ASCII-, Dithering- und Retro-Looks in Echtzeit.
Ditther
Browser-Editor mit über 75 Effekten: Verwandle Fotos in Dithering, Halftone, ASCII-Art, Pixel-Art oder Voxel-Grafiken – kostenlos, ohne Installation.
CSS Design Awards
Inspirationsquelle: Galerie preisgekrönter Websites mit herausragendem Design, UI/UX und Innovation.
CARI – Aesthetics
Consumer Aesthetics Research Institute: Online-Community, die ein visuelles Lexikon der Konsum-Ästhetik von den 1970ern bis heute aufbaut – ideal zur Stilfindung (z.B. Y2K, Frutiger Aero).
