Co dostajesz
- Kompletny pierwszy ekran jako jeden plik HTML: nagłówek, hero, znaczniki kroków i pasek
- Typowany blok React i Tailwind z komponentem pola cząsteczek do ponownego użycia
- Silnik cząsteczek bez bibliotek z formacjami: kula, pierścień, fala, helisa i obraz
- Tokeny jasne i ciemne na ciepły papier oraz sprawdzacz kolorów spoza palety
- Opcjonalnie: sylwetka produktu z PopNow dla cząsteczek, wyceniona przed uruchomieniem
Sprawdzi się przy
- Strony lądowania SaaS, aplikacji i narzędzi
- Premiery, które da się opowiedzieć w trzech krótkich pomysłach
- Zastąpienie statycznego obrazu hero delikatnym ruchem
Nie nadaje się do
- Ciemne, energetyczne marki
- Długie opowieści sterowane przewijaniem
- Strony już prowadzone przez duże zdjęcie albo wideo
Jak z niej korzystać
W Claude lub ChatGPT
Użyj umiejętności PopNow „Hero z animacją cząsteczek” (particle-animation-hero) do tego: Dodaj hero do mojej strony Next.js dla aplikacji do śledzenia nawyków: „Małe kroki, robione codziennie”, pomysły Śledź, Układaj, Świętuj.
W agencie do programowania
/popnow-particle-animation-hero Dodaj hero do mojej strony Next.js dla aplikacji do śledzenia nawyków: „Małe kroki, robione codziennie”, pomysły Śledź, Układaj, Świętuj.
Potem spróbuj
Spraw, żeby trzeci pomysł układał nasze logo liścia z public/leaf.png.
Daj mi też zwykłą wersję HTML na stronę listy oczekujących.
Co przygotować
- Nagłówek, jedno albo dwa zdania i dwa linki
- Trzy krótkie pomysły z jednozdaniowym podpisem każdy
- Opcjonalnie: przezroczysty PNG znaku albo produktu, albo klucz API PopNow
Podobne umiejętności
Zobacz wszystkie →Kreator awatarów 3D
+3Zbuduj w przeglądarce uroczą pluszową postać 3D i zapisz ją jako przezroczysty PNG albo stronę 3D.
Heatmapa kalendarzowa
+3Rok codziennej aktywności jako cieniowana siatka kalendarza, z seriami, sumami i obsługą klawiatury.
Strona lądowania SaaS AI
+3Ciepły piaszczysty papier i żywa tablica kanban, na której asystent planuje zadania i przesuwa karty.
Animowana sekcja hero
+3Sekcja hero dla landing page z płynnie zmieniającym się słowem w nagłówku, dwoma przyciskami i szeroką ramką na obraz.
Strona agencji kreatywnej z shaderem
+3Żywy pomarańczowy shader w hero, przyklejone hasło, zaokrąglone menu i siatka case studies.
Ciemny landing page SaaS
+3Ciemna strona marketingowa produktu software z bogatą animacją, dostarczana jako jeden samodzielny plik HTML.
Strona portfolio projektanta
+3Sześć przechylonych kart wokół blednącego nagłówka, jedna czerwona karta portretu, redakcyjne case studies.
Strona portfolio programisty
+3Ciemna strona osobista dla inżynierów z case studies, artykułami, wystąpieniami, CV i formularzem kontaktowym.
Redakcyjna strona SaaS
+3Granatowe dzielone hero, szeryfowy nagłówek obok zdjęcia dokumentalnego, skośne pasma i kobaltowy akcent.
Szablon strony glassmorphism
+3Matowe szklane pigułki na prawie czarnym tle, ogromny szeryfowy nagłówek i zapis e-mail.
Strona produktu sprzętowego
+3Ogromne cienkie nazwy modeli na srebrnych zdjęciach, matowe karty specyfikacji i linia produktów w skali.
Interaktywny diagram architektury
+3Klikalny diagram systemu offline, zbudowany ze sprawdzonego modelu JSON, z dowodami do każdego bloku.
Interaktywne hero z siatką
+3Ciemna siatka cienkich nici, która zagina się ku kursorowi i puszcza świecący pierścień z każdego kliknięcia.
Interaktywny graf wiedzy
+3Zamień notatki z projektu w przeszukiwalny graf offline, w którym każde twierdzenie prowadzi do wiersza źródła.
Szablon pulpitu KPI
+3Cztery kafle KPI ze znacznikami zmian nad wykresem liniowym, tabelą podziału i słupkami celów.
Strona lądowania z makiet AI
+3Najpierw zobacz trzy projekty pełnej strony, wybierz jeden, a agent zbuduje go jako czysty kod.
Szablon strony magazynu
+3Strona magazynu w jakości druku z artykułami, tematami, małym sklepem i prenumeratą, jako jeden plik HTML.
Strona marki osobistej
+3Portret wtopiony w ciepły papier pod cienkim nawiasem, z mocnymi hasłami po obu stronach.
Filmowa strona premiery produktu
+3Prawie czarna strona w świetle filmowym: szeryfowa karta tytułowa, nocna scena i formularz rezerwacji.
Szablon panelu administracyjnego
+3Działająca konsola zaplecza z wykresami, tabelami, tablicą kanban i kalendarzem, jako jeden plik HTML offline.
Szablon landing page SaaS
+3Spokojna, jasna strona marketingowa produktu software z działającą konsolą produktu, cennikiem i rejestracją.
Strona CV i portfolio w stylu scrapbooka
+3Wielostronicowe CV online z papierowych przedmiotów, z case studies i życiorysem do druku.
Szablon sklepu ze sneakersami
+3Kompletny sklep z obuwiem lub odzieżą: katalog, strony produktów, koszyk i demonstracyjna kasa w jednym pliku HTML.
Strona lądowania automatyzacji przepływów
+3Grafitowa strona, mały nagłówek i żywy graf węzłów, który działa, ponawia i strumieniuje logi.
Pytania
Czy jest ciężkie?
Nie. To jedna kanwa 2D i kilkaset linii zwykłego JavaScriptu, bez WebGL i bibliotek animacji. Liczba kropek zależy od rozmiaru ekranu, a pętla zatrzymuje się w ukrytych kartach i gdy hero przewija się poza ekran.
Czy cząsteczki mogą ułożyć moje logo?
Tak, jeśli je posiadasz. Podaj przezroczysty PNG wyraźnego, prostego kształtu, a silnik pobierze z niego punkty. PopNow może też wygenerować czystą sylwetkę produktu, gdy zobaczysz cenę.
Jak odwiedzający nią sterują?
Trzy znaczniki kroków pod przyciskami przekształcają kropki, kliknięciem albo strzałkami na klawiaturze. Zanim ktokolwiek wybierze, pole samo przechodzi dalej co kilka sekund.
Czy respektuje zredukowany ruch?
Tak. Przy włączonym zredukowanym ruchu kropki stoją w miejscu, kroki zmieniają się bez animacji, nic nie przechodzi samo do przodu, a pasek przestaje się przesuwać.