NUX

La curation comme produit, pas un énième mur algorithmique

Chaque interface de streaming est un mur algorithmique sans fin ; ce qu’on vend, c’est la fatigue du choix. Un benchmark de Netflix, Disney+, MUBI et Criterion a mis au jour l’espace laissé libre : sur aucune plateforme l’unité de base n’est un thème narratif composé. Chez NUX, tout repose sur des ensembles finis, composés par des éditeurs — Criterion × MUBI × Apple TV.

Chaque décision sert cette thèse. La structure éditoriale revient partout où une collection apparaît — eyebrow ambré, titre en serif, chapeau de deux phrases, signature du curateur avec sa date — toujours avec un nombre fini, jamais « Voir plus ∞ » — « Five Films on Grief », né comme exemple de ce principe, est aujourd’hui une vraie collection en production. Un seul CTA ambré plein par zone, dosé avec la parcimonie de l’encre jusqu’à ≤10 % de chaque écran, pour que l’unique bouton Play capte toujours le regard en premier.

« Projection Still Life » — un objet symbolique, une lumière directrice ambrée, grain 35 mm. L’image fait office de système de couleurs : l’interface reste dans un noir chaud pour que les visuels portent l’écran

La promesse du nombre fini, tenue — « Five Films on Grief », en production dans l’application

Un jeu de tokens, deux modes de variables — les wireframes et le hi-fi sont les mêmes écrans

Le choix d’ingénierie central : un unique jeu de tokens sémantiques (surfaces, texte, bordures, actions, icônes) porte deux modes de variables Figma. Le mode wireframe est une rampe de gris conforme aux HIG en Plus Jakarta Sans + Inter ; le mode hi-fi est une échelle d’encre chaude (#070606→#332E27) avec des tons de texte papier à 17,0:1 / 8,4:1 / 5,2:1, des accents ambrés #C8922A à labels sombres sur ambre (7,1:1 — le blanc échoue à 2,4:1), des filets plutôt que des ombres et 2,5 % de grain cinéma. 35 écrans wireframe + 46 écrans hi-fi, verrouillés à 0 valeur en dur et 0 calque de texte sans style.

La typographie fait le travail éditorial : Fraunces nomme le contenu, Inter prend en charge tout ce qui est fonctionnel, Newsreader porte les textes longs, avec un ratio affichage/métadonnées d’au moins 5×. Une bibliothèque de 50+ composants par plateforme couvre chaque état interactif (default/hover/pressed/focus/disabled), complétée par des barres d’onglets en verre iOS 26 sélectives et un modèle de focus tvOS — anneau blanc et élévation, un seul focus par écran. Chaque plateforme a son lecteur, et les deux modes de fidélité se parcourent comme des prototypes entièrement cliquables.

Figma hi-fi Desktop Home — le même système de tokens que celui sur lequel tourne l’application

Un catalogue sans placeholders, puisé dans le vrai cinéma britannique, à l’identité visuelle générée

Le catalogue repose sur de vrais films britanniques — 72 films, chacun avec son affiche et ses photogrammes au format paysage (The Third Man, Lawrence of Arabia, The Red Shoes, Black Narcissus…), dont 21 conçus de bout en bout dans le prototype hi-fi, avec des portraits de l’époque et une discipline stricte portrait-dans-portrait, still-dans-paysage. Pour les surfaces sans visuel existant — genres, titres fictifs, onboarding — j’ai conçu « Projection Still Life » : un objet symbolique par genre, une seule lumière directrice ambrée, grain 35 mm, photographique et délibérément non-3D pour ne jamais entrer en conflit avec le langage éditorial à l’encre.

La curation IA comme conversation — ancrée pour qu’elle ne puisse pas halluciner un titre

Si la curation est le produit, l’étape suivante consiste à laisser le spectateur décrire une ambiance en langage naturel et à faire répondre la plateforme. Le Curateur est un concierge dans l’application en production, accessible par deux points d’entrée — un bouton flottant sur chaque écran et une pastille « ✦ Demander au Curateur » à côté de la recherche Browse. Tapez « un film noir tendu, sur fond de trahison » ou touchez un chip d’ambiance, et il répond dans la voix éditoriale de NUX avec une courte note et de vraies fiches de films. La conversation se poursuit — « quelque chose de plus court ? », « plutôt comme le noir » — sur la même surface.

Impossible pour lui d’halluciner : tout le catalogue tient dans un seul prompt (pas de RAG), le modèle ne renvoie que des identifiants de films, et le serveur les valide face au vrai catalogue avant tout rendu. Un adaptateur de fournisseur appelle Gemini 2.0 Flash et bascule vers Groq (Llama 3.3) — tous deux en tier gratuit — avec les clés côté serveur, soumises à un rate-limiting et à un plafonnement des entrées. Le même moteur génère des rails éditoriaux thématiques (« Islands of the Mind », « Portraits of Obsession »), mis en cache et rafraîchis chaque semaine, et les abonnés reçoivent une seule notification push à l’arrivée du nouveau programme. Développé en test-first : basculement de fournisseur, validation des identifiants et garde-fou contre l’injection de prompt sont tous couverts.

Une promesse jouable — les jeux du catalogue sont réels

Le catalogue ne se limite pas aux films — il couvre aussi des documentaires, des jeux et des cours, alors j’ai rendu les jeux bien réels. Neon Drift, le seul jeu de la bibliothèque, n’est pas une image fixe : appuyez sur Play sur sa page de titre et un petit jeu canvas synthwave s’ouvre — pilotez un chasseur stellaire récupéré à travers les ruines néon, tout en réflexes, dans sa propre surcouche avec piège de focus et prise en charge du reduced motion. Les types de contenu ne sont pas une façade ; la promesse est tenue dans le code.

Neon Drift — un jeu canvas jouable qui s’ouvre depuis la page de titre, avec sa propre identité synthwave

Au cœur de la partie. Les portes défilent, un contact et c’est la casse

Un build React responsive, en production sur ma propre infrastructure

L’application responsive complète est en production — Accueil, Browse, des pages de films avec sections ancrées, citations de critiques en exergue et Téléchargements honnêtes sur l’appareil, un lecteur piloté au clavier avec son aide-mémoire « ? », des collections éditoriales, Ma Liste + Reprendre la lecture, authentification, Profil, goûts modifiables et onboarding — React + Vite sur le système de tokens exporté, vraies données de catalogue, une View-Transition poster→hero, un paginateur de hero à vignettes d’affiches, des fondus enchaînés au survol vers les photogrammes, des révélations éditoriales pilotées par le défilement et une barre d’onglets en verre flottante sur mobile. Conçue aux standards de production : accessibilité WCAG-AA (gestion du focus, reduced motion, live regions pour lecteurs d’écran, une surcouche Curateur pleinement accessible aux lecteurs d’écran), un contrôle axe bloquant dans la suite de tests, une suite backend et une CI qui compile et teste à chaud la vraie image Docker, ainsi qu’un conteneur non-root durci — auto-hébergée sur ma propre infrastructure (Docker · nginx · Coolify · Hetzner), déployée automatiquement à chaque push. Avant cette version, tout le parcours est passé par un audit UX vérifié de manière contradictoire : 42 constats ramenés à 13 causes racines, toutes corrigées, pour que les chemins malheureux disent la vérité eux aussi. L’application est une PWA installable — service-worker avec repli hors ligne, ajout à l’écran d’accueil, push web avec une notification par semaine quand le Curateur publie — et une landing marketing distincte, bâtie sur le même système de tokens, la précède sur nux.ontwrpn.com.

Les pages de films ont gagné des sections ancrées et des citations de critiques en exergue, fidèles à la spec Figma au pixel près

▶Démo en ligne

app.nux.ontwrpn.com

Ouvrir

Live — essayez

Mobile — barre d’onglets en verre flottante + recherche détachée (motif iOS 26)

L’architecture en modes s’est rentabilisée deux fois : le hi-fi a pris des heures, pas des semaines, et chaque décision tardive — un réalias de token, une correction de composant — s’est propagée d’un coup à 33 écrans. C’est cette discipline de l’audit jusqu’à zéro valeur brute qui a rendu cette vitesse possible

La note obtenue — 15/15, « A+ Impressively exceeds expectations » (HEC Montréal / edX)

Sources

• Iyengar & Lepper (2000). When choice is demotivating: can one desire too much of a good thing? Journal of Personality and Social Psychology 79(6):995–1006.
• Scheibehenne, Greifeneder & Todd (2010). Can there ever be too many options? A meta-analytic review of choice overload. Journal of Consumer Research 37(3):409–425. — l’effet de surcharge de choix est débattu et ne se réplique pas de manière fiable