Cosa ottieni
- Un file HTML con font e immagini incorporati, senza richieste di rete
- Hero con iscrizione via email, anteprima del prodotto con un grafico dal vivo, selettore dell’offerta, prezzi, FAQ e iscrizione finale
- Percorsi funzionanti: numero di esempio con paywall, archivio con ricerca, iscrizione con posti e regali, accesso, note legali, 404
- Un validatore per link, percorsi, etichette, ricetta del vetro e testi di esempio rimasti
- Immagini, ritratti, loop dell’hero e card social opzionali da PopNow dopo un preventivo in crediti
Ideale per
- Pagine di iscrizione a newsletter e briefing
- Liste d’attesa, beta private e campagne di lancio
- Abbonamenti, corsi o eventi che vendono posti
Non adatta a
- Brand chiari, pastello o colorati: la pagina è solo bianca e nera
- Negozi online con molti prodotti
- Siti SaaS che hanno bisogno di un lungo tour delle funzioni
Come usarla
In Claude o ChatGPT
Usa la skill PopNow “Template sito glassmorphism” (glassmorphism-website-template) per questo: Fai la pagina di iscrizione per Tidewatch, una email del venerdì per i velisti di barche piccole: un grafico delle previsioni, tre note dai porti e una lettura lunga. Gratis, più un piano equipaggio a 5 $ al mese.
In un agente di programmazione
/popnow-glassmorphism-website-template Fai la pagina di iscrizione per Tidewatch, una email del venerdì per i velisti di barche piccole: un grafico delle previsioni, tre note dai porti e una lettura lunga. Gratis, più un piano equipaggio a 5 $ al mese.
Poi prova
Preventivami un’immagine dell’hero di acqua scura di notte e un loop di 5 secondi ricavato da essa prima di generare qualsiasi cosa.
Porta la pagina nel mio sito Astro come componenti e rotte vere.
Cosa tenere pronto
- Il nome, cosa ottiene chi si iscrive e la promessa unica per il titolo
- Da tre a quattro fatti di cui puoi rispondere, piani e prezzi, da quattro a sei risposte FAQ
- Il tuo DESIGN.md, se il brand ne ha uno
- Facoltativo: una chiave API PopNow o le tue foto e i tuoi video scuri
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.
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
Cosa rende il vetro giusto e non un riquadro sfocato?
Ogni superficie sollevata usa una sola ricetta: un interno appena tinto con sfocatura dello sfondo, un leggero riflesso in alto e un bordo disegnato con un anello a gradiente mascherato, così la luce cattura i bordi superiore e inferiore. Il validatore boccia una pagina che abbandona la ricetta.
L’hero può muoversi?
Sì. Dopo che approvi l’immagine ferma dell’hero, PopNow può animarla in una clip di 5 secondi, e lo script di loop incluso la trasforma in un loop senza giunture, muto, con un poster. Il movimento ridotto e le schede nascoste mantengono l’immagine ferma.
È solo per le newsletter?
No. L’esempio è un briefing serale, ma la guida all’adattamento mappa le stesse sezioni su liste d’attesa per app, corsi, eventi e podcast: l’anteprima del prodotto diventa la schermata dell’app, l’archivio diventa un changelog o un elenco di sessioni.
Mi serve una chiave API PopNow?
No. La pagina include immagini neutre e ripieghi CSS per ogni slot. Una chiave aggiunge nuove immagini, ritratti, il loop e una card social, ciascuno preventivato in crediti prima dell’avvio.