Das bekommst du
- Der komplette Hero als eine HTML-Datei, die von der Festplatte oder in einem iframe läuft
- Die Engine als ES-Modul sowie eine React- und Next.js-Komponente
- Fünf Farbthemen und eine Abstimmungstabelle für Dichte, Zug und Ringe
- Touch, reduzierte Bewegung, verborgene Tabs und Außerhalb-des-Bildschirms eingebaut
- Optional PopNow-Videofläche oder Produktbild, vorher angeboten
Gut für
- Entwicklerwerkzeuge, KI-Produkte und Launch-Seiten
- Portfolio- und Event-Auftakte, die zum Spielen einladen
- Einen Hintergrundvideo-Loop durch etwas Leichteres ersetzen
Nicht für
- Helle oder pastellfarbene Marken, die einen blassen Hintergrund brauchen
- Sehr ruhige Seiten wie Gesundheits- oder Finanzformulare
- Lange, scroll-gesteuerte Geschichten
So nutzt du ihn
In Claude oder ChatGPT
Nutze den PopNow-Skill „Interaktiver Raster-Hero“ (interactive-grid-hero) dafür: Baue den ersten Bildschirm der Seite meines CLI-Tools: „Deploy-Vorschauen mit einem Befehl“, bernsteinfarbenes Raster, Buttons Installieren und Doku lesen.
In einem Coding-Agent
/popnow-interactive-grid-hero Baue den ersten Bildschirm der Seite meines CLI-Tools: „Deploy-Vorschauen mit einem Befehl“, bernsteinfarbenes Raster, Buttons Installieren und Doku lesen.
Dann probier
Mach das Raster ruhiger und etwas lichter.
Füge unter dem Raster ein sehr dunkles rauchiges Video hinzu und nenn mir vorher die Credits.
Das solltest du bereithalten
- Eine kurze Überschrift, ein oder zwei Sätze und deine Button-Links
- Ein Thema oder deine Markenakzentfarbe
- Optional: Fähigkeiten und Namen, die du in einer Beweiszeile zeigen darfst
Ä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.
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
Braucht es eine Bibliothek oder WebGL?
Nein. Der Effekt ist einfaches JavaScript auf einem 2D-Canvas, etwa 300 Zeilen, ohne Abhängigkeiten. Die Vorlage funktioniert offline und in einem gesandboxten iframe.
Was passiert auf dem Handy?
Ein Tipp sendet einen Ring, ein seitliches Wischen zieht das Raster, während vertikales Wischen weiter scrollt. Bevor jemand es berührt, hält eine langsame Eigenbewegung das Raster in Gang.
Kann ich meine Markenfarbe nutzen?
Ja, als Akzent und Ringfarbe auf einem der dunklen Hintergründe. Der Effekt beruht auf aufleuchtenden blassen Linien, deshalb bleibt der Hintergrund sehr dunkel; Schwarz-Weiß-Marken bekommen das Mono-Thema.
Ist es barrierefrei?
Text, Links und Buttons sind normales HTML über dem Canvas und behalten sichtbare Fokusstile. Bei reduzierter Bewegung ist das Raster ein Standbild, und die Schleife pausiert in verborgenen Tabs und wenn die Seite weggescrollt ist.