Cosa ottieni
- Una prima schermata completa in un unico file HTML: intestazione, hero, chip dei passi e marquee
- Un blocco React e Tailwind tipizzato con un componente riutilizzabile per il campo di particelle
- Un motore di particelle senza librerie con formazioni a sfera, anello, onda, elica e immagine
- Token chiari e scuri in carta calda più un controllo dei colori fuori palette
- Silhouette del prodotto opzionale da PopNow per le particelle, preventivata prima
Ideale per
- Landing page di SaaS, app e strumenti
- Lanci che si possono raccontare con tre brevi idee
- Sostituire un’immagine hero statica con un movimento delicato
Non adatta a
- Brand scuri e ad alta energia
- Storie lunghe guidate dallo scorrimento
- Pagine già guidate da una grande foto o da un video
Come usarla
In Claude o ChatGPT
Usa la skill PopNow “Hero con animazione di particelle” (particle-animation-hero) per questo: Aggiungi un hero al mio sito Next.js per un tracker delle abitudini: 'Piccoli passi, ogni giorno', idee Traccia, Accumula, Festeggia.
In un agente di programmazione
/popnow-particle-animation-hero Aggiungi un hero al mio sito Next.js per un tracker delle abitudini: 'Piccoli passi, ogni giorno', idee Traccia, Accumula, Festeggia.
Poi prova
Fai che la terza idea formi il nostro logo a foglia da public/leaf.png.
Dammi anche la versione HTML semplice per la pagina della lista d’attesa.
Cosa tenere pronto
- Un titolo, una o due frasi e due link
- Tre brevi idee con una didascalia di una riga ciascuna
- Facoltativo: un PNG trasparente del tuo marchio o del prodotto, oppure una chiave API PopNow
Skill simili
Vedi tutte →Creatore di avatar 3D
+3Crea nel browser un personaggio 3D tenero come un peluche e salvalo come PNG trasparente o pagina 3D.
Calendario heatmap
+3Un anno di attività quotidiana come griglia di calendario sfumata, con serie, totali e accesso da tastiera.
Landing page SaaS per l’AI
+3Carta sabbia calda, binari sottili e tratteggi attorno a una kanban dal vivo dove un assistente pianifica.
Sezione hero animata
+3Una hero per landing page con una parola del titolo che ruota con delicatezza, due pulsanti e un riquadro immagine largo.
Sito per agenzia creativa con hero shader
+3Hero shader WebGL dal vivo dietro un’affermazione in basso, navigazione a pillola e griglia di casi di studio.
Landing page SaaS scura
+3Un sito di marketing scuro e ricco di animazioni per un prodotto software, consegnato come un unico file HTML autonomo.
Sito portfolio per designer
+3Sei card inclinate attorno a un titolo sfumato su grigio calmo, una card ritratto rossa e casi di studio.
Sito portfolio per sviluppatori
+3Un sito personale scuro per ingegneri, con case study, articoli, talk, curriculum e modulo di contatto.
Sito SaaS editoriale
+3Hero diviso blu notte, titolo serif accanto a una foto documentaria, fasce inclinate e un accento cobalto.
Template sito glassmorphism
+3Pillole di vetro su fondo quasi nero, titolo serif enorme con una parola in corsivo e iscrizione via email.
Sito di prodotti hardware
+3Nomi dei modelli enormi e sottili su scatti da studio argentati, card di specifiche e una gamma in scala.
Diagramma di architettura interattivo
+3Un diagramma di sistema cliccabile e offline, costruito da un modello JSON verificato, con le evidenze dietro ogni riquadro.
Hero con griglia interattiva
+3Una griglia scura di fili sottili che si piega verso il cursore e fa partire un anello luminoso a ogni clic.
Esploratore di knowledge graph
+3Trasforma gli appunti di progetto in un grafo offline e ricercabile, dove ogni affermazione rimanda alla sua riga di origine.
Template dashboard KPI
+3Quattro KPI con variazioni, un grafico a linee, una tabella di dettaglio e barre obiettivo.
Landing page da mockup AI
+3Vedi prima tre progetti a pagina intera, scegline uno: il tuo agente lo costruisce come codice pulito.
Template sito web per rivista
+3Un sito di rivista con qualità da stampa, articoli, temi, un piccolo shop e abbonamenti, in un unico file HTML.
Sito personal brand
+3Un ritratto sfumato su carta calda sotto una sottile parentesi, con affermazioni leggere e grassetto ai lati.
Pagina di lancio cinematografica di prodotto
+3Pagina quasi nera in stile film: titolo serif su luci in movimento, scena notturna, modulo di prenotazione.
Template dashboard di amministrazione
+3Una console di back office funzionante con grafici, tabelle, kanban e calendario, in un unico file HTML offline.
Template landing page SaaS
+3Un sito di marketing chiaro e sobrio per un prodotto software, con console di prodotto funzionante, prezzi e iscrizione.
Sito portfolio in stile scrapbook
+3Un CV online su più pagine fatto di oggetti di carta, con case study e un curriculum stampabile.
Template sito e-commerce di sneaker
+3Un negozio completo di scarpe o abbigliamento con catalogo, pagine prodotto, carrello e checkout demo in un unico file HTML.
Landing page per automazione di workflow
+3Pagina in grafite con titolo piccolo a sinistra e sotto un grafo di nodi dal vivo che esegue e riprova.
Domande
È pesante?
No. È un unico canvas 2D e qualche centinaio di righe di JavaScript semplice, senza WebGL né librerie di animazione. Il numero di punti segue la dimensione dello schermo, e il loop si ferma nelle schede nascoste e quando l’hero esce dalla vista.
Le particelle possono formare il mio logo?
Sì, se è tuo. Fornisci un PNG trasparente di una forma semplice e marcata, e il motore la campiona in punti. PopNow può anche generare una silhouette pulita del tuo prodotto, dopo che hai visto il prezzo.
Come controllano i visitatori l’animazione?
Tre chip di passo sotto i pulsanti trasformano i punti, con clic o con i tasti freccia. Prima che qualcuno scelga, il campo avanza da solo ogni pochi secondi.
Rispetta il movimento ridotto?
Sì. Con il movimento ridotto attivo, i punti restano fermi, i passi cambiano senza transizione, nulla avanza da solo e la marquee smette di scorrere.