Ce que vous obtenez
- Le héros complet en un seul fichier HTML, qui tourne depuis le disque ou dans une iframe
- Le moteur en module ES, plus un composant React et Next.js
- Cinq thèmes de couleur et un tableau de réglages pour la densité, l’attraction et les anneaux
- Gestion intégrée du tactile, du mouvement réduit, des onglets masqués et des éléments hors écran
- En option : vidéo ou image produit PopNow, chiffrée avant lancement
Idéal pour
- Outils pour développeurs, produits IA et pages de lancement
- Ouvertures de portfolios et d’événements qui invitent à jouer
- Remplacer une vidéo de fond en boucle par quelque chose de plus léger
Pas fait pour
- Marques claires ou pastel qui ont besoin d’un fond pâle
- Pages très calmes comme les formulaires santé ou finance
- Longs récits animés au défilement
Comment l’utiliser
Dans Claude ou ChatGPT
Utilisez le skill PopNow « Héros à grille interactive » (interactive-grid-hero) pour ceci : Créez le premier écran du site de mon outil en ligne de commande : « Des aperçus de déploiement en une commande », grille ambre, boutons Installer et Lire la documentation.
Dans un agent de code
/popnow-interactive-grid-hero Créez le premier écran du site de mon outil en ligne de commande : « Des aperçus de déploiement en une commande », grille ambre, boutons Installer et Lire la documentation.
Puis essayez
Rendez la grille plus calme et un peu plus clairsemée.
Ajoutez une vidéo de fumée très sombre sous la grille et donnez-moi d’abord les crédits.
À préparer
- Un titre court, une ou deux phrases et vos liens de boutons
- Un thème ou la couleur d’accent de votre marque
- En option : des indices de capacités et des noms que vous pouvez montrer dans une rangée de preuves
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.
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
A-t-il besoin d’une bibliothèque ou de WebGL ?
Non. L’effet est du JavaScript simple sur un canevas 2D, environ 300 lignes, sans dépendance. Le modèle fonctionne hors ligne et dans une iframe isolée.
Que se passe-t-il sur téléphone ?
Un toucher envoie un anneau et un glissement latéral tire la grille, tandis que les balayages verticaux font toujours défiler la page. Avant tout contact, une dérive lente au repos garde la grille en mouvement.
Puis-je utiliser la couleur de ma marque ?
Oui, comme couleur d’accent et d’anneau sur l’un des fonds sombres. L’effet repose sur l’éclaircissement de lignes ténues, si bien que le fond reste très sombre ; les marques noir et blanc reçoivent le thème monochrome.
Est-il accessible ?
Le texte, les liens et les boutons sont du HTML normal au-dessus du canevas, avec des styles de focus conservés. Avec le mouvement réduit activé, la grille devient une image fixe, et la boucle se met en pause dans les onglets masqués et hors écran.