Ce que vous obtenez
- Un fichier HTML avec polices et images intégrées, sans aucune requête réseau
- Héros avec inscription par e-mail, aperçu produit avec graphique vivant, choix d’offre, tarifs, FAQ et inscription finale
- Routes fonctionnelles : numéro d’exemple avec mur payant, archive consultable, adhésion avec sièges et cadeaux, connexion, mentions légales, 404
- Un validateur pour les liens, les routes, les libellés, la recette du verre et les restes d’exemple
- En option : visuels, portraits, boucle du héros et carte pour les réseaux PopNow, après devis en crédits
Idéal pour
- Pages d’inscription à une lettre d’information ou à un briefing
- Listes d’attente, bêtas privées et campagnes de lancement
- Abonnements, cours ou événements qui vendent des places
Pas fait pour
- Marques claires, pastel ou colorées : la page est en noir et blanc uniquement
- Boutiques en ligne avec de nombreux produits
- Sites SaaS qui ont besoin d’une longue visite des fonctionnalités
Comment l’utiliser
Dans Claude ou ChatGPT
Utilisez le skill PopNow « Modèle de site glassmorphism » (glassmorphism-website-template) pour ceci : Créez la page d’inscription de Tidewatch, un e-mail du vendredi pour les plaisanciers : un graphique de prévisions, trois notes de port et une longue lecture. Gratuit, plus une formule équipage à 5 $ par mois.
Dans un agent de code
/popnow-glassmorphism-website-template Créez la page d’inscription de Tidewatch, un e-mail du vendredi pour les plaisanciers : un graphique de prévisions, trois notes de port et une longue lecture. Gratuit, plus une formule équipage à 5 $ par mois.
Puis essayez
Chiffrez une image du héros d’une eau sombre de nuit et une boucle de 5 secondes tirée de celle-ci avant de générer quoi que ce soit.
Portez la page dans mon site Astro sous forme de composants et de vraies routes.
À préparer
- Le nom, ce que l’inscription apporte aux gens et la promesse unique du titre
- De 3 à 4 faits que vous pouvez défendre, formules et tarifs, de 4 à 6 réponses de FAQ
- Votre DESIGN.md si la marque en a un
- En option : une clé API PopNow, ou vos propres photos et séquences sombres
Skills similaires
Tout voir →Créateur d’avatar 3D
+3Créez dans votre navigateur un personnage 3D façon peluche et enregistrez-le en PNG transparent ou en page 3D.
Calendrier heatmap d’activité
+3Une année d’activité quotidienne en calendrier de cases colorées, avec séries, totaux et navigation au clavier.
Modèle de landing page SaaS IA
+3Papier sable et filets fins autour d’un tableau kanban où un assistant planifie les tâches.
Section hero animée
+3Un hero de landing page avec un mot de titre qui change en douceur, deux boutons et un large cadre d’image.
Modèle de site d’agence créative à shader
+3Héros shader orange vivant, déclaration en bas, navigation en pilules et grille d’études de cas décalée.
Landing page SaaS sombre
+3Un site marketing sombre et très animé pour un logiciel, livré en un seul fichier HTML autonome.
Site portfolio de designer
+3Six cartes inclinées autour d’un titre qui s’estompe, une carte portrait rouge, des études de cas éditoriales.
Site portfolio de développeur
+3Un site personnel sombre pour développeurs, avec études de cas, articles, conférences, CV et formulaire de contact.
Site SaaS éditorial
+3Héros scindé bleu marine, titre serif sur cinq lignes, photo documentaire, bandeaux inclinés et accent cobalt.
Site web de produit matériel
+3Noms de modèles fins et géants sur studio argenté, cartes de fiches et gamme à l’échelle réelle.
Diagramme d’architecture interactif
+3Un schéma système cliquable et hors ligne, construit à partir d’un modèle JSON vérifié, avec les preuves derrière chaque bloc.
Héros à grille interactive
+3Grille sombre de fins filaments qui se courbe vers le curseur et envoie un anneau à chaque clic.
Explorateur de graphe de connaissances
+3Transformez vos notes de projet en graphe consultable hors ligne, où chaque affirmation renvoie à sa ligne source.
Modèle de tableau de bord KPI
+3Quatre indicateurs avec variations, courbe lumineuse, répartition et objectifs, sur papier chaud.
Landing page à partir de maquettes IA
+3Voyez trois maquettes de page complète, choisissez-en une, et votre agent la code proprement.
Modèle de site web magazine
+3Un site de magazine digne de l’imprimé, avec articles, rubriques, petite boutique et abonnements, en un seul fichier HTML.
Héros à animation de particules
+3Texte sur papier chaud, à côté d’une sphère de points qui change à chaque idée.
Site de marque personnelle
+3Portrait fondu dans du papier chaud sous un fin crochet, affirmations de chaque côté.
Page de lancement produit cinématique
+3Page presque noire façon cinéma : titre serif, scène de nuit encadrée, formulaire de réservation.
Modèle de dashboard admin
+3Une console de back-office fonctionnelle avec graphiques, tableaux, kanban et calendrier, en un seul fichier HTML hors ligne.
Modèle de landing page SaaS
+3Un site marketing clair et apaisé pour un logiciel, avec console produit fonctionnelle, tarifs et inscription.
Site CV portfolio façon scrapbook
+3Un CV en ligne sur plusieurs pages fait d’objets en papier, avec études de cas et CV imprimable.
Modèle de site e-commerce de sneakers
+3Une boutique complète de chaussures ou de vêtements avec catalogue, fiches produit, panier et paiement de démo, en un fichier HTML.
Modèle de page d’automatisation de workflows
+3Page graphite au titre court, avec un graphe de nœuds vivant qui s’exécute et relance les étapes.
Questions
Qu’est-ce qui fait que le verre paraît juste et non comme une boîte floue ?
Chaque surface en relief suit une seule recette : un intérieur à peine teinté avec flou d’arrière-plan, un léger reflet en haut et un liseré dessiné par un anneau en dégradé masqué, pour que la lumière accroche les bords haut et bas. Le validateur fait échouer une page qui s’écarte de la recette.
Le héros peut-il bouger ?
Oui. Une fois l’image du héros validée, PopNow peut l’animer en un clip de 5 secondes, et le script de boucle fourni en fait une boucle sans couture, muette, avec une image de couverture. Le mouvement réduit et les onglets masqués conservent l’image fixe.
Ne sert-il qu’aux lettres d’information ?
Non. L’exemple est un briefing du soir, mais le guide d’adaptation transpose les mêmes sections aux listes d’attente d’applications, aux cours, aux événements et aux podcasts : l’aperçu produit devient l’écran de l’application, et l’archive devient un journal des versions ou une liste de sessions.
Ai-je besoin d’une clé API PopNow ?
Non. La page est livrée avec des visuels neutres et des replis CSS pour chaque emplacement d’image. Une clé ajoute de nouveaux visuels, portraits, la boucle et une carte pour les réseaux, chacun chiffré en crédits avant lancement.