Abyss est une page d'accueil prête à la conversion, conçue pour les studios indépendants, les campagnes Kickstarter RPG et les sites compagnons Steam. Déposez-la, modifiez le contenu, et vous avez une page promotionnelle digne d'une bande-annonce sans toucher à un bundler.
Contenu inclus
- 9 sections entièrement conçues : barre de navigation fixe avec menu hamburger, héros plein écran avec canvas de particules animées + filigrane surdimensionné, barre de compteur 5 statistiques avec animation à la vue, section d'histoire en deux colonnes avec superposition « lire la bande-annonce », grille de 6 cartes de fonctionnalités de jeu, galerie de captures d'écran à défilement horizontal, grille de 4 héros avec lueurs élémentales, bannière de bande-annonce cinématographique avec superposition de lignes de balayage, appel à l'action avec traitement de prix à 49,99 €, et pied de page minimaliste de marque.
- Palette fantastique sombre — noir encre profond (
#04040a), signature cramoisie (#e8193c), accents dorés (#f5a623), et accents bleu électrique. Chaque couleur est une propriété CSS personnalisée ; personnalisez tout le site à partir de trois variables. - Système de trois polices — Orbitron (affichage), Rajdhani (interface/boutons), Inter (corps). Chargées en une seule demande préconnectée depuis Google Fonts ; remplacez par vos propres polices web en modifiant une seule ligne.
- Héros à particules en direct — 80 braises cramoisies et dorées à la dérive sur un canvas HTML, respectant les préférences de mouvement réduit. Léger : ~30 lignes de JavaScript vanilla, aucune bibliothèque.
- Compteurs déclenchés au défilement — la barre de statistiques s'anime de zéro à la cible dès qu'elle entre dans la fenêtre d'affichage. Fluide, économique, aucune bibliothèque de graphiques.
- Animations de révélation IntersectionObserver sur chaque bloc majeur — opacité + translation GPU-friendly, zéro distorsion de mise en page.
- Responsive jusqu'à 375 px, avec trois points d'arrêt réfléchis (1024, 900, 640). Navigation hamburger pour téléphones, grille d'histoire empilée pour tablettes, grille de fonctionnalités repliée pour petits écrans.
- Modal de bande-annonce avec fermeture à l'échappement et fermeture au clic extérieur. Déposez un
<iframe>YouTube pour livrer.
Pourquoi ça vend
Chaque jeu de fantaisie sombre sur Kickstarter, Steam Next Fest ou Indiegogo a besoin d'une page promotionnelle qui ressemble à une bande-annonce arrêtée. Abyss atteint cette note d'emblée — contraste élevé, accents cramoisies néon, typographie de qualité gaming — et se livre en un seul fichier que votre responsable marketing peut modifier sans développeur.
Détails techniques
- Fichier HTML unique, environ 1 030 lignes, ~55 KB décompressé
- Zéro étape de construction, zéro frameworks, zéro dépendances d'exécution (polices préconnectées depuis Google Fonts)
- JavaScript vanilla uniquement pour : arrière-plan de nav déclenché au défilement, hamburger, modal, observateur de révélation, animation de compteur, boucle canvas de particules
- Entièrement sémantique —
nav,section,footer, hiérarchieh1/h2appropriée, pictogrammes descriptifs sans alt via emoji pour maquette rapide - Sûr sur tous les navigateurs modernes — testé sur Chrome, Safari, Firefox, Edge
Pour qui c'est
Studios de jeux indépendants préparant une page de lancement, créateurs Kickstarter livrant un RPG, agences construisant un microsite promotionnel pour un client dans l'espace gaming, et développeurs amateurs qui veulent une page « bientôt disponible » soignée qui surpasse les modèles Unity.
Personnalisation en moins d'une heure
- Remplacez les trois variables de couleur dans le bloc
:root— personnalisez chaque carte, bouton, bordure et lueur. - Remplacez les pictogrammes emoji par votre propre art PNG/SVG (ils sont autonomes, pas de cartes de sprites).
- Changez les cibles de statistiques via
data-targetsur les chiffres de la barre de statistiques. - Déposez votre iframe de bande-annonce YouTube à l'intérieur de la modal pour remplacer la carte d'espace réservé.
- Remplacez les six piliers de jeu, quatre personnages et cinq tuiles de galerie — chacun vit dans des blocs clairement commentés.
Ce que vous obtenez
- Démo HTML chiffrée en direct — prévisualisez la page complète dans la visionneuse de marché avant d'acheter
- Source HTML complète non minifiée à l'achat
- 12 mois de mises à jour mineures (corrections de bugs, ajustements de compatibilité des navigateurs)
- Support par e-mail dans les 48 heures
Le texte de démonstration est un espace réservé pour un RPG fantastique sombre fictif nommé ABYSS. Chaque ligne — nom du jeu, chiffres de statistiques, descriptions de personnages, prix — est modifiable à partir du même fichier. Traitez-le comme un échafaudage pour votre propre lancement.