benday: Halbraster-Ladeindikatoren aus Logos für KI-Interfaces

LinkKacem MathlouthiTool

benday ist eine React-Komponente, die beliebige Logos in animierte Ben-Day-Rasterpunkte verwandelt. Sie dient als Lade- bzw. Thinking-Indikator für KI- und Agenten-Schnittstellen anstelle von standardmäßigen Spinnern.

Das Wichtigste

  1. Wird als shadcn-Registry-Komponente über das CLI installiert (sieben TypeScript-Dateien ohne externe Paketabhängigkeiten außer React).
  2. Funktionsweise: Das Logo wird gerastert, Hintergrund und Tinte per Alpha- oder Luminanzmaske getrennt, eine euklidische Distanztransformation berechnet und ein Dot-Map-Gitter erzeugt.
  3. Unterstützt Leistungsoptimierungen: Rendering stoppt außerhalb des Sichtfelds, beachtet 'prefers-reduced-motion' und ermöglicht Build-Time-Baking der Dot-Map zur Einsparung von Client-Berechnungen.
  4. Enthält 21 Animations-Presets (darunter Contour, Shimmer, Ripple, Breathe, Orbit und Glitch), eigene Presets können als reine Funktionen definiert werden.

Warum das relevant ist

KI-Anwendungen erfordern oft lange Wartezeiten für Modellantworten. Generische Spinner verwässern das Branding, während benday das Markenlogo selbst für ein visuelles Statusfeedback nutzt.

Einordnung

Das Tool verbindet ästhetisches Design mit solider Performance-Architektur. Durch die Reduktion auf wenige hundert Datenpunkte in einer Dot-Map und die Möglichkeit des Vorberechnens beim Build bleibt die Client-Last gering. Die Integration über die shadcn-CLI vermeidet Dependency-Bloat.

Erwähnte Links

Gefunden in

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. September 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • Link:Swami Malode

    Rare UI: Sammlung animierter React-Komponenten

    Rare UI ist eine kostenlose Open-Source-Bibliothek mit über 18 animierten React-Komponenten, die sich über die shadcn CLI installieren lassen.

    Webentwicklung· Tool

  • Link:TurboProduct design studio

    Beautiful UI: Komponentenbibliothek für KI-native Interfaces

    Das Designstudio TurboProduct stellt mit Beautiful UI eine Sammlung von 21 UI-Komponenten unter MIT-Lizenz bereit, die speziell auf KI-native Schnittstellen und Agenten-Workflows zugeschnitten sind.

    KI & AI· Sammlung

  • Link:Mannupaaji

    Aceternity UI: React-Komponentenbibliothek mit Tailwind und Framer Motion

    Aceternity UI von Entwickler Mannupaaji bietet über 200 vorgefertigte React-Komponenten, Blöcke und Vorlagen für Landingpages. Die Bibliothek setzt auf Tailwind CSS sowie Motion und bietet neben einem Copy-and-Paste-Ansatz auch Integrationen über einen MCP-Server für KI-Agenten.

    KI & AI· Tool

  • Link:Maxwell Barvian

    NumberFlow: Abhängigkeitsfreie React-Komponente für animierte Zahlen

    NumberFlow ist eine quelloffene, barrierefreie React-Komponente von Maxwell Barvian, die Zahlenwechsel automatisch und flüssig animiert. Die Bibliothek verzichtet auf externe Abhängigkeiten, nutzt Web-Standards und unterstützt native Formatierungsoptionen über Intl.NumberFormat.

    Webentwicklung· Tool

  • Link:21st Labs, Inc.

    21st.dev: Community-Registry für React-Komponenten und shadcn-Themes

    21st.dev ist ein Marktplatz und Verzeichnis mit über 12.000 React-Komponenten, Vorlagen und Themes. Die UI-Elemente basieren auf Tailwind CSS sowie shadcn/ui-Konventionen und lassen sich über vorbereitete Prompts direkt in AI-Tools wie Claude Code, Lovable oder Cursor einbinden.

    KI & AI· Sammlung

Zurück zur Wissensbasis

Lassen Sie uns über Ihr Projekt sprechen

Kontakt aufnehmen

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.