Cosa ottieni
- Un componente hero React guidato da props, con un esempio d’uso
- La stessa hero in un unico file HTML, senza build
- Token per tema chiaro e scuro, sfondo a griglia e regole di animazione
- Una grafica disegnata di riserva, così la hero sembra finita anche senza immagine
- Immagine hero opzionale da PopNow, con preventivo prima dell’avvio
Ideale per
- Landing page di SaaS, app e servizi
- Sostituire una prima schermata piatta e statica
- Pagine di lista d’attesa e di lancio con un’unica azione chiara
Non adatta a
- Costruire un intero sito con molte sezioni
- Storytelling guidato dallo scroll o animazioni pesanti
- Palette basate su blu o viola saturi senza cambiare tema
Come usarla
In Claude o ChatGPT
Usa la skill PopNow “Sezione hero animata” (animated-hero-section) per questo: Aggiungi una hero alla mia landing page Next.js: «Pianifica viaggi che sembrano facili / rilassati / condivisi», con i pulsanti Inizia a pianificare e Guarda gli esempi.
In un agente di programmazione
/popnow-animated-hero-section Aggiungi una hero alla mia landing page Next.js: «Pianifica viaggi che sembrano facili / rilassati / condivisi», con i pulsanti Inizia a pianificare e Guarda gli esempi.
Poi prova
Genera una foto larga per il riquadro: un tavolo al sole con mappe e caffè. Dimmi prima i crediti.
Dammi anche la versione HTML semplice per il mio sito statico.
Cosa tenere pronto
- Una frase d’apertura e 3-5 parole brevi che ruotano
- Testo, etichette dei pulsanti e link
- Opzionale: il tuo screenshot o una foto di 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.
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.
Hero con animazione di particelle
+3Testo su carta calda accanto a una sfera di punti inchiostro e verde acqua che cambia forma per ogni idea.
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
Mi serve React?
No. La skill sceglie il componente React se il tuo progetto usa React e Tailwind, e il file HTML semplice se non c’è una build. Gli altri framework ricevono un porting dello stesso markup e della stessa animazione.
L’animazione è accessibile?
La parola scorre con una breve transizione, si mette in pausa nelle schede nascoste e si ferma del tutto se il visitatore preferisce il movimento ridotto. Gli screen reader leggono il titolo completo una sola volta invece di una parola che cambia.
E se non ho un’immagine per la hero?
Una tavola disegnata nei colori del tema riempie il riquadro, così la sezione sembra comunque completa. Puoi aggiungere più tardi un tuo screenshot o generare un’immagine con PopNow.
PopNow creerà uno screenshot della mia app?
No. Per il software la skill chiede uno screenshot reale. PopNow si usa per foto di ambientazione, scatti di prodotto su uno sfondo coordinato o tavole astratte.