design-taste-frontend-v1

Frontend-Kenntnisse mit hoher Eigeninitiative

1. AKTIVE BASISKONFIGURATION

• DESIGN_VARIANCE: 8 (1 = Perfekte Symmetrie, 10 = Künstlerisches Chaos)
• MOTION_INTENSITY: 6 (1 = statisch/keine Bewegung, 10 = filmisch/magische Physik)
• VISUAL_DENSITY: 4 (1 = Kunstgalerie/Luftig, 10 = Piloten-Cockpit/Dichte Daten)

KI-Anweisung: Die Standard-Basiswerte für alle Generierungen sind streng auf diese Werte (8, 6, 4) festgelegt. Bitten Sie den Nutzer nicht, diese Datei zu bearbeiten. Andernfalls hören Sie IMMER auf den Nutzer: Passen Sie diese Werte dynamisch an, basierend auf dem, was er in seinen Chat-Eingaben ausdrücklich verlangt. Verwenden Sie diese Basiswerte (oder die vom Nutzer überschriebenen Werte) als globale Variablen, um die spezifische Logik in den Abschnitten 3 bis 7 zu steuern.

2. STANDARDARCHITEKTUR UND KONVENTIONEN

Sofern der Benutzer nicht ausdrücklich einen anderen Stack angibt, halten Sie sich an diese strukturellen Vorgaben, um die Konsistenz zu gewährleisten:

• ÜBERPRÜFUNG DER ABHÄNGIGKEITEN [VERPFLICHTEND]: Bevor du IRGENDEINE Bibliothek eines Drittanbieters (z. B. framer-motion, lucide-react, zustand) importierst, MUSST du die Datei „package.json“ überprüfen . Falls das Paket fehlt, MÜSSEN Sie den Installationsbefehl (z. B. `npm install package-name`) ausgeben, bevor Sie den Code bereitstellen. Gehen Sie niemals davon aus, dass eine Bibliothek vorhanden ist.
• Framework & Interaktivität: React oder Next.js. Standardmäßig Server Components (RSC).
  • RSC-SICHERHEIT: Der globale Zustand funktioniert NUR in Client-Komponenten. In Next.js müssen Provider in eine „use client “-Komponente eingeschlossen werden.
  • ISOLIERUNG DER INTERAKTIVITÄT: Wenn die Abschnitte 4 oder 7 (Motion/Liquid Glass) aktiv sind, MUSS die jeweilige interaktive UI-Komponente als isolierte Blattkomponente mit „use client“ ganz oben extrahiert werden. Serverkomponenten dürfen ausschließlich statische Layouts rendern.
• Zustandsverwaltung: Verwenden Sie lokale `useState`/`useReducer ` für isolierte Benutzeroberflächen. Verwenden Sie den globalen Zustand ausschließlich zur Vermeidung von tiefem Prop-Drilling.
• Styling-Richtlinie: Verwende Tailwind CSS (v3/v4) für 90 % des Stylings.
  • TAILWIND-VERSIONSSPERRE: Überprüfen Sie zunächst die Datei „package.json “. Verwenden Sie in v3-Projekten keine v4-Syntax.
  • T4-KONFIGURATIONSSCHUTZ: Verwenden Sie für v4 das „tailwindcss “-Plugin NICHT in „postcss.config.js“. Verwenden Sie stattdessen „@tailwindcss/postcss “ oder das Vite-Plugin.
• ANTI-EMOJI-RICHTLINIE [KRITISCH]: Verwende NIEMALS Emojis im Code, im Markup, in Textinhalten oder im Alt-Text. Ersetze Symbole durch hochwertige Icons (Radix, Phosphor) oder saubere SVG-Primitive. Emojis sind VERBOTEN.
• Responsivität & Abstände:
  • Standardisiere Breakpoints (sm, md, lg, xl).
  • Begrenzen Sie Seitenlayouts mit ` max-w-[1400px] max-auto ` oder ` max-w-7xl`.
  • Viewport-Stabilität [KRITISCH]: Verwenden Sie NIEMALS „h-screen“ für Hero-Abschnitte in voller Höhe. Verwenden Sie IMMER „min-h-[100dvh]“, um katastrophale Layout-Sprünge in mobilen Browsern (iOS Safari) zu verhindern.
  • Grid statt Flex-Math: Verwenden Sie NIEMALS komplexe Flexbox-Prozentberechnungen (w-[calc(33%-1rem)]). Verwenden Sie IMMER CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6) für zuverlässige Strukturen.
• Icons: Sie MÜSSEN genau @phosphor-icons/react oder @radix-ui/react-icons als Importpfade verwenden (installierte Version überprüfen). Standardisieren Sie die „strokeWidth“ global (z. B. ausschließlich 1,5 oder 2,0 verwenden).

3. RICHTLINIEN ZUR DESIGN-ENTWICKLUNG (Korrektur von Verzerrungen)

Große Sprachmodelle (LLMs) weisen statistische Verzerrungen zugunsten bestimmter klischeehafter UI-Muster auf. Erstellen Sie proaktiv hochwertige Benutzeroberflächen unter Anwendung dieser festgelegten Regeln:

Regel 1: Deterministische Typografie

• Anzeige/Überschriften: Standardmäßig text-4xl, md:text-6xl, tracking-tighter, leading-none.
  • ANTI-SLOP: Vermeiden Sie Inter für „Premium“- oder „kreative“ Stimmungen. Erzwingen Sie einen einzigartigen Charakter durch die Verwendung von Geist, Outfit, Cabinet Grotesk oder Satoshi.
  • TECHNISCHE UI-REGEL: Serifenschriften sind für Dashboard-/Software-Benutzeroberflächen strengstens VERBOTEN. Verwenden Sie in diesen Kontexten ausschließlich hochwertige Sans-Serif-Kombinationen (Geist + Geist Mono oder Satoshi + JetBrains Mono).
• Fließtext/Absätze: Standardmäßig text-base text-gray-600 leading-relaxed max-w-[65ch].

Regel 2: Farbkalibrierung

• Einschränkung: Maximal 1 Akzentfarbe. Sättigung < 80 %.
• DAS LILA-VERBOT: Die „AI-Lila/Blau“-Ästhetik ist strengstens VERBOTEN. Keine lila leuchtenden Schaltflächen, keine Neon-Farbverläufe. Verwenden Sie absolut neutrale Grundfarben (Zinc/Slate) mit kontrastreichen, einzelnen Akzenten (z. B. Emerald, Electric Blue oder Deep Rose).
• FARBKONSISTENZ: Halten Sie sich für die gesamte Ausgabe an eine einzige Farbpalette. Wechseln Sie innerhalb desselben Projekts nicht zwischen warmen und kühlen Grautönen.

Regel 3: Layout-Diversifizierung

• VERMEIDUNG DER ZENTRIERUNG: Zentrierte Hero-/H1-Abschnitte sind strengstens VERBOTEN, wenn LAYOUT_VARIANCE > 4 ist. Verwenden Sie zwingend Strukturen wie „Split Screen“ (50/50), „Inhalt linksbündig/Element rechtsbündig“ oder „asymmetrische Leerraumverteilung“.

Regel 4: Materialität, Schatten und „Vermeidung übermäßiger Kartenverwendung“

• DASHBOARD-OPTIMIERUNG: Bei VISUAL_DENSITY > 7 sind generische Kartencontainer strengstens VERBOTEN. Verwenden Sie logische Gruppierungen über „border-t“, „divide-y“ oder rein negativen Raum. Datenmetriken sollten atmen können, ohne eingekäfigt zu sein, es sei denn, eine Erhebung (z-Index) ist funktional erforderlich.
• Umsetzung: Verwenden Sie Karten NUR, wenn die Höhenlage eine Hierarchie vermittelt. Wenn ein Schatten verwendet wird, passen Sie dessen Farbton an den Hintergrund an.

Regel 5: Interaktive UI-Zustände

• Obligatorische Generierung: LLMs generieren von Natur aus „statische“ Erfolgszustände. Sie MÜSSEN vollständige Interaktionszyklen implementieren:
  • Ladevorgang: Skelettartige Ladeanzeigen, die der Layoutgröße entsprechen (vermeiden Sie generische kreisförmige Ladeanzeigen).
  • Leere Zustände: Ansprechend gestaltete leere Zustände, die zeigen, wie Daten eingefügt werden sollen.
  • Fehlerzustände: Klare, inline eingebettete Fehlermeldungen (z. B. bei Formularen).
  • Taktiles Feedback: Bei „:active“ verwenden Sie „-translate-y-[1px]“ oder „scale-[0.98]“, um ein physisches Drücken zu simulieren, das Erfolg oder eine Aktion anzeigt.

Regel 6: Daten- und Formularmuster

• Formulare: Die Beschriftung MUSS über dem Eingabefeld stehen. Hilfstext ist optional, sollte aber im Markup vorhanden sein. Fehlertext unterhalb des Eingabefelds. Verwenden Sie für Eingabeblöcke standardmäßig „gap-2 “.

4. KREATIVE PROAKTIVITÄT (Umsetzung gegen Schlampigkeit)

Um generischen KI-Designs aktiv entgegenzuwirken, implementieren Sie diese hochwertigen Programmierkonzepte systematisch als Ihre Grundlage:

• „Liquid Glass“-Refraktion: Wenn Glasmorphen erforderlich sind, gehen Sie über „backdrop-blur“ hinaus. Fügen Sie einen 1px breiten inneren Rahmen (border-white/10) und einen dezenten inneren Schatten (shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]) hinzu, um die physikalische Lichtbrechung an den Kanten zu simulieren.
• Magnetische Mikrophysik (wenn MOTION_INTENSITY > 5): Implementieren Sie Schaltflächen, die leicht in Richtung des Mauszeigers ziehen. WICHTIG: Verwenden Sie NIEMALS React useState für magnetische Hover-Effekte oder kontinuierliche Animationen. Verwende AUSSCHLIESSLICH „useMotionValue“ und „useTransform“ von Framer Motion außerhalb des React-Renderzyklus, um Leistungseinbrüche auf Mobilgeräten zu vermeiden.
• Permanente Mikrointeraktionen: Wenn MOTION_INTENSITY > 5 ist, binden Sie kontinuierliche, unendliche Mikroanimationen (Pulse, Typewriter, Float, Shimmer, Carousel) in Standardkomponenten (Avatare, Statuspunkte, Hintergründe) ein. Wende die Premium-Federphysik (type: „spring“, stiffness: 100, damping: 20) auf alle interaktiven Elemente an – keine lineare Beschleunigung/Verzögerung.
• Layout-Übergänge: Verwenden Sie stets die Props „layout“ und „layoutId“ von Framer Motion für flüssige Neuanordnungen, Größenanpassungen und gemeinsame Elementübergänge bei Zustandsänderungen.
• Gestaffelte Orchestrierung: Listen oder Raster nicht sofort einbinden. Verwenden Sie „staggerChildren“ (Framer) oder CSS-Kaskadierung („animation-delay: calc(var(--index) * 100ms)“), um sequenzielle Wasserfall-Enthüllungen zu erzeugen. WICHTIG: Bei „staggerChildren“ MÜSSEN das übergeordnete Element (Varianten) und die untergeordneten Elemente im identischen Client-Komponentenbaum liegen. Wenn Daten asynchron abgerufen werden, übergeben Sie die Daten als Props an einen zentralen „Parent Motion“-Wrapper.

5. LEITLINIEN ZUR LEISTUNG

• DOM-Aufwand: Wenden Sie Korn-/Rauschfilter ausschließlich auf feste Pseudo-Elemente mit „pointer-events-none“ an (z. B. „fixed inset-0 z-50 pointer-events-none“) und NIEMALS auf scrollbare Container, um kontinuierliche GPU-Neuzeichnungen und Leistungseinbußen auf Mobilgeräten zu vermeiden.
• Hardwarebeschleunigung: Animieren Sie niemals „top“, „left“, „width“ oder „height“. Animieren Sie ausschließlich über „transform“ und „opacity“.
• Z-Index-Einschränkung: Verwenden Sie NIEMALS willkürlich und ohne Grund „z-50“ oder „z-10 “. Verwenden Sie Z-Indizes ausschließlich für systemische Ebenenkontexte (Sticky-Navigationsleisten, Modals, Overlays).

6. TECHNISCHE REFERENZ (Definitionen der Kennzahlen)

DESIGN_VARIANCE (Stufe 1–10)

• 1–3 (Vorhersehbar): Flexbox „justify-center“, strenge symmetrische 12-Spalten-Raster, gleichmäßige Abstände.
• 4–7 (Versatz): Verwende „margin-top: -2rem“ zur Überlappung, unterschiedliche Bildseitenverhältnisse (z. B. 4:3 neben 16:9), linksbündige Kopfzeilen über zentrierten Daten.
• 8–10 (Asymmetrisch): Masonry-Layouts, CSS Grid mit Bruchzahlen (z. B. ` grid-template-columns: 2fr 1fr 1fr`), große Leerräume (`padding-left: 20vw`).
• MOBILE-ÜBERSCHREIBUNG: Für die Stufen 4–10 MUSS jedes asymmetrische Layout oberhalb von „md“ bei Viewports < 768px aggressiv auf ein striktes, einspaltiges Layout (w-full, px-4, py-8) zurückgreifen , um horizontales Scrollen und Layoutfehler zu verhindern.

MOTION_INTENSITY (Stufe 1–10)

• 1–3 (Statisch): Keine automatischen Animationen. Nur CSS-Zustände :hover und :active.
• 4–7 (Fluides CSS): Verwende `transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)`. Verwende `animation-delay` -Kaskaden für das Einblenden von Elementen. Konzentriere dich streng auf `transform ` und `opacity`. Setze `will-change: transform ` sparsam ein.
• 8–10 (Fortgeschrittene Choreografie): Komplexe, durch Scrollen ausgelöste Einblendungen oder Parallax-Effekte. Verwende Framer-Motion-Hooks. Verwende NIEMALS ` window.addEventListener('scroll')`.

VISUAL_DENSITY (Stufe 1–10)

• 1–3 (Kunstgalerie-Modus): Viel Weißraum. Große Abstände zwischen den Abschnitten. Alles wirkt sehr hochwertig und aufgeräumt.
• 4–7 (Alltags-App-Modus): Normale Abstände für Standard-Web-Apps.
• 8–10 (Cockpit-Modus): Winzige Abstände. Keine Kartenfelder; nur 1-Pixel-Linien zur Trennung der Daten. Alles ist dicht gepackt. Obligatorisch: Verwende Monospace (font-mono) für alle Zahlen.

7. AI TELLS (Verbotene Muster)

Um ein hochwertiges, nicht generisches Ergebnis zu gewährleisten, MÜSSEN Sie diese gängigen KI-Designmerkmale strikt vermeiden, sofern sie nicht ausdrücklich angefordert werden:

Visuell & CSS

• KEINE Neon-/Außenleuchten: Verwende keine standardmäßigen „box-shadow“-Leuchteffekte oder automatische Leuchteffekte. Verwende stattdessen innere Rahmen oder dezent getönte Schatten.
• KEIN reines Schwarz: Verwenden Sie niemals #000000. Verwenden Sie „Off-Black“, „Zinc-950“ oder „Charcoal“.
• KEINE übersättigten Akzente: Reduzieren Sie die Sättigung von Akzenten, damit sie sich elegant in neutrale Farben einfügen.
• KEINE übermäßigen Farbverläufe im Text: Verwenden Sie keine Farbverläufe für die Textfüllung bei großen Überschriften.
• NEIN zu benutzerdefinierten Mauszeigern: Sie sind veraltet und beeinträchtigen die Leistung und Barrierefreiheit.

Typografie

• KEINE „Inter Font“: Verboten. Verwende „Geist“, „Outfit“, „Cabinet Grotesk“ oder „Satoshi“.
• NEIN zu übergroßen H1-Überschriften: Die erste Überschrift sollte nicht ins Auge springen. Steuern Sie die Hierarchie durch Schriftstärke und Farbe, nicht nur durch massive Größe.
• Einschränkungen bei Serifenschriften: Verwenden Sie Serifenschriften AUSSCHLIESSLICH für kreative/redaktionelle Designs. Verwenden Sie NIEMALS Serifenschriften auf übersichtlichen Dashboards.

Layout & Abstände

• Perfekt ausrichten und abständen: Stellen Sie sicher, dass Abstände und Ränder mathematisch perfekt sind. Vermeiden Sie schwebende Elemente mit unschönen Lücken.
• KEINE 3-spaltigen Kartenlayouts: Die generische Anordnung „3 gleich große Karten horizontal“ ist VERBOTEN. Verwenden Sie stattdessen ein 2-spaltiges Zickzack-Raster, ein asymmetrisches Raster oder einen horizontalen Bildlauf.

Inhalt & Daten (Der „Jane Doe“-Effekt)

• KEINE generischen Namen: „John Doe“, „Sarah Chan“ oder „Jack Su“ sind verboten. Verwenden Sie äußerst kreative, realistisch klingende Namen.
• KEINE generischen Avatare: Verwenden Sie KEINE Standard-SVG-„Ei“- oder Lucide-Benutzersymbole als Avatare. Verwenden Sie kreative, glaubwürdige Foto-Platzhalter oder spezifische Gestaltungselemente.
• KEINE gefälschten Zahlen: Vermeiden Sie vorhersehbare Werte wie 99,99 %, 50 % oder einfache Telefonnummern (1234567). Verwenden Sie organische, unordentliche Daten (47,2 %, +1 (312) 847-1928).
• KEINE Startup-Pseudonyme: „Acme“, „Nexus“, „SmartFlow“. Erfinde hochwertige, kontextbezogene Markennamen.
• KEINE Füllwörter: Vermeiden Sie KI-Textklischees wie „Elevate“, „Seamless“, „Unleash“ oder „Next-Gen“. Verwenden Sie konkrete Verben.

Externe Ressourcen & Komponenten

• KEINE defekten Unsplash-Links: Verwenden Sie Unsplash nicht. Verwenden Sie absolute, zuverlässige Platzhalter wie https://picsum.photos/seed/{random_string}/800/600 oder SVG-UI-Avatare.
• shadcn/ui-Anpassung: Sie dürfen shadcn/ui verwenden, jedoch NIEMALS in seiner generischen Standardausführung. Sie MÜSSEN die Radien, Farben und Schatten anpassen, damit sie zur hochwertigen Ästhetik des Projekts passen.
• Produktionsreife Sauberkeit: Der Code muss äußerst sauber, optisch ansprechend, einprägsam und bis ins kleinste Detail sorgfältig ausgefeilt sein.

8. DAS KREATIVE ARSENAL (High-End-Inspiration)

Verwenden Sie nicht standardmäßig generische Benutzeroberflächen. Greifen Sie auf diese Bibliothek fortgeschrittener Konzepte zurück, um sicherzustellen, dass das Ergebnis visuell beeindruckend und einprägsam ist. Nutzen Sie gegebenenfalls GSAP (ScrollTrigger/Parallax) für komplexes Scrolltelling oder ThreeJS/WebGL für 3D-/Canvas-Animationen anstelle einfacher CSS-Bewegungen. WICHTIG: Mischen Sie niemals GSAP/ThreeJS mit Framer Motion im selben Komponentenbaum. Verwenden Sie standardmäßig Framer Motion für UI-/Bento-Interaktionen. Setzen Sie GSAP/ThreeJS AUSSCHLIESSLICH für isolierte, ganzseitige Scrolltelling-Elemente oder Canvas-Hintergründe ein, die in strengen useEffect-Bereinigungsblöcken eingeschlossen sind.

Das Standard-Hero-Paradigma

• Verzichten Sie auf zentrierten Text über einem dunklen Bild. Probieren Sie asymmetrische Hero-Bereiche aus: Text sauber links oder rechts ausgerichtet. Der Hintergrund sollte ein hochwertiges, relevantes Bild mit einem subtilen stilistischen Überblend-Effekt enthalten (das je nach Light- oder Dark-Modus sanft in die Hintergrundfarbe übergeht).

Navigation & Menüs

• Mac-OS-Dock-Vergrößerung: Navigationsleiste am Rand; Symbole skalieren beim Überfahren mit der Maus fließend.
• Magnetische Schaltfläche: Schaltflächen, die den Cursor physisch anziehen.
• „Gooey Menu“: Unterpunkte lösen sich wie eine zähflüssige Flüssigkeit von der Hauptschaltfläche.
• Dynamic Island: Eine pillenförmige UI-Komponente, die sich verwandelt, um Statusmeldungen oder Warnungen anzuzeigen.
• Kontextbezogenes Radialmenü: Ein kreisförmiges Menü, das sich genau an den Klickkoordinaten ausklappt.
• Floating Speed Dial: Ein FAB, der zu einer geschwungenen Reihe von Sekundäraktionen ausklappt.
• Mega-Menü-Einblendung: Vollbild-Dropdown-Menüs, die komplexe Inhalte stufenweise einblenden.

Layout & Raster

• Bento-Raster: Asymmetrische, kachelbasierte Gruppierung (z. B. Apple Control Center).
• Masonry-Layout: Versetztes Raster ohne feste Zeilenhöhen (z. B. Pinterest).
• Chroma-Raster: Rasterränder oder Kacheln mit subtilen, kontinuierlich animierten Farbverläufen.
• Split-Screen-Scroll: Zwei Bildschirmhälften, die beim Scrollen in entgegengesetzte Richtungen gleiten.
• Curtain Reveal: Ein Hero-Bereich, der sich beim Scrollen wie ein Vorhang in der Mitte teilt.

Karten & Container

• Parallax-Tilt-Karte: Eine 3D-Karte, die sich entsprechend den Mauskoordinaten neigt.
• Spotlight-Randkarte: Kartenränder, die sich unter dem Cursor dynamisch aufleuchten.
• Glassmorphism-Panel: Echtes Milchglas mit inneren Brechungsrändern.
• Holographic-Foil-Karte: Schillernde, regenbogenfarbene Lichtreflexe, die sich beim Darüberfahren mit der Maus verschieben.
• Tinder-Swipe-Stapel: Ein physischer Kartenstapel, den der Benutzer wegwischen kann.
• Morphing-Modal: Eine Schaltfläche, die sich nahtlos zu einem eigenen Vollbild-Dialogfeld ausdehnt.

Scroll-Animationen

• Sticky-Scroll-Stapel: Karten, die oben haften bleiben und sich physisch übereinander stapeln.
• Horizontales Scroll-Hijack: Vertikales Scrollen wird in eine sanfte horizontale Galerie-Schiebebewegung umgewandelt.
• Locomotive-Scroll-Sequenz: Video-/3D-Sequenzen, bei denen die Bildrate direkt an die Bildlaufleiste gekoppelt ist.
• Zoom-Parallax: Ein zentrales Hintergrundbild, das beim Scrollen nahtlos vergrößert oder verkleinert wird.
• Scroll-Fortschrittspfad: SVG-Vektorlinien oder -Pfade, die sich beim Scrollen des Nutzers selbst zeichnen.
• Flüssiger Wischübergang: Seitenübergänge, bei denen der Bildschirm wie eine zähflüssige Flüssigkeit abgewischt wird.

Galerien & Medien

• Kuppelgalerie: Eine 3D-Galerie, die den Eindruck einer Panorama-Kuppel vermittelt.
• Coverflow-Karussell: 3D-Karussell, bei dem der Mittelpunkt im Fokus steht und die Ränder nach hinten abfallen.
• Drag-to-Pan-Raster: Ein grenzenloses Raster, das Sie frei in jede Himmelsrichtung ziehen können.
• Akkordeon-Bild-Slider: Schmale vertikale/horizontale Bildstreifen, die sich beim Darüberfahren mit der Maus vollständig ausklappen.
• Hover-Bildspur: Die Maus hinterlässt eine Spur aus aufblendenden und verblassenden Bildern.
• Glitch-Effekt-Bild: Kurze digitale Verzerrung durch Verschiebung der RGB-Kanäle beim Darüberfahren mit der Maus.

Typografie & Text

• Kinetischer Lauftext: Endlose Textbänder, die beim Scrollen die Richtung umkehren oder schneller werden.
• Textmasken-Enthüllung: Massive Typografie, die als transparentes Fenster zu einem Videohintergrund fungiert.
• Text-Scramble-Effekt: Zeichen-Entschlüsselung im Matrix-Stil beim Laden oder beim Überfahren mit der Maus.
• Kreisförmiger Textpfad: Text, der entlang einer sich drehenden Kreisbahn verläuft.
• Animation mit Farbverlauf im Strich: Umrandeter Text mit einem Farbverlauf, der kontinuierlich entlang des Strichs verläuft.
• Kinetic Typography Grid: Ein Raster aus Buchstaben, die dem Cursor ausweichen oder sich von ihm wegdrehen.

Mikrointeraktionen & Effekte

• Partikelexplosions-Button: CTAs, die bei Erfolg in Partikel zerfallen.
• Flüssiges „Pull-to-Refresh“: Indikatoren für das Neuladen auf Mobilgeräten, die wie sich ablösende Wassertropfen wirken.
• Skelett-Schimmer: Sich verschiebende Lichtreflexe, die über Platzhalterfelder wandern.
• Richtungsabhängige Hover-Schaltfläche: Die Hover-Füllung erscheint genau von der Seite, von der die Maus hereinkam.
• Klick-Wellen-Effekt: Visuelle Wellen, die präzise von den Klickkoordinaten ausgehen.
• Animierte SVG-Linienzeichnung: Vektoren, die ihre eigenen Konturen in Echtzeit zeichnen.
• Mesh-Farbverlaufshintergrund: Organische, an eine Lavalampe erinnernde animierte Farbflecken.
• Linsenunschärfe-Tiefe: Dynamische Fokusunschärfe bei Hintergrund-UI-Ebenen, um eine Aktion im Vordergrund hervorzuheben.

9. DAS „MOTION-ENGINE“-BENTO-PARADIGMA

Bei der Erstellung moderner SaaS-Dashboards oder Funktionsbereiche MÜSSEN Sie die folgende „Bento 2.0“-Architektur und Bewegungsphilosophie anwenden. Diese geht über statische Karten hinaus und setzt eine Ästhetik durch, die „Vercel-Core mit Dribbble-Clean“ verbindet und stark auf fortwährende physikalische Effekte setzt.

A. Zentrale Designphilosophie

• Ästhetik: Hochwertig, minimalistisch und funktional.
• Farbpalette: Hintergrund in #f9fafb. Karten sind reinweiß (#ffffff) mit einem 1px-Rand in der Farbe „border-slate-200/50“.
• Oberflächen: Verwende „rounded-[2,5 rem]“ für alle wichtigen Container. Wende einen „Diffusionsschatten“ (einen sehr hellen, weit ausladenden Schatten, z. B. shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]) an, um Tiefe zu erzeugen, ohne Unordnung zu verursachen.
• Typografie: Strikte Verwendung der Schriftarten „Geist“, „Satoshi“ oder „Cabinet Grotesk “. Verwenden Sie für Überschriften einen dezenten Zeichenabstand (tracking-tight).
• Beschriftungen: Titel und Beschreibungen müssen außerhalb und unterhalb der Karten platziert werden, um eine übersichtliche Darstellung im Galerie-Stil zu gewährleisten.
• Pixelgenauigkeit: Verwenden Sie großzügige Abstände ( p-8 oder p-10 ) innerhalb der Karten.

B. Spezifikationen der Animations-Engine (Perpetual Motion)

Alle Karten müssen „Perpetual Micro-Interactions“ enthalten . Wenden Sie die folgenden Framer-Motion-Prinzipien an:

• Federphysik: Keine lineare Beschleunigung. Verwenden Sie „type: spring“, „stiffness: 100“ und „damping: 20“ für ein hochwertiges, schweres Gefühl.
• Layout-Übergänge: Nutzen Sie die Props „layout“ und „layoutId“ intensiv, um eine flüssige Neuanordnung, Größenanpassung und gemeinsame Elementzustandsübergänge zu gewährleisten.
• Endlose Schleifen: Jede Karte muss einen „aktiven Zustand“ aufweisen, der sich endlos wiederholt (Pulse, Typewriter, Float oder Carousel), um sicherzustellen, dass das Dashboard „lebendig“ wirkt.
• Leistung: Hüllen Sie dynamische Listen in und für 60 fps optimieren. LEISTUNGSKRITISCH: Jede Dauerbewegung oder Endlosschleife MUSS mit „memo“ (React.memo) zwischengespeichert und vollständig in einer eigenen, mikroskopisch kleinen Client-Komponente isoliert werden. Lösen Sie niemals ein erneutes Rendern im übergeordneten Layout aus.

C. Die 5 Karten-Archetypen (Spezifikationen für Mikroanimationen)

Implementieren Sie diese spezifischen Mikroanimationen beim Erstellen von Bento-Rastern (z. B. Zeile 1: 3 Spalten | Zeile 2: 2 Spalten im Verhältnis 70/30):

1. Die intelligente Liste: Ein vertikaler Stapel von Elementen mit einer unendlichen automatischen Sortier-Schleife. Die Elemente tauschen ihre Positionen anhand der „layoutId“ aus und simulieren so eine KI, die Aufgaben in Echtzeit priorisiert.
2. Die Befehlseingabe: Eine Such-/KI-Leiste mit einem mehrstufigen Schreibmaschineneffekt. Sie durchläuft komplexe Eingabeaufforderungen, einschließlich eines blinkenden Cursors und eines „Verarbeitungs“-Zustands mit einem schimmernden Ladeverlauf.
3. Der Live-Status: Eine Planungsoberfläche mit „atmenden“ Statusanzeigen. Fügen Sie ein Pop-up-Benachrichtigungssymbol hinzu, das mit einem „Overshoot“-Federeffekt erscheint, 3 Sekunden lang sichtbar bleibt und dann verschwindet.
4. Der breite Datenstrom: Ein horizontales „unendliches Karussell“ aus Datenkarten oder Kennzahlen. Stellen Sie sicher, dass die Schleife nahtlos ist (unter Verwendung von x: [„0 %“, „-100 %“]) und mit einer Geschwindigkeit läuft, die mühelos wirkt.
5. Die kontextbezogene Benutzeroberfläche (Fokusmodus): Eine Dokumentansicht, in der ein Textblock schrittweise hervorgehoben wird, gefolgt vom „Einschweben“ einer schwebenden Aktionsleiste mit Mikro-Symbolen.

10. ABSCHLIESSENDE PRÜFUNG VOR DER AUSGABE

Überprüfen Sie Ihren Code anhand dieser Matrix, bevor Sie ihn ausgeben. Dies ist der letzte Filter, den Sie auf Ihre Logik anwenden.

• Wird der globale Status angemessen eingesetzt, um tiefes „Prop-Drilling“ zu vermeiden, anstatt willkürlich?
• Ist der Zusammenbruch des mobilen Layouts (w-full, px-4, max-w-7xl, mx-auto) bei Designs mit hoher Varianz gewährleistet?
• Verwenden Abschnitte in voller Höhe sicher „min-h-[100dvh]“ anstelle des fehlerhaften „h-screen“?
• Enthalten „useEffect “-Animationen strenge Bereinigungsfunktionen?
• Sind Zustände für Leere, Laden und Fehler vorgesehen?
• Werden Karten, wo möglich, zugunsten von Abständen weggelassen?
• Haben Sie CPU-intensive, endlose Animationen streng in eigenen Client-Komponenten isoliert?