Mode nuit étoilée

Horiot Studio · version texte

Du processus manuel à l’outil fiable.

  1. anchor

    À propos

    Studio indépendant fondé en 2026, une relation directe pour transformer un besoin réel en produit fiable.

    Horiot Studio est un studio digital indépendant, fondé en 2026. Une seule personne cadre, conçoit et développe, du premier échange à la mise en service.

    Le studio

    Je construis des produits sur mesure quand un outil standard ne couvre pas le travail réel : outils métiers, portails, automatisations, intégrations, tableaux de bord, mais aussi e-commerce, configurateurs et expériences de lancement.

    Le point de départ reste le même : comprendre le processus avant de choisir la solution. Un premier périmètre volontairement réduit permet de livrer quelque chose d’utile, puis l’usage décide de la suite.

    La structure reste légère : une relation directe, pas d’intermédiaires. Selon les projets, je m’entoure d’expertises complémentaires pour mobiliser les bonnes compétences sans installer une équipe autour du besoin.

    L’intelligence artificielle intervient comme levier de production ou comme composant d’un outil quand elle apporte un résultat contrôlable. Elle ne remplace ni le cadrage, ni le design, ni la responsabilité sur ce qui est livré.

    Le parcours

    Développeur et designer depuis plus de 10 ans, j’ai travaillé sur des dizaines de projets digitaux, dont plusieurs années chez Murdeau où j’ai couvert le développement et le design. J’ai lancé Horiot Studio en 2026 pour porter cette approche en indépendant, tout en continuant à accompagner Murdeau comme partenaire externe.

    Ailleurs

    Le parcours détaillé est sur LinkedIn, le code ouvert sur GitHub. Pour un projet, écris-moi directement.

  2. anchor

    Approche

    Comprendre le travail réel, choisir un périmètre clair, puis construire jusqu'à la mise en service.

    Partir du processus

    Un projet ne commence pas par une technologie ou une liste de fonctionnalités. Il commence par le travail réel : qui fait quoi, avec quels outils, où l’information se perd et ce qui doit changer une fois le produit en service.

    Pour un outil opérationnel, un audit court permet de séparer ce qu’il faut automatiser, ce qui mérite un logiciel sur mesure et ce qu’il vaut mieux laisser tranquille.

    Comment ça se passe

    01 · Tu m’écris. Un email direct avec le problème, la contrainte de temps et le budget, même flou.

    02 · On cadre. Un appel pour aligner objectifs, usages et périmètre. Je reformule jusqu’à ce qu’on soit d’accord sur le problème, avant la moindre ligne de code.

    03 · Tu reçois une proposition dans un espace privé. Le cadrage, le plan et le prix sont au même endroit, avec un espace de retours par section. Pour un projet frontend, plusieurs directions de design ; pour un système plus large, souvent une démo. On décide sur du concret. Cet espace est un outil que je construis et maintiens : Proposals, avec une démo ouverte (code d’accès atelier).

    04 · J’implémente jusqu’au live. Le produit, son interface et sa copie sont ajustés jusqu’à la mise en service.

    Ce que je développe

    Systèmes opérationnels. Outils métiers, portails, automatisations, intégrations, tableaux de bord et assistants IA, pour les PME et les équipes qui ont dépassé leurs tableurs et leurs chaînes manuelles.

    E-commerce sur mesure. Shopify et au-delà : sections, modules, configurateurs et intégrations qui s’insèrent dans une boutique existante.

    Expériences & lancements. Landings éditoriales, scrollytelling et pages de marque qui portent un moment fort.

    L’IA intervient dans la production et, lorsque le besoin le justifie, dans le produit. Elle reste un moyen évalué comme les autres, jamais le point de départ.

  3. anchor

    Services

    Du processus manuel à l'outil fiable, pour les PME et les équipes opérationnelles en France et en Suisse romande.

    Un tableur devenu critique, des données ressaisies entre plusieurs outils, un reporting reconstruit chaque semaine : ce sont rarement de gros problèmes informatiques. Ce sont des processus utiles qui ont grandi sans l’outil adapté.

    Je conçois des logiciels sur mesure pour ces zones de friction, aux côtés des projets e-commerce et des expériences de marque du studio. L’objectif n’est pas de remplacer tout ton système, mais de construire la pièce qui manque, à la bonne échelle.

    Trois points d’entrée

    Outils métiers & portails. Une application pour faire vivre un processus au même endroit, ou un espace privé où clients et équipes retrouvent commandes, documents et étapes à suivre.

    Automatisation & intégrations. Les ressaisies, relances et transferts entre CRM, ERP, e-commerce, facturation et messagerie deviennent une chaîne visible et fiable.

    Tableaux de bord & assistants IA. Les bonnes données réunies sur un écran, et l’IA réservée aux tâches où elle apporte une aide mesurable, avec une validation humaine quand l’erreur coûte cher.

    Commencer par un audit

    L’audit de workflow dure 30 minutes et ne coûte rien. Tu décris le processus, les outils en place et l’endroit où ça bloque. Je t’envoie ensuite une synthèse d’une page : quoi automatiser, quoi construire et quoi laisser tranquille.

    Si un premier périmètre se dégage, il tient dans une proposition à prix fixe, avec un livrable et une échéance. La plupart de ces premiers périmètres peuvent être mis en service en 2 à 6 semaines.

    Demander un audit de workflow

  4. anchor

    Clients

    Projets réalisés en collaboration avec des marques et entreprises, avec aussi quelques chantiers déjà en perspective.

    Une sélection de projets réalisés pour des clients, du cadrage à la livraison.

    Chaque projet est traité avec le même niveau d’exigence, peu importe la taille de l’engagement : un module sur mesure en deux semaines et une plateforme complète sur plusieurs mois reçoivent la même attention au détail.

    Trois relations, trois formes de projet

    Murdeau, fabricant breton d’un système breveté de récupération d’eau de pluie modulaire. Plusieurs années chez eux comme développeur et designer avant le studio, et une collaboration qui continue aujourd’hui comme partenaire externe : un e-commerce complet et un configurateur 3D à trois modes, tunnel Stripe, devis pré-remplis et back-office métier.

    BA111OD, marque horlogère indépendante. Trois chantiers en parallèle : un outil de vente interne utilisé chaque jour par l’équipe commerciale, un ensemble de sections Shopify sur mesure, et une expérience de lancement pour la Chapter 4 · Tourbillon T.V.D.

    L’atelier des choix, cabinet de coaching et de mentoring à Neuchâtel. Un site éditorial d’une page, pensé comme un manifeste et entièrement pilotable par la cliente.

    Des clients en France et en Suisse, des projets qui vont de l’outil métier à la page de marque, et à chaque fois la même façon de travailler : un cadrage précis, une proposition en ligne, puis l’implémentation jusqu’au live.

    Et ensuite

    Aux côtés des projets déjà livrés, quelques refontes et extensions sont aussi en train de se dessiner pour les mois à venir. Le prochain chantier envisagé côté Murdeau, par exemple : une webapp en réalité augmentée pour placer une configuration à l’échelle dans son propre jardin.

  5. anchor

    Atelier

    Projets personnels et expérimentations.

    L’atelier est l’espace où je construis pour moi : des outils que j’utilise au quotidien, des expérimentations techniques, des idées qui n’ont pas encore trouvé leur place ailleurs. C’est aussi là que je teste des approches avant de les proposer aux clients. Ce qui fonctionne finit par remonter dans le travail client.

    Ce qu’il y a dedans

    Proposals. Le portail privé où mes prospects reçoivent leur proposition : versionnée, commentable, avec le devis à l’écran et en PDF depuis la même source. Construit pour mon usage, devenu l’étape 03 de ma façon de travailler. Démo publique, code d’accès « atelier ».

    Démos. Cinq configurateurs génériques à essayer sans compte, un par métier : carport et pergola, portail et clôture, cave à vin enterrée, escalier sur mesure, piscine conteneur. 3D et plan technique, prix en direct, demande de devis simulée. Ce que je mets entre les mains des fabricants avant le premier appel, plutôt que de le décrire.

    Vault Tools. Plus de quarante outils de traitement de fichiers qui tournent entièrement dans le navigateur grâce à WebAssembly. Aucun fichier ne quitte la machine.

    Jeux. Cold Star, un incrémental sci-fi en Rust et WebAssembly, et Orbit Hop, un jeu à un seul tap. Les moins raisonnables de la liste.

    Pourquoi le montrer

    Un portfolio client montre ce qu’on a livré. L’atelier montre ce qu’on sait faire quand personne ne cadre le brief : les choix techniques, le niveau de finition, ce qu’on maintient dans la durée sans y être obligé.

  6. anchor

    Contact

    Un problème à résoudre ou un produit en tête ? Décris-le brièvement, je reviens vers toi sous 24h.

    Un problème à résoudre ou un produit en tête ? Décris-le brièvement et je reviens vers toi sous 24 heures.

    Écrire à antoine@horiot.studio.

    Pas de formulaire de contact, un email direct est plus honnête. Mentionne dans ton message :

    • le problème que tu essaies de résoudre
    • la contrainte de temps, si elle existe
    • le budget approximatif, même très flou

    Je réponds à tout le monde, même pour dire non. Les réponses arrivent généralement sous 24 heures ouvrées.

    Ce qui se passe ensuite

    Un appel pour cadrer les objectifs, les usages et le périmètre. Je reformule jusqu’à ce qu’on soit d’accord sur le problème, avant la moindre ligne de code. Puis une proposition dans un espace privé, avec le cadrage, le plan, le prix et les retours au même endroit. Le déroulé complet est décrit dans l’approche.

    Pour quel genre de projet

    Le studio construit des outils métiers, portails, automatisations et tableaux de bord, de l’e-commerce sur mesure et des expériences de lancement. Les projets clients montrent à quoi ces formats ressemblent une fois en service.

    Si ton sujet concerne un processus manuel ou des outils qui ne se parlent pas, la branche Services propose un audit de workflow gratuit de 30 minutes, suivi d’une synthèse d’une page.

    Le studio est basé à Quimper, en Bretagne, avec des clients en France et en Suisse.

  7. service

    Outils métiers & portails

    Une application adaptée au travail réel de l'équipe, ou un espace privé qui rend clients et collaborateurs autonomes.

    Le signal est souvent banal : un tableur que seule une personne comprend, des commandes suivies dans une boîte mail, des documents éparpillés entre plusieurs dossiers. Le processus fonctionne, mais il repose sur de la mémoire, des ressaisies et la bonne version du bon fichier.

    Je transforme ce fonctionnement réel en outil métier : gestion de commandes, génération de devis, planification, suivi de stock ou back-office. Les droits d’accès, l’historique et les validations sont intégrés au processus plutôt qu’ajoutés après coup.

    Un portail applique la même logique à l’extérieur. Le client retrouve ses commandes, ses documents ou son avancement sans demander une mise à jour par email. Côté équipe, un espace de formation peut structurer l’accueil et rendre la progression visible.

    Partir de l’usage

    On ne commence pas par une liste de fonctionnalités. On suit une tâche de bout en bout : qui intervient, quelles informations circulent, où elles se perdent et quelle décision doit rester humaine. Le premier périmètre couvre le chemin le plus utile, à prix fixe, puis l’usage réel décide de la suite.

    L’app commerciale BA111OD réunit catalogue, partenaires, commandes, PDF et agenda dans un seul écran de travail. Le back-office Murdeau relie configuration, devis, commandes et inventaire. Deux contextes différents, un même principe : l’outil épouse le processus au lieu de lui imposer ses cases.

    Demander un audit de workflow

  8. service

    Automatisation & intégrations

    Des outils qui échangent leurs données sans ressaisie, avec des automatisations observables plutôt qu'une nouvelle boîte noire.

    Copier une commande vers la facturation, reformater un export, relancer un fournisseur, puis mettre le CRM à jour. Prise séparément, chaque tâche paraît petite. Répétée chaque jour, la chaîne consomme du temps et multiplie les occasions d’erreur.

    J’automatise ces passages entre les outils déjà en place : CRM, ERP, e-commerce, comptabilité, stockage documentaire ou messagerie. Une donnée est saisie une fois, contrôlée, puis transmise là où elle doit arriver. Il n’est pas nécessaire de remplacer un système qui fonctionne pour corriger ce qui se passe entre ses composants.

    Une chaîne que l’on peut comprendre

    Une automatisation métier doit être observable. Elle garde une trace de ce qui a tourné, signale ce qui a échoué et permet de reprendre sans créer de doublon. Le code et la documentation rendent la chaîne reprenable, au lieu de laisser derrière elle un empilement de scénarios que personne n’ose modifier.

    Parfois, un SaaS ou une automatisation no-code suffit. Le sur-mesure devient pertinent quand le processus est critique, que les règles sont propres à l’entreprise ou que le volume rend les contournements fragiles. L’audit sert aussi à dire quand il vaut mieux ne rien construire.

    Sur la plateforme Murdeau, configurateur, checkout, devis et back-office forment une seule continuité. Dans l’app commerciale BA111OD, l’import Shopify et la production de PDF suppriment plusieurs passages manuels tout en préservant l’historique.

    Demander un audit de workflow

  9. service

    Tableaux de bord & assistants IA

    Des chiffres réunis pour décider, et des assistants IA limités aux tâches où leur aide peut être contrôlée et mesurée.

    Un rapport assemblé chaque lundi est déjà ancien quand il arrive en réunion. Un savoir enfermé dans quelques têtes ou dans une pile de PDF ralentit chaque réponse. Dans les deux cas, l’information existe, mais elle n’est pas disponible au bon moment et sous la bonne forme.

    Un tableau de bord réunit les sources utiles, puis répond à des questions précises : activité commerciale, charge, stock, marge ou avancement. L’objectif n’est pas d’empiler les graphiques, mais de créer une source de vérité lisible, mise à jour sans reconstruction manuelle. Les statistiques de l’app commerciale BA111OD, par période et par partenaire, suivent cette logique.

    L’IA à sa juste place

    Un assistant IA peut retrouver une procédure, préparer un brouillon, trier une demande ou résumer un dossier. Il devient utile quand il est branché sur les bonnes données, limité à une tâche claire et évalué dans le temps. Là où une erreur coûte cher, une personne valide avant toute action.

    Je ne propose pas l’IA par défaut. Une recherche classique, une règle métier ou une automatisation déterministe sont souvent plus fiables et moins coûteuses. Le choix vient du risque, du volume et du résultat à obtenir, pas de l’effet d’annonce.

    Le premier périmètre peut être un écran de pilotage ou un assistant sur un corpus limité. Il est cadré à prix fixe et, dans la plupart des cas, mis en service en 2 à 6 semaines. L’usage permet ensuite de mesurer ce qui aide réellement avant d’étendre le système.

    Demander un audit de workflow

  10. project

    Murdeau

    Fabricant breton d'un système breveté de récupération d'eau de pluie modulaire. Collaboration longue durée sur leur e-commerce et configurateur 3D, avec de nouveaux chantiers déjà envisagés.

    Murdeau

    Murdeau fabrique en Bretagne, depuis 2009, un système breveté de récupération d’eau de pluie « modulaire & intelligent », des réservoirs aériens empilables, sans terrassement, durables et recyclables. « Pas de terrassement, pas de bitume à enlever », pour reprendre la phrase du site lui-même.

    C’est un produit industriel structurellement complexe : trois modules de base, une modularité sans limite, des configurations qui dépendent de la surface de toiture, du volume d’eau visé, et de l’espace disponible chez le client. Les outils e-commerce généralistes sont inadaptés dès qu’on essaie d’exprimer « plusieurs configurations avec des géométries différentes » pour le même besoin.

    La collaboration

    J’ai travaillé plusieurs années chez Murdeau, en tant que développeur et designer, avant de lancer Horiot Studio. Je continue aujourd’hui à travailler pour eux comme partenaire externe, une relation de confiance construite sur la durée, avec une connaissance profonde du produit et de ses contraintes techniques.

    Prochain chantier envisagé : une webapp en réalité augmentée pour placer une configuration à l’échelle dans son propre jardin, et rendre l’encombrement réel du système tangible avant l’achat.

  11. project· maintenu

    Murdeau · E-commerce & Configurateur 3D

    Site e-commerce complet et configurateur 3D à trois modes pour le système breveté de récupération d'eau de pluie modulaire : tunnel Stripe, devis pré-remplis et back-office métier (inventaire, commandes, distributeurs).

    Contexte

    Le site Murdeau existant ne tenait plus, ni la vitrine, ni la mécanique commerciale derrière. Un produit structurellement complexe (trois modules, une modularité sans limite, trois façons d’arriver à une configuration), et une équipe qui gérait l’inventaire, les commandes et le réseau de distributeurs à coups de tableurs et d’emails.

    Le projet remplace le site par une plateforme complète : vitrine, configurateur 3D propriétaire, tunnel e-commerce Stripe et back-office métier, sur www.murdeau.bzh.

    Le configurateur : trois portes d’entrée

    Le cœur du projet. Le configurateur ne part pas d’un catalogue à feuilleter, il part du problème du client. Par besoin : surface de toiture, pluviométrie, usages, et une « capacité recommandée avec justification ». Par volume cible : plusieurs géométries pour l’atteindre. Par contrainte d’espace : les solutions viables classées par capacité, et si rien ne rentre, il le dit.

    Écran d'accueil du configurateur Murdeau, choix entre les trois modes d'entrée
    L'entrée du configurateur, trois portes selon la question que se pose le visiteur.

    Les trois modes convergent vers un builder 3D qui rend la configuration, calcule le prix, liste modules et accessoires, puis bascule vers le panier ou vers un devis pré-rempli selon la complexité du projet.

    Sous le capot, le moteur encode les règles physiques du produit : socle 100 L obligatoire en pied de colonne, 1 600 L et 3,90 m maximum par colonne, toutes les colonnes à la même hauteur parce que l’eau s’équilibre entre modules connectés. Il explore les dispositions en grille, note chaque candidat, et déduit de la géométrie le nombre de kits de jonction nécessaires.

    Vue builder 3D du configurateur, configuration en cours avec liste des modules et prix
    Le builder, point de convergence des trois modes, où la configuration prend forme.

    Du configurateur à l’opération

    Pour les configurations standards, un checkout Stripe complet : paiement, facture, accusé de commande, date de livraison estimée. Pour les projets atypiques, un devis structuré, déjà pré-rempli avec la configuration retenue : la conversation commerciale reprend là où le configurateur s’est arrêté.

    Côté Murdeau, un back-office unifié remplace les tableurs : inventaire par module avec alertes de seuil, commandes Stripe et devis signés dans une vue unique, distributeurs géolocalisés pour router chaque prospect vers le plus proche, et un tableau de bord d’activité. Le configurateur attire et qualifie, l’e-commerce encaisse, le back-office opère.

    Back-office Murdeau, vue d'ensemble des commandes, de l'inventaire et des indicateurs d'activité
    Le back-office, point unique de pilotage des stocks, des commandes et du réseau de distributeurs.

    Le même principe, en version générique et ouverte à l’essai, est devenu le configurateur carport & pergola de l’atelier.

    www.murdeau.bzh →

  12. project

    BA111OD

    Marque horlogère indépendante. Collaboration longue durée autour d'un outil interne, d'une expérience de lancement et d'un ensemble Shopify sur mesure.

    BA111OD est une marque horlogère indépendante fondée sur un positionnement fort : des montres mécaniques taillées pour une génération qui refuse les codes classiques de la haute horlogerie.

    Collaboration longue durée, plusieurs chantiers en parallèle, à la fois sur l’interne (un outil de vente utilisé chaque jour par l’équipe commerciale) et l’externe (Shopify, modules éditoriaux, landing de lancement produit).

    Trois chantiers

    L’app commerciale. Une PWA interne sur invitation, posée sur Next.js 15 et Cloudflare Workers, qui remplace un flux Excel, email et PDF à la main par un seul écran de travail : catalogue, partenaires aux tarifs différenciés par pays, commandes, confirmations PDF brandées, agenda des salons, statistiques. Trois rôles appliqués côté serveur (admin, sales, PR). Le MVP est utilisé quotidiennement par l’équipe, et les ajouts suivants sont venus de l’usage réel plutôt que du cahier des charges initial.

    L’ensemble Shopify. Pas une section isolée mais un système de briques sur mesure qui vivent dans l’éditeur du thème : une page produit plus éditoriale, nourrie par les metafields, des modules frontend (badges de réassurance, footer de marque) et une section hotspots pour ancrer des points interactifs sur une image éditoriale de la montre.

    Le lancement de la Chapter 4 · Tourbillon T.V.D.. Une page de révélation au scroll, en chapitres, sobre et premium, intégrée à l’écosystème de la marque pour être publiée et exploitée par l’équipe. En ligne sur ba111od.com.

    Ce que ça dit de la collaboration

    Un outil métier, une boutique et une expérience de lancement, pour la même marque : c’est le genre de relation où l’on connaît le produit assez bien pour proposer avant qu’on demande, et où chaque chantier profite de ce que le précédent a appris.

  13. project· maintenu

    BA111OD · App commerciale

    PWA interne sur invitation pour l'équipe BA111OD (catalogue, partenaires, commandes, PDF brandés, agenda salon et statistiques). Posée sur Next.js 15 et Cloudflare Workers.

    Contexte

    BA111OD Sales est une Progressive Web App interne sur invitation, utilisée chaque jour par l’équipe pour préparer les commandes des détaillants, piloter l’agenda des salons et suivre l’activité. Équipe restreinte, desktop-first, interface en anglais.

    Le point de départ : un catalogue complexe, des partenaires aux tarifs différenciés par pays, et des confirmations de commande produites à la main dans un flux Excel + email + PDF. Aucun outil du marché ne rentrait dans les contraintes sans compromis sur la personnalisation ou le coût.

    Un seul écran de travail

    Trois rôles appliqués côté serveur sur chaque route (admin, sales, et un rôle PR limité à l’agenda), pas d’inscription libre, aucune page commerciale exposée publiquement.

    Le catalogue s’importe depuis un export CSV Shopify : prévisualisation, erreurs et warnings, puis synchronisation. Les SKUs absents sont désactivés, jamais supprimés, et les commandes passées restent intactes. Les fiches affichent le prix payable en CHF et le prix retail selon le pays du partenaire, avec recherche par SKU ou nom et filtres par chapitre.

    Catalogue de l'app BA111OD Sales, recherche par SKU ou nom, filtres par chapitre, sélecteur de devise, cartes produit avec prix CHF et bouton Add to Order
    Le catalogue, point d'entrée quotidien : chapitres filtrables, devise commutable, ajout à la commande en un clic.

    Une commande peut être amorcée avant qu’un partenaire soit attribué, complétée plus tard, réouverte à tout moment. Elle sort en PDF brandé BA111OD, partageable directement depuis l’app.

    Ce que l’usage a ajouté

    Le PRD cadrait le MVP. Depuis, l’usage réel de l’équipe a fait émerger un second cercle, livré itérativement : un agenda salon en vue semaine (créneaux reprogrammables au drag-drop, statuts confirmé / à confirmer / no-show, couleurs par type de rendez-vous), des statistiques d’activité par période et par partenaire, et un onglet feedback avec changelog intégré et fil de notes partagé.

    Agenda salon de l'app BA111OD Sales, vue semaine du calendrier avec bascule PR Agenda / Retailer Agenda, navigation par semaine et bouton New Event
    L'agenda salon en vue semaine : bascule entre PR et retailer, créneaux modifiables au drag-drop, jour courant mis en valeur.

    Les ajouts post-PRD viennent de l’usage, ce qui est, honnêtement, le meilleur indicateur qu’on a shippé la bonne première version.

    Architecture

    Next.js 15 (App Router) en TypeScript, déployé sur Cloudflare Workers via OpenNext, Postgres managé pour les données, stockage objet pour les PDF. Les autorisations s’appliquent au plus près des données, pas seulement dans le code applicatif. Une revue de sécurité interne (code, déploiement, auth, dépendances) fait partie du cycle de livraison.

  14. project· livré

    BA111OD · Shopify

    Ensemble des sections Shopify sur mesure développées pour BA111OD, de la page produit aux modules éditoriaux réutilisables.

    Contexte

    Chez BA111OD, le travail Shopify ne se limite pas à une seule section. Il s’agit d’un ensemble de briques sur mesure pensées pour faire évoluer l’expérience de marque directement dans le thème : page produit, modules éditoriaux, zones interactives.

    Ce qui a été développé

    Un socle Shopify plus cohérent. L’objectif était de sortir des blocs standards pour construire un langage plus aligné avec la marque, plus précis dans le rythme, et plus souple côté édition.

    Des sections pensées pour durer. Chaque module est conçu pour vivre dans l’éditeur Shopify, être réutilisé, déplacé et ajusté sans repartir de zéro.

    Une logique produit + contenu. Le travail ne porte pas seulement sur la fiche produit : il relie aussi les éléments éditoriaux autour de la montre, pour que l’expérience reste homogène d’une page à l’autre.

    Sous-projets Shopify

    • Product section : refonte de la section produit principale, avec galerie, lecture des variantes et contenu enrichi
    • Frontend sections : modules éditoriaux complémentaires pour prolonger l’identité BA111OD dans le thème
    • Hotspots : section interactive permettant d’ancrer des points d’intérêt directement sur une image

    Résultat

    Un ensemble Shopify plus mature, plus éditorial, et surtout plus cohérent, où les différentes sections peuvent fonctionner comme un vrai système plutôt que comme des blocs isolés.

  15. project· livré

    BA111OD · Section produit

    Section produit Shopify sur mesure pour BA111OD, une mise en page plus éditoriale, enrichie par les données produit et les metafields.

    Contexte

    La page produit demandait plus qu’un template e-commerce classique. Il fallait mieux présenter la montre, mieux hiérarchiser les informations, et donner à la lecture un rythme plus fidèle à l’univers BA111OD.

    Ce qui a été construit

    Une section produit repensée comme une vraie expérience. La composition articule galerie, panneau produit, variantes, contenu de marque et appels à l’action dans un ensemble plus maîtrisé.

    Une lecture enrichie par les données produit. La section va chercher automatiquement le titre, les images, le prix, les variantes et plusieurs informations issues des metafields pour nourrir la page sans ressaisie.

    Un contenu plus vivant. Spécifications en accordéons, produits liés, disponibilité, options de paiement, vidéo, description et barre CTA mobile : tout est pensé pour garder une page dense mais lisible.

    Ce que ça change

    La page produit n’est plus une simple fiche. Elle devient un espace qui vend mieux la montre, tout en restant administrable depuis Shopify.

  16. project· livré

    BA111OD · Sections frontend

    Petites sections Shopify sur mesure pour BA111OD, badges de réassurance et footer de marque pensés pour prolonger l'identité visuelle du site.

    Contexte

    Toutes les sections n’ont pas besoin d’être spectaculaires pour être utiles. Certaines ont un rôle plus discret : rassurer, signer, structurer une page, et prolonger l’identité de marque sans bruit.

    Ce qui a été construit

    Une barre de badges configurable. Un module léger pour faire remonter des messages de confiance, expédition, garantie, Swiss Made, retours, avec contrôle des couleurs, du texte et des espacements.

    Plein écran ↗
    Code HTML / CSS extrait tel quel de la section Shopify en production. Bascule Desktop / Mobile pour voir le comportement responsive.

    Un footer de marque éditorial. Une section minimale, centrée sur le nom BA111OD, encadrée par des lignes décoratives pour fermer une page avec plus de tenue visuelle.

    Plein écran ↗
    Code HTML / CSS extrait tel quel de la section Shopify en production. Bascule Desktop / Mobile pour voir le comportement responsive.

    Des briques simples à réutiliser. Ces modules sont faits pour s’insérer facilement dans le thème, être ajustés depuis l’éditeur, et renforcer la cohérence générale sans alourdir les pages.

    Résultat

    Des sections frontend discrètes mais utiles, qui donnent plus de soin et de continuité à l’expérience BA111OD dans Shopify.

  17. project· livré

    BA111OD · Chapter 4 · Tourbillon T.V.D.

    Expérience de lancement en ligne pour la Chapter 4 · Tourbillon T.V.D. de BA111OD, une page immersive pensée pour révéler la montre, rythmer la découverte et porter l'annonce avec justesse.

    Contexte

    Pour le lancement de la Chapter 4 · Tourbillon T.V.D., l’objectif n’était pas seulement de publier une page produit. Il fallait créer une montée en tension, faire entrer la montre progressivement dans le champ, et donner à l’ensemble une présence plus éditoriale que promotionnelle.

    Ce qui a été développé

    Une expérience de révélation. La page accompagne la découverte au fil du scroll, avec un rythme plus proche d’un chapitre que d’un catalogue. On avance par séquences : matière, détails, calibre, caractère.

    Une page pensée pour la marque. L’ensemble reste sobre, premium et lisible. L’animation soutient le regard au lieu de le distraire, pour laisser la montre et son univers visuel prendre toute la place.

    Un format réellement activable. Le projet a été intégré dans l’écosystème BA111OD pour pouvoir vivre comme une vraie page de lancement, publiable et exploitable par l’équipe.

    Ce qui a été construit

    • Une narration en chapitres au scroll pensée comme une révélation progressive, pour installer la montre avec plus de présence et de tension.
    • Des panneaux éditoriaux plein écran composés pour faire alterner image, respiration et messages clés dans un registre plus premium.
    • Une expérience de lancement pleinement intégrée à l’univers de la marque, aujourd’hui en ligne comme une page signature BA111OD.

    En ligne

    Voir la page live →

    Résultat

    Une landing de lancement désormais en ligne, conçue pour donner plus de présence à la Chapter 4 et transformer la découverte du modèle en expérience de marque.

  18. project· livré

    BA111OD · Hotspots

    Section Shopify sur mesure permettant de mettre en avant des produits clés via des zones interactives cliquables sur une image éditoriale.

    Contexte

    Une section Shopify sur mesure pour mettre en valeur des produits clés dans la boutique BA111OD. L’équipe marketing place des hotspots cliquables directement sur une image éditoriale de la montre ; chaque hotspot ouvre un tooltip avec un titre, une description et une image optionnelle.

    La démo

    La section telle qu’elle tourne en production, intégrée ici avec son vrai HTML, CSS et JS, extraits tels quels du thème Shopify.

    Plein écran ↗
    Code HTML / CSS / JS extrait tel quel de la section Shopify en production. Clique un hotspot pour ouvrir l'info. Bascule Desktop / Mobile pour voir le comportement responsive.

    Essaie :

    • Clique un + → le tooltip s’ouvre, le bouton pivote vers ×
    • Clique à nouveau, Esc, ou le bouton de fermeture → ça referme
    • Bascule Desktop / Mobile : sur mobile, les tooltips passent en bottom sheet plein écran

    Comment c’est fait

    Le schema de la section expose l’image de fond (desktop et mobile), la hauteur, la couleur d’accent, la couleur des icônes, et des blocs hotspot avec position en % (desktop et override mobile), titre, description et image de tooltip.

    Le rendu utilise des custom properties CSS injectées par Liquid. Le JavaScript est vanilla, ~240 lignes, zéro librairie : event delegation, IntersectionObserver pour l’animation d’entrée staggerée, positionnement du tooltip qui préfère le dessous et bascule au-dessus s’il manque de place. Sous 600 px, même composant, même API, mais le tooltip devient une bottom sheet avec overlay sombre, géré en CSS et une poignée de branches JS.

    Accessibilité : aria-expanded / aria-controls sur les paires bouton / tooltip, fermeture par Esc, retour de focus à la fermeture, prefers-reduced-motion désactive l’animation.

    Résultat

    Une section activable depuis l’éditeur de thème, sans impact sur les performances du site. L’équipe marketing crée une page éditoriale, ajoute des hotspots, édite positions et contenus, sans intervention technique.

  19. project

    L'atelier des choix

    Cabinet de coaching et de mentoring pour adolescents et jeunes adultes, fondé par Daniela Leone à Neuchâtel. Site éditorial sur mesure, confié à la cliente.

    L’atelier des choix est un cabinet d’accompagnement fondé par Daniela Leone à Neuchâtel. Coaching et mentoring pour adolescents et jeunes adultes, autour d’une même question : « trouver sa place, ses réponses, son élan ».

    Un positionnement humain et éditorial, à l’opposé du registre corporate. Le projet : traduire cette voix dans un site à la fois sobre et incarné, que Daniela puisse faire vivre seule dans le temps.

    Le site

    Un manifeste d’une page, en ligne sur atelier-des-choix.ch. L’enjeu n’était pas la quantité de pages mais le ton : un texte qui se lit comme une conversation posée, découpé en une dizaine de chapitres qui s’enchaînent. Les deux approches (coaching et mentoring), les étapes d’un accompagnement, les bénéfices, un « pour qui », une présentation de Daniela, une section pour les parents, le contact.

    Le design assume le registre éditorial, titres en Instrument Serif, italiques colorées, larges respirations, une palette douce tirée de l’univers du cabinet. Une énergie « magazine » plutôt que « site de prestation ».

    Un site qui lui appartient

    Chaque texte, chaque portrait et même les quatre couleurs de la palette sont éditables depuis une interface d’administration, sans toucher au code, avec un cycle brouillon, aperçu, publication et un guide en français. Astro pour le rendu, un CMS sur le edge Cloudflare pour le contenu. Daniela fait évoluer le site seule, c’était la condition du projet.

  20. project· livré

    L'atelier des choix · Site éditorial

    Site éditorial d'une page pour le cabinet de coaching de Daniela Leone, pensé comme un manifeste. Astro et un CMS sur le edge Cloudflare, entièrement pilotable par la cliente.

    En ligne sur atelier-des-choix.ch.

    Contexte

    Daniela Leone accompagne des adolescents et de jeunes adultes à Neuchâtel. Son métier est fait d’écoute et de nuance, et son site devait l’être aussi : ni plaquette corporate, ni page de vente agressive, mais un texte qui se lit comme une conversation posée.

    L’enjeu n’était pas la quantité de pages, c’était le ton. Une seule page, pensée comme un manifeste, qui déroule qui elle est, pour qui elle travaille, et comment se passe un accompagnement.

    Le site, un manifeste d’une page

    Tout vit sur une page unique, composée d’une dizaine de chapitres qui s’enchaînent : un hero éditorial, les deux approches (coaching et mentoring), les étapes d’un accompagnement, les bénéfices, un « pour qui », une présentation de Daniela, une section pour les parents, et le contact.

    Le design assume le registre éditorial : titres en Instrument Serif, italiques colorées, larges respirations, une palette douce (crème, gris profond, vert sauge, rose) tirée de l’univers du cabinet. L’objectif visuel, une énergie « magazine » plutôt que « site de prestation ».

    Autonomie éditoriale

    Chaque texte, chaque portrait, et même les quatre couleurs de la palette sont éditables par Daniela depuis une interface d’administration, sans toucher au code. Le contenu passe par un cycle brouillon, aperçu, publication, et un guide en français l’accompagne pas à pas. Le site lui appartient vraiment, elle le fait évoluer seule.

    Stack

    • Astro : rendu serveur du site, composition par chapitres
    • EmDash : CMS, tout le contenu visible vient de l’admin
    • Cloudflare Workers : runtime edge, avec D1 (base) et R2 (médias)

    Résultat

    Un site qui ressemble à son métier : sobre, incarné, sans bruit. Une page unique qui pose une voix, et une cliente autonome pour la faire vivre dans le temps.

    Voir le site →

  21. essay

    FAQ · Premier appel

    Les questions à se poser avant un premier appel, et mes réponses telles que je les donnerais de vive voix.

    Les questions que tu te poses probablement avant un premier appel, et mes réponses telles que je te les donnerais de vive voix. Si tu envisages de travailler avec moi, autant qu’on parte du même endroit.

    Combien de temps avant ta première réponse ?

    Sous 24 heures ouvrées, en général plus vite. Si je suis en deep work sur un projet client, parfois 48. Je réponds toujours, même pour dire non.

    Tu travailles avec combien de clients en parallèle ?

    Je me limite à deux clients actifs en même temps, parfois un troisième en démarrage ou en maintenance légère. Au-delà, la qualité de l’attention baisse vite, et je préfère décaler un démarrage que travailler à moitié.

    Et si je ne sais pas encore exactement ce que je veux ?

    Parfait. Le premier appel sert souvent à reformuler le problème. Beaucoup de clients arrivent avec une solution (« il me faut une appli ») et repartent avec une question (« c’est vraiment ce dont j’ai besoin ? »). C’est la partie la plus utile du travail, et elle est gratuite.

    Comment on sait qu’un projet est « fini » ?

    On le définit ensemble au début, pas à la fin. Chaque engagement commence par un document court qui liste ce qui doit tourner en production pour qu’on dise « livré ». Pas d’ambiguïté, pas de dérive infinie. Si le périmètre évolue en cours de route (ça arrive), on rediscute, mais explicitement, pas en tirant la couverture.

    Qu’est-ce qui se passe si on n’est pas d’accord sur une décision ?

    On en discute jusqu’à ce qu’on comprenne d’où vient le désaccord. Neuf fois sur dix, ça révèle une contrainte qu’on n’avait pas clarifiée. Si on reste en désaccord après ça, tu décides, c’est ton produit. Mais si je pense que tu fais une erreur, je te le dirai.

    Tu gardes les droits sur le code ?

    Non. Tout ce que j’écris pour toi t’appartient : dépôt, base de données, secrets, comptes cloud, documentation. Je garde le droit de mentionner le projet dans mon portfolio (comme ici), sauf accord de confidentialité explicite.

    Tu factures comment, à l’heure, au forfait, au projet ?

    Au projet quand le cadrage est clair, ce qui est le cas la plupart du temps. En retainer mensuel pour les collaborations longue durée où le travail est continu mais les contours varient. J’évite la facturation à l’heure : elle crée de mauvaises incitations des deux côtés (pour moi à étirer, pour toi à micro-optimiser).

    C’est quoi un « bon » client pour toi ?

    Quelqu’un qui sait ce qu’il veut faire, pas forcément comment le faire. Qui peut prendre une décision sans convoquer un comité. Qui est prêt à entendre « non » ou « attends » quand c’est la bonne réponse. Qui comprend qu’un bon produit vient d’une conversation, pas d’un cahier des charges de quarante pages.

    Qu’est-ce que tu évites de faire ?

    Les projets longs sans livrables intermédiaires. Les engagements où je ne peux pas parler directement à la personne qui décide. Le développement « à la demande » facturé à l’heure sans cadrage.

    Et si je change d’avis en cours de route ?

    Ça arrive sur presque tous les projets. On rediscute, on reprioritise, on déplace du scope. Si le changement est majeur, on signe un avenant. C’est normal de changer d’avis. Ce qui l’est moins, c’est de le découvrir en production.

    Qu’est-ce qui se passe si tu disparais pendant deux semaines ?

    Si je prends des vacances, tu le sais longtemps à l’avance. Si une urgence personnelle arrive, je te préviens vite et on ajuste. Tu as toujours un accès direct au dépôt, aux comptes, à l’infrastructure, tu n’es jamais dépendant de moi pour accéder à ton propre produit.

    Tu peux signer un NDA ?

    Oui, tant qu’il est raisonnable. Je préfère les NDA courts et précis à ceux de douze pages. Je ne peux pas signer un NDA qui interdirait de mentionner l’existence du projet après livraison, mais je peux accepter de taire les détails, le nom, les chiffres, les captures.

    Quand le sur-mesure est-il préférable à un SaaS ou au no-code ?

    Quand le processus est important pour ton activité, que ses règles sont vraiment spécifiques, ou que les contournements deviennent plus coûteux que l’outil. Parfois un SaaS suffit. L’audit de workflow sert aussi à le dire avant de construire quoi que ce soit.

    L’IA est-elle assez fiable pour un usage métier ?

    Pour certaines tâches : retrouver, classer, résumer ou préparer un brouillon. Le périmètre doit être clair, la qualité mesurée, et une personne garde la validation lorsque l’erreur coûte cher. Souvent, une automatisation déterministe est un meilleur choix.

    Combien coûte un premier outil ?

    Cela dépend du périmètre, des intégrations et du risque opérationnel. Après l’audit, je propose un prix fixe associé à un livrable et une échéance précis. Tu connais donc le coût avant de t’engager, sans taux horaire ni fourchette artificielle.

    À quelle vitesse peut-on livrer ?

    Un premier périmètre utile prend généralement 2 à 6 semaines. Une plateforme plus large avance par périmètres successifs plutôt que par un long tunnel avant la première mise en service.


    Une question manque ? Écris-moi directement à antoine@horiot.studio, si elle revient souvent, elle finira ici.

  22. essay

    Colophon

    L'outillage IA réel derrière le studio. Quels modèles, comment je les pilote, là où l'IA agit et là où je ne la laisse pas seule. La version vérifiable de « l'IA comme levier ».

    La page Approche affirme que l’IA est un levier concret. Voici de quoi le vérifier : l’outillage réel, sans arrondi marketing.

    Les modèles

    Tous les modèles de pointe d’Anthropic et d’OpenAI, selon la tâche, plus des expérimentations avec des modèles ouverts comme Qwen. Pas d’attachement à un modèle en particulier : celui qui fait le mieux le travail du moment.

    Comment je les pilote

    En terminal, là où le travail se fait vraiment : Claude Code, Codex, et le harness Pi. Pas de copier-coller dans une fenêtre de chat. Des agents qui lisent le code, exécutent, et rendent compte.

    L’outillage

    Des skills et des serveurs MCP sur mesure, officiels ou maison. Jamais de skills tiers récupérés sur le web : question de sécurité, pour ne pas exposer un projet client à une injection de prompt. Ce qui tourne ici, je l’ai écrit ou audité.

    Là où l’IA agit

    Brainstorming, recherche, implémentation. Elle accélère l’exploration et écrit du code sous supervision.

    Là où je ne la laisse pas seule

    La validation, le design final, les décisions qui engagent. Et je la challenge : je pousse pour aller plus loin, pas pour livrer plus vite à moindre exigence. L’IA propose, je tranche.


    Ce site : SvelteKit, Cloudflare, D3-force.

  23. project· maintenu

    Proposals · La proposition commerciale comme produit

    Le portail privé où mes prospects reçoivent leur proposition, versionnée, commentable, avec devis à l'écran et en PDF générés depuis la même source. Démo publique, passphrase « atelier ».

    Démo ouverte à tous : proposals.horiot.studio/demo, code d’accès atelier.

    Contexte

    Une proposition commerciale classique, c’est un PDF en pièce jointe. Il meurt dans une boîte mail : les retours éclatés dans un fil d’emails, les versions qui se confondent (proposition_v3_final_OK.pdf), le prix séparé du cadrage.

    Ce système prend le contre-pied. Chaque prospect reçoit une URL et une passphrase, par des canaux séparés, et retrouve dans un espace privé le cadrage, le plan, le prix et parfois une démo, au même endroit. C’est l’étape 03 de mon approche, et un produit à part entière.

    Essaie-le

    Une proposition de démonstration est ouverte, pour une maison de céramique fictive, Maison Verel : proposals.horiot.studio/demo, code d’accès atelier. Tu y verras la gate, le contenu, les retours ancrés et le devis, exactement comme un prospect. La soumission des retours y est désactivée côté serveur ; l’interface reste entière.

    Ce qu’il fait

    Privé, réellement. Tant que l’accès n’est pas déverrouillé, le contenu n’est jamais sérialisé dans la réponse. Ce n’est pas un overlay sur une page déjà chargée : le serveur ne livre rien, et chaque endpoint sensible refait sa propre vérification.

    Des retours au bon endroit. Le prospect commente une section ou une ligne du devis. Ses réponses sont persistées et pré-remplies à la visite suivante, chaque soumission me notifie, et je relis tout dans un espace d’administration séparé. L’itération se fait dans la proposition, pas dans un fil d’emails.

    Versionné comme du code. Chaque publication est un instantané. Un prospect qui revient après une révision voit un bandeau « Mis à jour » et un diff de ce qui a changé ; ses retours restent épinglés à la version qu’il commentait.

    Un devis, deux rendus, zéro dérive. Un seul bloc de pricing alimente le rendu à l’écran et le devis A4 en PDF, calculés par le même module. L’administration convertit ensuite un devis accepté en facture, sur la même numérotation que le reste de l’activité.

    Pourquoi c’est ici

    Ce système incarne une conviction : l’expérience commerciale fait partie du travail. Le soin qu’un prospect voit dans sa proposition est celui qu’il retrouvera dans son projet. Et c’est le cycle complet de l’atelier : un outil construit pour mon usage, éprouvé en conditions réelles, chaque proposition que j’envoie passe par lui.

    proposals.horiot.studio/demo →

  24. project· maintenu

    Vault Tools · Traitement de fichiers dans le navigateur

    Une suite de 40+ outils de traitement de fichiers, 100 % côté client grâce à WebAssembly. « Convert. Compress. Transform. All in Your Browser. »

    Contexte

    Vault Tools est une suite d’outils de traitement de fichiers qui tourne entièrement dans le navigateur : « Convert. Compress. Transform. All in Your Browser. »

    La plupart des convertisseurs gratuits en ligne envoient vos fichiers sur un serveur tiers. Pour un avocat avec des pièces confidentielles, un designer avec des maquettes non publiées, un développeur avec des données sensibles, ce modèle est inacceptable. Vault Tools prend le contre-pied : vos fichiers ne quittent jamais votre machine.

    Côté client, toujours

    WebAssembly comme moteur de traitement. Conversion d’images, fusion de PDF, génération de hash, parsing JSON, tout est compilé en WASM et s’exécute chez le visiteur. Aucun backend de traitement, aucun compte, aucun fichier téléversé. La promesse est architecturale, pas juridique : « Your files stay on your machine » se vérifie dans l’onglet réseau des DevTools, pas dans des CGU.

    Plus de quarante outils en cinq catégories : image (conversion, compression, EXIF, favicon, filigrane…), PDF (fusion, division, réorganisation, métadonnées…), développeur (hash, QR, UUID, JWT, cron…), texte et données (JSON, CSV, Markdown, diff, regex…), fichiers (checksum, ZIP…). Gratuit, financé par de la publicité non intrusive : pas d’abonnement, pas de limite de taille, pas de paywall sur les exports.

    Pourquoi c’est ici

    Vault Tools incarne une position technique que je tiens : le traitement côté client est sous-utilisé. WebAssembly a rendu possibles des usages qu’on envoyait par réflexe sur des serveurs, par habitude, par flemme d’infrastructure, ou parce que les frameworks serveur-first rendent l’option invisible. Vault Tools est la démonstration qu’on peut faire beaucoup plus dans le navigateur que l’industrie ne le suggère.

    vault-tools.com →

  25. project

    Jeux · Deux jeux pour le navigateur

    Deux petits jeux finis, jouables sans compte ni installation. Chacun tient sur une contrainte technique forte : une simulation déterministe en Rust, un fichier unique sans build.

    Deux jeux, tous les deux gratuits, tous les deux dans le navigateur. Rien à installer, rien à créer.

    Le principe

    Un jeu est le projet le moins raisonnable qu’on puisse montrer dans un portfolio, et c’est pour ça qu’il y est. Il faut une boucle complète, un état qui tient dans la durée, une interface qui se comprend sans notice, et de la finition. Chaque jeu ici a été construit autour d’une contrainte technique choisie à l’avance, puis fini.

    Les deux jeux

    Cold Star. Un jeu incrémental de science-fiction dans la filiation d’A Dark Room : on ranime un réacteur, on bâtit une station, on part vers une galaxie générée. Rust compilé en WebAssembly, avec un moteur pur et déterministe comme invariant central.

    Orbit Hop. Un tap : le vaisseau quitte son orbite et doit se poser sur la planète suivante. Une partie du jour partagée par tout le monde, trois essais, un mode sans fin. Un seul fichier HTML, sans build ni dépendance, jouable depuis l’écran d’accueil du téléphone.

    Pourquoi les montrer

    Les deux vont à l’opposé l’un de l’autre : un workspace Rust strictement découpé d’un côté, quarante kilo-octets de canvas de l’autre. Ce qui se retrouve dans les deux, c’est la méthode : séparer la simulation de l’affichage, rendre chaque partie reproductible, et livrer quelque chose de fini plutôt qu’un prototype.

  26. project· maintenu

    Cold Star · A small light in a very large dark

    Un jeu incrémental sci-fi pour le navigateur, écrit en Rust et compilé en WebAssembly. « A small light in a very large dark, and the cost of keeping it lit. »

    Petit jeu fini, en accès libre : une invitation à étendre.

    Contexte

    Cold Star est un jeu incrémental minimaliste qui tourne entièrement dans le navigateur. Le pitch, repris du dépôt : « A minimalist sci-fi incremental game about a small light in a very large dark, and the cost of keeping it lit. »

    On se réveille sans énergie dans le noir de l’espace. On ranime un réacteur défaillant, on rassemble un équipage, on bâtit une station, puis un vaisseau, et on part vers une galaxie générée procéduralement : seize systèmes, des surfaces planétaires, des contacts qu’on peut héler, négocier ou affronter. Trois origines convergent en milieu de partie, chacune vers plusieurs fins. « It starts as a single button in the dark. It ends as a galaxy. »

    Le jeu s’inscrit dans la filiation d’A Dark Room : un récit porté par la divulgation progressive de l’interface, presque sans exposition. L’instrument se réchauffe à mesure qu’on le ranime : sa couleur et sa chaleur sont de l’état de jeu réel, pas de la décoration.

    Une simulation déterministe

    Rust compilé en WebAssembly, rendu avec Dioxus, dans un workspace à séparation stricte : sim, le moteur pur et déterministe, sans I/O ni unsafe ; content, les données de jeu validées en fichiers RON ; app, une vue en lecture seule au-dessus de l’état.

    L’invariant central : advance(n) == n × advance(1). Avancer d’un tick ou de mille produit exactement le même état. C’est ce qui rend triviaux les sauvegardes par instantané, les liens de partage encodés en base64 et le rattrapage hors-ligne.

    Pourquoi c’est ici

    Cold Star pousse à l’extrême une conviction technique : une simulation pure et déterministe paie ses dividendes partout. C’est aussi un terrain où éprouver Rust → WASM sur un produit fini, interactif et stateful, une boucle de jeu complète plutôt qu’une API sans état.

    Le jeu est feature-complete pour l’arc qu’il dessine, et volontairement ouvert à l’extension : contenu, équilibrage, rencontres, polish.

    Le dépôt sur GitHub →

  27. project· maintenu

    Orbit Hop · Un tap, une planète

    Un jeu d'adresse à un seul tap pour le téléphone : le vaisseau orbite, on le lâche au bon moment, il doit se poser sur la planète suivante. Même partie pour tout le monde chaque jour, trois essais.

    Jouable tout de suite : orbit-hop.horiot.studio, sans compte, sur téléphone de préférence.

    Contexte

    Le vaisseau tourne autour d’une planète. Un tap le libère le long de la tangente ; s’il traverse la bande de capture de la planète suivante, il se met en orbite et on recommence. Passer près du centre donne un PERFECT et fait monter la série. Rater, c’est partir dans le vide.

    C’est un jeu de timing, pas de réflexes : la ligne s’allume quand l’angle est bon, et tout le reste consiste à ne pas se précipiter.

    À tester

    • La partie du jour : les mêmes planètes pour tout le monde, trois essais, puis un résumé en emojis à partager, comme un Wordle spatial.
    • Le mode sans fin : planètes aléatoires, un seul objectif, battre son record.
    • Sur l’écran d’accueil : le jeu s’installe comme une application depuis Safari ou Chrome et se lance plein écran.

    Un fichier, sans build

    Tout le jeu tient dans un fichier HTML d’une quarantaine de kilo-octets : le rendu sur canvas, la physique des orbites, les menus, le partage. Pas de framework, pas d’étape de build, pas de dépendance ; le déploiement est une copie sur Cloudflare Pages.

    La partie du jour découle d’une graine dérivée de la date, donc la suite de planètes est identique pour chaque joueur sans serveur ni compte. Les réglages (bande de capture, vitesse d’orbite, cadence des planètes) ont été ajustés par des séries de parties jouées en headless, avec les décisions notées à chaque tour.

    Pourquoi c’est ici

    Orbit Hop est le contrepoint de Cold Star : la même exigence de finition, avec la contrainte inverse. Là où Cold Star découpe un workspace Rust en trois crates, ici tout doit tenir dans une page, et rester agréable au pouce.

    orbit-hop.horiot.studio →

  28. project

    Démos · Configurateurs à essayer

    Cinq configurateurs génériques, ouverts à tous, un par métier de fabricant sur mesure. Ce que je mets entre les mains d'un prospect avant le premier appel, plutôt qu'une description.

    demos.horiot.studio, sans compte ni code d’accès.

    Le principe

    Chaque démo est un produit générique et fonctionnel, sous ma propre marque : le client final configure son produit en 3D, voit un prix indicatif, et le fabricant recevrait une demande qualifiée avec le plan coté. Les catalogues et les prix sont fictifs mais cohérents ; tout s’adapte ensuite aux gammes, aux tarifs et à la charte de l’entreprise. Rien ne part quand on clique sur « Envoyer ma demande » : un panneau montre ce que le fabricant recevrait.

    Les cinq configurateurs

    Carport et pergola. Le premier de la série : 3D et plan technique dans la même fenêtre, zones de neige par code postal.

    Portail et clôture. Portail, portillon et clôture assortis, le portail s’ouvre en 3D, motifs de découpe laser.

    Cave à vin enterrée. Coupe 3D sous la maison, visite de l’intérieur, réservation de dalle sur le plan.

    Escalier sur mesure. Droit, quart tournant ou hélicoïdal, contrôle de trémie et d’échappée, montée à la première personne.

    Piscine conteneur. Hors-sol, semi-enterrée ou enterrée dans le jardin, fiche chantier avec formalités, taxe et grutage.

    Pourquoi cinq

    Un configurateur se juge sur du concret, pas sur une promesse. Cinq métiers, cinq vocabulaires, cinq géométries : la même méthode à chaque fois (un module de géométrie pur, deux rendus qui ne peuvent pas se contredire, un prix en fonction pure), et la preuve qu’elle tient sur des produits très différents.

  29. project· maintenu

    Configurateur carport & pergola · Démo publique

    Un configurateur générique de carport et pergola, à essayer en ligne, rendu 3D et plan technique dans la même fenêtre, prix indicatif en direct, demande de devis simulée. Le produit que je montre aux fabricants et installateurs avant le premier appel.

    Démo ouverte à tous : demos.horiot.studio/carport, sans compte ni code d’accès.

    Contexte

    Quand j’écris à un fabricant de carports ou de pergolas que je ne connais pas, je peux décrire un configurateur, ou lui en mettre un entre les mains. Cette démo est le second choix.

    C’est un produit générique, fonctionnel, sous ma propre marque : le client final configure son abri, voit un prix indicatif, et le fabricant reçoit une demande qualifiée avec le plan. Tout s’adapte ensuite au catalogue, aux tarifs et à la charte de l’entreprise. demos.horiot.studio regroupe ces produits à essayer ; celui-ci a été le premier, quatre autres ont suivi (voir les démos).

    Essaie-le

    Six étapes en accordéon, toutes modifiables, aucune impasse. À tester en particulier :

    • 3D ou Plan : le plan technique (élévation, vue de dessus, cotes, cartouche) est un second rendu à part entière, pas une 3D au rabais.
    • Le code postal : il affiche la zone de neige du département (NF EN 1991-1-3/NA), à titre indicatif.
    • Envoyer ma demande : rien ne part. Un panneau montre ce que le fabricant recevrait, configuration, prix, plan et coordonnées.

    Deux rendus, une seule géométrie

    Un module de géométrie pur transforme la configuration en primitives (poteaux, poutres, chevrons, toiture, lames, cotes). C’est le seul contrat que connaissent les deux rendus : la 3D et le plan lisent les mêmes positions, ils ne peuvent pas se contredire. La 3D (Three.js) n’est chargée qu’à la première activation ; le plan est du SVG pur.

    Le prix suit la même logique : une fonction pure, des montants fictifs mais cohérents, détaillés ligne par ligne. Brancher le vrai catalogue d’un fabricant revient à remplacer une table de tarifs. La configuration vit dans l’URL sous forme d’un hash court, partageable par email. Le site est entièrement pré-rendu, sans code serveur ; le jour où un prospect veut un pilote réel, l’envoi vers sa boîte mail ou son CRM est à un fichier de distance.

    Pourquoi c’est ici

    Le configurateur Murdeau m’a appris ce qu’un configurateur doit faire pour vendre : partir de la question du visiteur, donner un prix tout de suite, livrer à l’entreprise une demande qu’elle peut traiter. Cette démo en est la version générique, pour un métier qui a le même besoin. Elle applique le principe de la maison à la prospection elle-même : on décide sur du concret, pas sur une description.

    demos.horiot.studio/carport →

  30. project· maintenu

    Configurateur portail & clôture · Démo publique

    Un configurateur générique de portail, portillon et clôture, à essayer en ligne, le portail s'ouvre en 3D, plan technique et prix indicatif en direct. Pour les fabricants et installateurs de portails aluminium, acier et fer.

    Démo ouverte à tous : demos.horiot.studio/portail, sans compte ni code d’accès.

    Le visiteur choisit l’ouverture (battant ou coulissant), la pose entre piliers maçonnés ou sur poteaux fournis, les dimensions, le style et la couleur, puis le portillon et la clôture assortis. Il voit le prix indicatif à chaque changement et recevrait, côté fabricant, une demande avec le plan coté.

    À tester

    • Ouvrir : le portail s’ouvre en 3D, battant ou coulissant, pour vérifier le dégagement.
    • Portillon et clôture : ils reprennent le style et la couleur du portail, et le prix suit la longueur de clôture.
    • Découpe laser : les motifs ajourés se voient en 3D et sur le plan, et changent le prix.

    Le produit, les gammes et les prix sont génériques. Tout s’adapte au catalogue et à la charte d’un fabricant, comme les autres démos.

    demos.horiot.studio/portail →

  31. project· maintenu

    Configurateur cave à vin enterrée · Démo publique

    Un configurateur générique de cave à vin enterrée, ronde, ovale ou voûtée, à essayer en ligne, coupe 3D sous la maison, visite de l'intérieur, plan avec réservation de dalle. Pour les fabricants et installateurs de caves enterrées.

    Démo ouverte à tous : demos.horiot.studio/cave, sans compte ni code d’accès.

    Le visiteur choisit le type de cave (ronde en hélice, ovale avec espace dégustation, voûtée où l’on marche), la hauteur et donc la capacité en bouteilles, la trappe, l’aménagement des casiers et le mode de pose. Le prix indicatif suit chaque choix ; la demande partirait avec le plan et la réservation de dalle.

    À tester

    • Intérieur : on descend dans la cave, à la première personne, bouteilles autour de l’escalier.
    • Coupe 3D : la cave sous la dalle, avec la trappe et la hauteur choisie.
    • Plan : la réservation de dalle cotée, ce que le maçon attend avant de couler.

    Le produit, les gammes et les prix sont génériques. Tout s’adapte au catalogue et à la charte d’un fabricant, comme les autres démos.

    demos.horiot.studio/cave →

  32. project· maintenu

    Configurateur escalier sur mesure · Démo publique

    Un configurateur générique d'escalier droit, quart tournant ou hélicoïdal, à essayer en ligne, contrôle de trémie et d'échappée, montée à la première personne, fiche de cotes. Pour les fabricants d'escaliers sur mesure.

    Démo ouverte à tous : demos.horiot.studio/escalier, sans compte ni code d’accès.

    Le visiteur choisit la forme et le sens, renseigne son étage (hauteur, trémie), puis les marches, la structure, le garde-corps et la pose. L’outil vérifie que l’escalier passe : nombre de marches, échappée sous la trémie, giron. Le prix indicatif suit ; la demande partirait avec la fiche de cotes.

    À tester

    • Votre étage : réduisez la trémie, l’outil signale quand l’échappée n’est plus réglementaire.
    • Marche : on monte l’escalier à la première personne, pour sentir la pente.
    • Hélicoïdal : le fût central et la trémie ronde, avec le plan coté qui suit.

    Le produit, les gammes et les prix sont génériques. Tout s’adapte au catalogue et à la charte d’un fabricant, comme les autres démos.

    demos.horiot.studio/escalier →

  33. project· maintenu

    Configurateur piscine conteneur · Démo publique

    Un configurateur générique de piscine conteneur, hors-sol, semi-enterrée ou enterrée, à essayer en ligne, coupe 3D dans le jardin, vue depuis la terrasse, fiche chantier avec formalités, taxe et grutage. Pour les fabricants de piscines conteneur et bassins acier.

    Démo ouverte à tous : demos.horiot.studio/piscine, sans compte ni code d’accès.

    Le visiteur choisit le format (20 pieds, 40 pieds ou sur mesure), la profondeur, la pose et l’enfouissement, puis le bardage, la terrasse, le liner, la couverture et les équipements. La démo pose la piscine dans son jardin, avec la limite de propriété et le camion-grue, et sort une fiche chantier : formalités, taxe d’aménagement, sécurité, accès pour la grue.

    À tester

    • Votre terrain : réduisez le passage sous 3,50 m, la fiche chantier passe à la grue mobile et le prix suit.
    • Terrasse : la piscine vue depuis la terrasse, à la première personne, couverture ouverte ou fermée.
    • Sous les 10 m² : le format 20 pieds évite toute formalité, et la fiche le dit.

    Le produit, les gammes et les prix sont génériques. Tout s’adapte au catalogue et à la charte d’un fabricant, comme les autres démos.

    demos.horiot.studio/piscine →

Connexions

Disponible pour de nouveaux projets