Ce que vous obtenez
- Un premier écran complet en un seul fichier HTML : en-tête, héros, pastilles d’étape et bandeau
- Un bloc React et Tailwind typé, avec un composant de champ de particules réutilisable
- Un moteur de particules sans bibliothèque, avec formations en sphère, anneau, vague, hélice et image
- Jetons clair et sombre sur papier chaud, plus un contrôle des couleurs hors palette
- En option : silhouette de produit PopNow pour les particules, chiffrée avant lancement
Idéal pour
- Pages d’accueil de SaaS, d’applications et d’outils
- Lancements qui tiennent en trois idées courtes
- Remplacer une image fixe par un mouvement doux
Pas fait pour
- Marques sombres et très énergiques
- Récits longs animés au défilement
- Pages déjà portées par une grande photo ou vidéo
Comment l’utiliser
Dans Claude ou ChatGPT
Utilisez le skill PopNow « Héros à animation de particules » (particle-animation-hero) pour ceci : Ajoutez un héros à mon site Next.js pour une application de suivi d’habitudes : « De petits pas, tenus chaque jour », idées Suivre, Empiler, Célébrer.
Dans un agent de code
/popnow-particle-animation-hero Ajoutez un héros à mon site Next.js pour une application de suivi d’habitudes : « De petits pas, tenus chaque jour », idées Suivre, Empiler, Célébrer.
Puis essayez
Faites que la troisième idée forme notre logo en feuille à partir de public/leaf.png.
Donnez-moi aussi la version HTML simple pour la page de liste d’attente.
À préparer
- Un titre, une ou deux phrases et deux liens
- Trois courtes idées avec une légende d’une ligne chacune
- En option : un PNG transparent de votre marque ou produit, ou une clé API PopNow
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.
Modèle de site glassmorphism
+3Verre dépoli sur fond noir, grand titre serif à un mot en italique, et inscription par e-mail.
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.
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
Est-ce lourd ?
Non. C’est un seul canevas 2D et quelques centaines de lignes de JavaScript simple, sans WebGL ni bibliothèque d’animation. Le nombre de points suit la taille de l’écran, et la boucle s’arrête dans les onglets masqués et quand le héros sort de l’écran.
Les particules peuvent-elles former mon logo ?
Oui, si vous en êtes propriétaire. Fournissez un PNG transparent d’une forme simple et marquée, et le moteur l’échantillonne en points. PopNow peut aussi générer une silhouette propre de votre produit, une fois le prix vu.
Comment les visiteurs la contrôlent-ils ?
Trois pastilles d’étape sous les boutons transforment les points, au clic ou avec les flèches du clavier. Tant que personne ne choisit, le champ avance tout seul toutes les quelques secondes.
Respecte-t-elle le mouvement réduit ?
Oui. Avec le mouvement réduit activé, les points restent immobiles, les étapes changent sans transition, rien n’avance automatiquement et le bandeau cesse de défiler.