Bien-être · Web immersif · Système de gestion du studio
YogaRooted
Un site fait de papier, d’eau et de lumière, et le système discret qui fait tourner le studio derrière.
- Client
- YogaRooted
- Secteur
- Bien-être · Cours, formations et consultations
- Marché
- Espagne · En ligne
- Rôle
- Direction artistique, design et développement complet
- Période
- 2026
- Périmètre
- Site immersif · Réservation · Formations · Facturation · Rapports
YogaRooted est un studio de yoga et de méditation tenu par une seule enseignante. Le brief demandait quelque chose qui donne l’impression de franchir le seuil d’un temple de pierre à l’aube : épique, magique, plein d’aura, et calme. J’ai assuré la direction artistique et développé ce site en WebGL, et conçu le système de gestion qui réserve, facture et produit les rapports en coulisses.
Les sites de bien-être se ressemblent tous : couchers de soleil, poses de banque d’images, un widget de réservation pastel. Le studio avait besoin de l’inverse : un lieu doté d’une vraie présence, qui rende pourtant impossible de manquer le pratique (horaires, prix, réservation). Et derrière, une enseignante noyée entre cinq outils et un agenda papier.
Une seule matière pour tout : un papier chaud qui peut devenir eau, recevoir la lumière et porter l’or. Chaque salle est une petite pratique ; chaque interaction a une alternative calme.
Le logo prend vie
La marque du studio est une goutte, deux feuilles, un cercle ouvert et deux points. L’ouverture raconte exactement cette histoire en treize secondes : une branche à l’encre et à l’aquarelle, une goutte qui se condense et tombe, un papier qui devient eau, des ondes qui dessinent un Sri Yantra doré, et enfin le mot Enraizar, prendre racine.
Rien ici n’est une vidéo. Chaque image est calculée en temps réel avec Three.js et du GLSL sur mesure : fibre du papier, réfraction, caustiques, diffusion de l’encre.
La même salle à neuf heures du matin et à minuit
Le site lit l’horloge du visiteur. À l’aube la lumière est cuivrée ; à midi, claire ; au crépuscule, dorée. La nuit, le papier vire à l’olive profond, l’encre devient crème et le yantra s’illumine. Les images clés s’interpolent en continu, et le contraste est mesuré pour rester AA à toute heure. Faites glisser sur l’image :
Un temple dessiné trait par trait
Au fil du défilement, un Sri Yantra se construit comme on le dessine à la main : d’abord crayon et compas, cotes et points de construction, puis le lotus et l’enceinte, et enfin la feuille d’or sur l’encre. Chaque étape nomme son terme sanskrit, sa translittération et sa source.
Des salles qui récompensent l’attention
Maintenez le halo et il enseigne la respiration carrée. Approchez une lanterne et des notes cachées apparaissent. Restez immobile quatre secondes et une encre invisible surgit : un Yoga Sutra en devanagari. Faites tourner le ciel nocturne jusqu’à ce que ses étoiles forment un lotus. Et si vous touchez trois nœuds du yantra de Sarasvatī dans le bon ordre, le papier se fend et vous fait entrer dans une méditation guidée.
- Version 2D pour les appareils modestes et les navigateurs sans WebGL
- Une composition complète pour les mouvements réduits
- Fréquence adaptative : 60 i/s pendant l’interaction, 10 i/s au repos
- Chaque interaction accessible au clavier
Réserver en trois étapes
Pratique → jour et heure → coordonnées. Chaque place est dessinée comme un bindu (le point au centre d’un yantra), si bien que « plus que deux » est une information, pas une pression. Les séances en ligne et en présentiel partagent un même agenda ; formations, cartes et consultations passent par le même parcours, et les factures sont générées à partir de la commande.
- 1Trois étapes, annoncées d’emblée
- 2Les places comme des bindus sous chaque jour
- 3Heure locale et capacité en direct, en toutes lettres
Formations, un carnet de terrain et l’app de l’élève
Les formations sont reliées comme des manuscrits, chacune dans un pigment de la palette. Le carnet de terrain se souvient des salles visitées, de vos jours de respiration et de votre prochain cours, et un cadran solaire permet de fixer la lumière. Les élèves ont leur propre espace pour réserver à nouveau en deux gestes.
Le système derrière les écrans
Quatre mots ont guidé chaque décision (épique, magique, aura, calme) et une tension les a tenus ensemble : la grandeur sans le bruit. Tout le site vit sur une seule matière, un papier chaud, qui peut devenir eau, recevoir la lumière et porter l’or.
Couleur
Toutes les couleurs viennent du logo et de la branche à l’aquarelle. La palette varie selon l’heure locale du visiteur : la nuit, le papier devient abîme olive et le texte devient crème, et le contraste est remesuré à chaque image clé.
Typographie
Enraizar
Titrage · titres · citationsUn Garamond à fort contraste avec de vraies italiques : la voix d’un manuscrit.
Hatha lento · 75 min · Quedan 2 plazas
Texte pratique · horaires · réservationNette et moderne, pour que l’information pratique ne soit jamais mystique.
Mūla · raíz
Inscriptions · petites étiquettesDes capitales romaines gravées, utilisées avec parcimonie, comme des inscriptions dans la pierre.
मूल योग यन्त्र
Termes sanskritsToujours accompagnés de leur translittération IAST et de leur sens.
Grille et espacement
- Colonnes
- 12
- Largeur max.
- 1440px
- Gouttière
- 24px
- Unité de base
- 8px
L’espacement progresse selon Fibonacci (8, 13, 21, 34, 55, 89), les proportions mêmes qui servent à construire les yantras, pour que le blanc respire au lieu de s’empiler.
Décisions, et pourquoi
-
01
Le logo est le scénario de l’ouverture
PourquoiUne goutte, deux feuilles, un cercle ouvert et deux points deviennent les treize premières secondes : la marque s’apprend, elle ne se montre pas.
Au lieu de
Une vidéo générique de coucher de soleil en ouverture. -
02
L’or seulement là où la lumière touche
PourquoiLa rareté le garde sacré ; l’excès le transforme en décoration.
Au lieu de
Des bordures dorées sur chaque carte et chaque bouton. -
03
Les places dessinées comme des bindus
PourquoiLa capacité fait partie du langage visuel : une rareté honnête, sans compte à rebours.
Au lieu de
Des badges rouges « Plus que 2 ! ». -
04
La magie ne cache jamais les horaires
Pourquoi« Réserver une pratique » reste dans l’en-tête de chaque salle, en mots simples.
Au lieu de
La réservation enfouie à la fin de l’expérience.
Schéma
- 1Une goutte: se condense sur la feuille et tombe à 4,2 s
- 2Deux feuilles: la branche à l’aquarelle qui ouvre la scène
- 3Un cercle ouvert: l’onde qui change le papier en eau
- 4Deux points: les bindus : l’origine et la destination, le centre du yantra
- Direction artistique et concept visuel
- Site immersif + version 2D
- Parcours de réservation et de paiement
- App de gestion (7 modules)
- Facturation et rapports
- Espace élève
- Abonnements avec renouvellement automatique et pause.
- Des listes d’attente qui remplissent seules les places libérées.
- Une version anglaise pour les participants internationaux des retraites.
