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:@Alok619308

    Cue Kit: Open-Source-React-Komponenten mit begleitenden KI-Prompts

    Cue Kit bietet über 50 kostenlose UI-Komponenten für React unter MIT-Lizenz. Viele Elemente enthalten neben dem Code auch den ursprünglichen Prompt zur Weiterverarbeitung in KI-Tools. Entwickler können die Bausteine direkt via shadcn-CLI in Webprojekte einbinden.

    Webentwicklung· Tool

  • Link:Componentry

    Componentry: Animierte React-Komponenten mit MCP- und shadcn-Support

    Componentry ist eine durch das Vercel OSS Program unterstützte Komponentenbibliothek für React. Sie bietet animierte UI-Komponenten mit editierbarem Quellcode, die über die shadcn-CLI oder via MCP in KI-Editoren installiert werden können.

    Webentwicklung· Tool

  • Link:pixelcave

    CodedVisuals: Bibliothek für animierte UI-Illustrationen via shadcn

    CodedVisuals stellt eine Sammlung von 122 animierten, code-basierten Illustrationen mit über 1.150 vorgefertigten Varianten bereit. Die Komponenten sind in 32 Kategorien unterteilt und lassen sich kopieren oder direkt über die shadcn-Registry in Webprojekte einbinden.

    Webentwicklung· Tool

  • 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:uiarc.dev

    Arc: Animierte React-Komponenten und UI-Blöcke für shadcn und KI-Tools

    Arc (uiarc.dev) ist eine Komponentenbibliothek für React mit integrierten Animationen. Die Sammlung umfasst 140 UI-Komponenten und 83 Blöcke, die sich über das shadcn-CLI, einen MCP-Server oder KI-Tools wie Cursor und Claude in Projekte einbinden lassen.

    Webentwicklung· Tool

Zurück zur Wissensbasis

Sprechen wir über Ihr Projekt.

Kontakt

Standorte

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

Ein Teil von diesem Inhalt wurde mit KI gemacht.