Patterns UI de jeux vidéo pour le web

50%

L’inspiration gaming

Les jeux vidéo excellent dans l’art de guider l’attention et de récompenser la progression. On peut transposer ça au web :

Barres de progression (XP)

Chaque note a un score d’XP qui représente sa maturité. La barre de progression donne un feedback visuel immédiat.

Badges et niveaux

Les stades de croissance fonctionnent comme un système de leveling :

Graine = Level 1
Pousse = Level 2
Croissance = Level 3
Persistant = Level MAX

HUD (Head-Up Display)

Le tableau de bord en haut de la page d’accueil s’inspire des HUD de jeux avec des stats en temps réel.

Ces patterns sont appliqués dans Tordu Jardin avec les composants Totem. La philosophie rejoint celle du jardinage numérique.

Exemples concrets sur ce site

La barre d’XP (`.xp-bar`)

Chaque note affiche une barre de progression horizontale. Le remplissage est proportionnel au score XP (0-100) :

<div class="xp-bar">
  <div class="xp-bar__fill" style="width: 65%"></div>
  <span class="xp-bar__label">65 XP</span>
</div>

La largeur du fill est calculée dynamiquement depuis le frontmatter. La couleur passe du orange (bas XP) au vert acidulé (haut XP) via un gradient.

Le badge de croissance (`.growth-badge`)

Les quatre stades sont représentés par des badges colorés :

<span class="growth-badge growth-badge--seed">Graine</span>
<span class="growth-badge growth-badge--sprout">Pousse</span>
<span class="growth-badge growth-badge--growing">Croissance</span>
<span class="growth-badge growth-badge--evergreen">Persistant</span>

Chaque modificateur BEM applique une couleur et une icône différente, créant un langage visuel immédiat.

Effet glow au survol

Le hover sur les cartes du jardin déclenche un glow néon inspiré des menus de sélection de jeux :

.garden-card {
  transition:
    box-shadow 0.3s ease,
    transform 0.2s ease;
  border: 1px solid rgba(173, 255, 47, 0.1);
}

.garden-card:hover {
  box-shadow:
    0 0 20px rgba(173, 255, 47, 0.3),
    0 0 40px rgba(173, 255, 47, 0.1);
  transform: translateY(-2px);
  border-color: rgba(173, 255, 47, 0.4);
}

Ce double glow (20px net + 40px diffus) crée un halo lumineux qui rappelle la sélection d’un objet dans un inventaire de RPG.

Pourquoi le game UI fonctionne pour un portfolio tech

Le game UI n’est pas juste esthétique - il résout des problèmes concrets :

Engagement : les barres de progression et les niveaux déclenchent les mêmes mécanismes de récompense que les jeux. Le visiteur a envie d’explorer “juste une note de plus”.
Progression visible : un recruteur voit immédiatement le niveau de maturité d’un sujet sans lire le contenu. XP 95 = expertise, XP 15 = en exploration.
Différenciation : dans un océan de portfolios minimalistes en noir et blanc, un HUD vert néon se démarque en 3 secondes.
Métaphore cohérente : le jardin numérique EST un jeu de gestion - on plante, on arrose, on récolte. Le vocabulaire gaming renforce cette métaphore.

À explorer

Animations de transition entre les pages
Sons subtils au survol (optionnel)
Système d’achievements pour la contribution
Minimap de navigation entre notes liées