Das bekommst du
- Ein kompletter erster Bildschirm als eine HTML-Datei: Kopfzeile, Hero, Schritt-Chips und Laufband
- Ein typisierter React- und Tailwind-Block mit wiederverwendbarer Partikelfeld-Komponente
- Eine bibliotheksfreie Partikel-Engine mit Kugel-, Ring-, Wellen-, Helix- und Bildformationen
- Helle und dunkle Warmpapier-Tokens sowie eine Prüfung auf Farben außerhalb der Palette
- Optional eine Produkt-Silhouette von PopNow für die Punkte, vorher angeboten
Gut für
- Landingpages für SaaS, Apps und Werkzeuge
- Launches, die sich in drei kurzen Ideen erzählen lassen
- Ein statisches Hero-Bild durch sanfte Bewegung ersetzen
Nicht für
- Dunkle, energiegeladene Marken
- Lange, scroll-gesteuerte Geschichten
- Seiten, die schon von einem großen Foto oder Video geführt werden
So nutzt du ihn
In Claude oder ChatGPT
Nutze den PopNow-Skill „Partikel-Animations-Hero“ (particle-animation-hero) dafür: Füge meiner Next.js-Seite für einen Gewohnheits-Tracker einen Hero hinzu: „Kleine Schritte, jeden Tag gehalten“, Ideen Verfolgen, Stapeln, Feiern.
In einem Coding-Agent
/popnow-particle-animation-hero Füge meiner Next.js-Seite für einen Gewohnheits-Tracker einen Hero hinzu: „Kleine Schritte, jeden Tag gehalten“, Ideen Verfolgen, Stapeln, Feiern.
Dann probier
Mach die dritte Idee zu unserem Blatt-Logo aus public/leaf.png.
Gib mir auch die einfache HTML-Version für die Warteliste.
Das solltest du bereithalten
- Eine Überschrift, ein oder zwei Sätze und zwei Links
- Drei kurze Ideen mit je einer Zeile Bildunterschrift
- Optional: ein transparentes PNG deines Zeichens oder Produkts, 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.
Animierte Hero-Section
+3Ein Landingpage-Hero mit sanft wechselndem Schlagwort, zwei Buttons und einem breiten Bildrahmen.
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.
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
Ist es schwer?
Nein. Es ist ein einziges 2D-Canvas und einige hundert Zeilen einfaches JavaScript, ohne WebGL oder Animationsbibliothek. Die Punktzahl richtet sich nach der Bildschirmgröße, und die Schleife stoppt in verborgenen Tabs und wenn der Hero wegscrollt.
Können die Partikel mein Logo bilden?
Ja, wenn es dir gehört. Gib ein transparentes PNG einer kräftigen, einfachen Form, und die Engine tastet es in Punkte ab. PopNow kann auch eine saubere Silhouette deines Produkts erzeugen, sobald du den Preis gesehen hast.
Wie steuern Besucher es?
Drei Schritt-Chips unter den Buttons verwandeln die Punkte, per Klick oder mit den Pfeiltasten. Bevor jemand wählt, schaltet das Feld alle paar Sekunden von selbst weiter.
Wird reduzierte Bewegung respektiert?
Ja. Bei reduzierter Bewegung halten die Punkte still, Schritte wechseln ohne Animation, nichts schaltet automatisch weiter und das Laufband bleibt stehen.