{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "prompt-hero-eingabefeld", "name": "Prompt-Hero mit rotierenden Beispiel-Prompts", "name_en": "Prompt hero / input-first hero", "kurz": "Ein großes Eingabefeld als Haupt-CTA, in dem sich Beispiel-Prompts selbst tippen und löschen; Absenden macht aus dem Hero sofort die Anwendung.", "kategorie": "Hero & Section-Layouts", "kategorie_slug": "hero-layouts", "kategorie_nr": 4, "bau_chat": "C2", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "website_belege": 5, "stimmung": [ "präzise", "verspielt" ], "stimmung_roh": [ "technisch", "funktional", "freundlich", "modern" ], "technik": [ "css", "vanilla-js" ], "technik_gruppen": [ "css", "js" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Im Hero steht statt Button und Screenshot ein großes Eingabefeld: eine abgerundete Textarea mit zwei bis vier Zeilen, Senden-Button und oft Anhang oder Mikrofon. Im leeren Feld tippt sich ein Beispiel-Prompt Zeichen für Zeichen ein, bleibt kurz stehen, löscht sich und macht dem nächsten Platz. Darunter liegen Vorschlags-Chips, die das Feld mit einem Klick füllen. Sobald jemand selbst tippt, verschwindet die Animation. Absenden startet direkt das Produkt, eine Anmeldung kommt erst danach.", "warum_es_wirkt": "Die Seite verspricht nicht, sie lässt sofort handeln: Der erste Klick ist schon Nutzung. Die rotierenden Beispiele nehmen die Scheu vor dem leeren Feld und zeigen nebenbei, was das Produkt alles kann. Der Hero wird zur Schnittstelle statt zur Werbefläche.", "wann_einsetzen": "KI-Tools und Generatoren, Website-Builder, Such- und Konfigurations-Einstiege („Beschreib deine Website“, „Welchen Kurs suchst du?“), Support-Startseiten. Auch als Template-Hero für Kunden mit Such- oder Buchungsfunktion.", "wann_nicht": "Wenn hinter dem Feld keine echte Funktion steht: Ein Eingabefeld, das nur zur Anmeldung führt, frustriert. Bei Portfolios und Marken ohne interaktives Produkt. Wenn das Ergebnis lange dauert und niemand sieht, dass etwas passiert.", "varianten": [ "Schleife: Tippen, Stehen, Löschen über einem Overlay (Base44, Anything)", "Fester Präfix: Der Satzanfang bleibt stehen, nur der Rest wechselt (Base44)", "Statischer Platzhalter plus Vorschlags-Chips, ohne Tipp-Animation (Figma Make, Krea, Replit, v0)", "contenteditable-Feld mit data-placeholder statt Textarea (Krea, v0)", "Modus-Umschalter im Feld (z. B. Agent oder Chat), Anhang-Plus, Mikrofon mit Aufnahme-Puls" ], "umsetzung": "Markup:
. Das Ghost-Overlay liegt absolut über dem Textfeld (pointer-events: none) und ist nur sichtbar, solange das Feld leer ist, etwa über form:has(textarea:placeholder-shown). Der native Platzhalter bleibt fest und ist transparent, solange das Overlay läuft. Schleife mit setTimeout: alle 45–75 ms ein Zeichen anhängen, 2–4 s stehen lassen, alle 25–50 ms ein Zeichen löschen, 400 ms leer, dann der nächste Text. Anhalten bei focus und input, über einen Pause-Knopf und wenn das Feld den Viewport verlässt (IntersectionObserver). Höhe: field-sizing: content mit min-height 84px und max-height 144px, sonst per JS über scrollHeight. Chips sind . Das Ghost-Overlay liegt absolut über dem Textfeld (pointer-events: none) und ist nur sichtbar, solange das Feld leer ist, etwa über form:has(textarea:placeholder-shown). Der native Platzhalter bleibt fest und ist transparent, solange das Overlay läuft. Schleife mit setTimeout: alle 45–75 ms ein Zeichen anhängen, 2–4 s stehen lassen, alle 25–50 ms ein Zeichen löschen, 400 ms leer, dann der nächste Text. Anhalten bei focus und input, über einen Pause-Knopf und wenn das Feld den Viewport verlässt (IntersectionObserver). Höhe: field-sizing: content mit min-height 84px und max-height 144px, sonst per JS über scrollHeight. Chips sind