Das bekommst du
- Eine über Props gesteuerte React-Hero-Komponente mit Anwendungsbeispiel
- Derselbe Hero als einzelne HTML-Datei ohne Build-Schritt
- Theme-Tokens für Hell und Dunkel, ein Linienraster-Hintergrund und Bewegungsregeln
- Ein gezeichnetes Ersatzbild, damit der Hero auch ohne Bild fertig aussieht
- Optionales Hero-Bild von PopNow, vorher beziffert
Gut für
- Landingpages für SaaS, Apps und Dienstleistungen
- Einen flachen, statischen ersten Screen ersetzen
- Wartelisten- und Launch-Seiten mit einer klaren Aktion
Nicht für
- Eine ganze Website mit vielen Abschnitten bauen
- Scroll-gesteuertes Storytelling oder aufwendige Animation
- Paletten auf Basis von gesättigtem Blau oder Violett ohne neues Theme
So nutzt du ihn
In Claude oder ChatGPT
Nutze den PopNow-Skill „Animierte Hero-Section“ (animated-hero-section) dafür: Füge meiner Next.js-Landingpage einen Hero hinzu: „Reisen planen, die sich leicht / entspannt / gemeinsam anfühlen“, mit den Buttons „Planung starten“ und „Beispiele ansehen“.
In einem Coding-Agent
/popnow-animated-hero-section Füge meiner Next.js-Landingpage einen Hero hinzu: „Reisen planen, die sich leicht / entspannt / gemeinsam anfühlen“, mit den Buttons „Planung starten“ und „Beispiele ansehen“.
Dann probier
Erzeuge ein breites Foto für den Rahmen: ein sonniger Tisch mit Karten und Kaffee. Nenn mir vorher die Credits.
Gib mir zusätzlich die einfache HTML-Version für meine statische Website.
Das solltest du bereithalten
- Eine Einleitungszeile und 3–5 kurze wechselnde Wörter
- Fließtext, Button-Beschriftungen und Links
- Optional: deinen Screenshot, ein Produktfoto oder einen PopNow-API-Schlüssel
Ähnliche Skills
Alle ansehen →3D-Avatar-Maker
+3Baue im Browser eine niedliche 3D-Figur im Plüschtier-Look und speichere sie als transparentes PNG oder 3D-Seite.
Kalender-Heatmap
+3Ein Jahr täglicher Aktivität als schattiertes Kalenderraster, mit Serien, Summen und Tastaturbedienung.
KI-SaaS-Landingpage
+3Warmes Sandpapier und feine Linien um ein lebendiges Kanban-Board, auf dem ein Assistent Aufgaben plant.
Shader-Hero-Website für Agenturen
+3Orange-Shader hinter großer Aussage, Pillen-Navigation und versetztem Raster mit Fallstudien.
Dunkle SaaS-Landingpage
+3Eine dunkle, bewegungsreiche Marketingseite für ein Softwareprodukt, geliefert als eine eigenständige HTML-Datei.
Designer-Portfolio-Website
+3Sechs geneigte Karten um eine verblassende Überschrift auf ruhigem Grau, eine rote Porträtkarte, Fallstudien.
Entwickler-Portfolio-Website
+3Eine dunkle persönliche Website für Entwickler mit Fallstudien, Artikeln, Vorträgen, Lebenslauf und Kontaktformular.
Redaktionelle SaaS-Website
+3Marineblauer geteilter Hero, Serifen-Überschrift neben einem Dokumentarbild, schräge Bänder, ein Kobaltakzent.
Glassmorphism-Website-Vorlage
+3Mattglas-Pillen auf Fastschwarz, große Serifen-Überschrift mit einem kursiven Wort und E-Mail-Anmeldung.
Website für Hardware-Produkte
+3Riesige haarlinige Modellnamen auf Silber-Studioaufnahmen, Datenkarten und eine maßstabsgetreue Reihe.
Interaktives Architekturdiagramm
+3Ein offline nutzbares, klickbares Systemdiagramm aus einem geprüften JSON-Modell, mit den Belegen zu jedem Kasten.
Interaktiver Raster-Hero
+3Dunkles Raster feiner Fäden, das sich zum Cursor neigt und bei jedem Klick einen Ring ausrollt.
Knowledge-Graph-Explorer
+3Mach aus Projektnotizen einen durchsuchbaren Offline-Graphen, in dem jede Aussage auf ihre Quellzeile verweist.
KPI-Dashboard-Vorlage
+3Vier KPI-Kacheln mit Veränderungs-Chips über einem leuchtenden Liniendiagramm, Aufschlüsselung und Zielbalken.
Landingpage aus KI-Mockups
+3Drei Entwürfe ganzer Seiten ansehen, einen wählen, dann baut dein Agent ihn als sauberen Code.
Magazin-Website-Vorlage
+3Eine Magazin-Website in Printqualität mit Artikeln, Themen, kleinem Shop und Abos, als eine HTML-Datei.
Partikel-Animations-Hero
+3Text auf warmem Papier neben einer drehenden Kugel aus Tinten- und Türkispunkten, die sich je Idee formt.
Persönliche Marken-Website
+3Ein Porträt, das in warmes Papier übergeht, darüber eine feine Klammer, daneben kurze und fette Aussagen.
Kinoreife Produkt-Launch-Seite
+3Fastschwarze Filmseite: Serifen-Titelkarte über gleitendem Licht, Letterbox-Nachtszene, Reservierungsformular.
Admin-Dashboard-Vorlage
+3Eine funktionierende Backoffice-Konsole mit Diagrammen, Tabellen, Kanban und Kalender, als eine Offline-HTML-Datei.
SaaS-Landingpage-Vorlage
+3Eine ruhige, helle Marketingseite für ein Softwareprodukt mit funktionierender Produktkonsole, Preisen und Registrierung.
Portfolio-Website im Scrapbook-Stil
+3Ein mehrseitiger Online-Lebenslauf aus Papierobjekten, mit Fallstudien und druckbarem Lebenslauf.
Sneaker-Shop-Website-Vorlage
+3Ein kompletter Schuh- oder Modeshop mit Katalog, Produktseiten, Warenkorb und Demo-Checkout in einer HTML-Datei.
Landingpage für Workflow-Automatisierung
+3Graphit-Seite mit kleiner Überschrift und einem lebenden Knotengraphen, der läuft und Logs streamt.
Fragen
Brauche ich React?
Nein. Der Skill nimmt die React-Komponente, wenn dein Projekt React und Tailwind nutzt, und die einfache HTML-Datei, wenn es keinen Build-Schritt gibt. Andere Frameworks bekommen eine Portierung desselben Markups und derselben Bewegung.
Ist die Animation barrierefrei?
Das Wort gleitet mit einem kurzen Tween herein, pausiert in Tabs im Hintergrund und stoppt komplett, wenn Besucher reduzierte Bewegung bevorzugen. Screenreader lesen einmal die ganze Überschrift statt eines wechselnden Worts.
Was, wenn ich kein Hero-Bild habe?
Eine gezeichnete Fläche in den Theme-Farben füllt den Rahmen, sodass der Abschnitt trotzdem vollständig aussieht. Du kannst später einen eigenen Screenshot einfügen oder ein Bild mit PopNow erzeugen.
Macht PopNow einen Screenshot meiner App?
Nein. Für Software fragt der Skill nach einem echten Screenshot. PopNow wird für Szenenfotos, Produktaufnahmen vor passendem Hintergrund oder abstrakte Flächen genutzt.