Youssef Idder Studio
Étude de cas · concept non sollicité · 2026Case study · unsolicited concept · 2026

Flowpoint
le catalogue qui se visitea catalogue you can walk through

PHOVA, fabricant marocain de pompes industrielles, présente ses six familles de pompes en catalogues PDF. Nous avons reconstruit chacune en 3D à partir de ces seuls documents, puis construit un site qui fait entrer le visiteur dans la pompe avant qu'il ne la prescrive.PHOVA, a Moroccan industrial pump maker, presents its six pump families as PDF catalogues. We rebuilt each one in 3D from those documents alone, then built a site that takes the visitor inside the pump before they specify it.

StatutStatus
Non officiel, non commandéUnofficial, not commissioned
RôleRole
Recherche, 3D, design, code, testsResearch, 3D, design, code, testing
SourcesSources
phova.com et ses catalogues PDFphova.com and its PDF catalogues
AdresseAddress
studio.soraly.ma/phova
Quarter-section cutaway of the OTW pump during the opening sequence, with the caption Through the suction eye
L'ouverture : le défilement fait entrer la caméra par l'aspiration de la OTW 100-32, en coupe.The opening: scrolling takes the camera in through the suction of the OTW 100-32, in section.
6familles de pompes reconstruitespump families rebuilt
12modèles 3D : un bureau, un mobile par famille3D models: one desktop, one mobile per family
150vérifications automatisées sur le parcoursautomated checks along the journey
0donnée envoyée : les formulaires sont des démosdata sent: the forms are demos

01Le point de départThe starting point

Choisir une pompe centrifuge, c'est lire des tableaux de cotes, des plans et des maxima de série, puis imaginer la machine. Les catalogues de PHOVA contiennent tout cela, avec une vue en coupe pour chaque famille. Mais ils restent des PDF : rien ne s'ouvre, rien ne tourne.Choosing a centrifugal pump means reading dimension tables, drawings and series maxima, then picturing the machine. PHOVA's catalogues hold all of that, with a cutaway for each family. But they are still PDFs: nothing opens, nothing turns.

La question : le catalogue pourrait-il expliquer la pompe lui-même, sans rien ajouter à ce qu'il imprime déjà ?The question: could the catalogue explain the pump on its own, without adding anything to what it already prints?

C'est un projet personnel. Nous n'avons eu aucun échange avec PHOVA et le site le dit sur chaque page.This is a self-initiated project. We have had no contact with PHOVA and the site says so on every page.

02Les règles fixées avant de commencerRules set before starting

  • Seulement ce qui est impriméOnly what is printedChaque chiffre affiché renvoie à sa page de catalogue, par exemple le tableau ISO 2858 de la OTWEvery figure on screen points to its catalogue page, for example the OTW's ISO 2858 table OTW p12
  • Rien d'inventéNothing inventedPas de performances, de certifications, de clients, de témoignages ni de résultatsNo performance figures, certifications, clients, testimonials or results
  • Les contradictions restent visiblesContradictions stay visibleLe catalogue OTW donne 400 °C page 10 et 200 °C page 14 : les deux sont affichés, avec une demande de confirmationThe OTW catalogue gives 400 °C on page 10 and 200 °C on page 14: both are shown, flagged for confirmation OTW p10, p14
  • Un maximum n'est pas une sélectionA maximum is not a selectionLe contrôle de point de fonctionnement signale ce qui dépasse les maxima de série, sans jamais dire « adaptée »The duty check flags anything above the series maxima and never says "suitable"
  • Non officiel, partoutUnofficial, everywhereMention en en-tête et en pied de page, pas de logo PHOVA, formulaires qui n'envoient rienLabelled in the header and footer, no PHOVA logo, forms that send nothing

03Reconstruire six pompesRebuilding six pumps

Chaque pompe est modélisée dans Blender à partir des tableaux de cotes et des plans. Pour vérifier, nous superposons des rendus orthographiques du modèle aux plans du catalogue : brides, hauteurs de tubulures, pieds et bouts d'arbre doivent tomber au millimètre près.Each pump is modelled in Blender from the dimension tables and drawings. To check, we overlay orthographic renders of the model on the catalogue drawings: flanges, nozzle heights, feet and shaft ends have to land on them.

Trois familles (OTW, OTC, OTS) publient des tableaux de cotes. Les trois autres (PHH, PHB2, PHB3) n'en publient pas : leurs modèles suivent les tailles de désignation et les proportions des photos, et le site les marque « proportionnels ».Three families (OTW, OTC, OTS) publish dimension tables. The other three (PHH, PHB2, PHB3) do not: their models follow the designation sizes and photo proportions, and the site labels them "proportional".

OTW pump exploded along its shaft, with the back pull-out parts listed
Démontage par l'arrière : volute, roue et palier se séparent le long de l'arbre.Back pull-out: casing, impeller and bearing housing separate along the shaft.
3D explorer showing the OTW 100-32 with dimension lines and a parts panel
L'explorateur : cotes du catalogue sur le modèle, pièces avec leur page source.The explorer: catalogue dimensions on the model, parts with their source page.
Pipeline 3D3D pipelineRésultatResult
Export glTF, validateur Khronos, 12 fichiersglTF export, Khronos validator, 12 files0 erreur0 errors
Poids par modèle, bureau (compression meshopt)Size per model, desktop (meshopt)0.86 – 1.23 MB
Poids par modèle, mobile (décimé)Size per model, mobile (decimated)0.61 – 0.88 MB
Surface fonte : relief et rugosité générés dans le navigateurCast-iron surface: relief and roughness generated in the browserProcéduralProcedural

04Raconter la pompeTelling the pump's story

Le site s'ouvre sur un plan-séquence piloté par le défilement : la caméra traverse l'œil d'aspiration, passe la roue de 315 mm et suit le liquide jusqu'au refoulement. Un bouton permet de passer l'introduction et un indice invite à défiler.The site opens on a scroll-driven sequence: the camera passes through the suction eye, past the 315 mm impeller, and follows the liquid out to the discharge. A button skips the intro, and a cue tells visitors to scroll.

Vient ensuite un fond de plan bleu marine et quatre étapes : le tableau de cotes, le démontage par l'arrière, le trajet du liquide, puis chaque pièce cliquable avec la question qu'un ingénieur d'application poserait. Un panneau latéral affiche à chaque étape les données du catalogue correspondantes.Then comes a navy drawing-sheet background and four steps: the dimension table, the back pull-out, the liquid path, then every part, clickable, with the question an application engineer would ask. A side panel shows the matching catalogue data at each step.

Animated liquid path drawn through the pump, with a numbered flow list
Le trajet du liquide, de l'aspiration au refoulement, avec les maxima de série imprimés.The liquid path from suction to discharge, with the printed series maxima.

Le chargement est progressif : une image fixe s'affiche d'abord, la 3D arrive ensuite dans un module séparé. Les téléphones lents et le mode économie de données reçoivent les images et un bouton pour charger la 3D. Chaque information dessinée sur le modèle existe aussi en texte, au clavier comme au lecteur d'écran.Loading is progressive: a still image shows first, then the 3D arrives in a separate module. Slow phones and data-saver mode get the images and a button to load 3D. Every fact drawn on the model also exists as text, for keyboards and screen readers.

05Ce qui a été vérifiéWhat was checked

VérificationCheckRésultatResult
Parcours complet, bureau et mobile (Playwright)Full journey, desktop and mobile (Playwright)150 / 150
Accessibilité axe-core, WCAG 2.1 AA, chaque état de pageaxe-core accessibility, WCAG 2.1 AA, every page state0 violation0 violations
Rendu WebGL de l'explorateurWebGL pass on the explorer28 / 28
Mise en page et synchronisation au défilementLayout and scroll sync390 – 2560 px
JavaScript initial, compresséInitial JavaScript, gzip125 KB
Module 3D, chargé à la demande3D module, loaded on demand300 KB
Requêtes envoyées par le formulaire de démoRequests sent by the demo form0

06LimitesLimits

  • Les modèles sont des reconstructions à partir de documents publics, pas la CAO du fabricant. Les pièces internes sont illustratives.The models are reconstructions from public documents, not manufacturer CAD. Internal parts are illustrative.
  • Tests faits dans un navigateur automatisé avec un rendu 3D logiciel. Pas encore de mesure sur de vrais téléphones ni de vraies cartes graphiques, pas de test manuel au lecteur d'écran.Tested in an automated browser with software 3D rendering. Not yet measured on real phones or real graphics cards, and no manual screen-reader pass.
  • Aucun test utilisateur : nous n'affirmons aucun gain de conversion ni d'usage.No user testing: we claim no conversion or usability gains.
  • Le simulateur de pompe de PHOVA n'a pas été utilisé ni évalué.PHOVA's pump simulator was not used or assessed.

Voir la pompe de l'intérieur.See the pump from the inside.

Le site fonctionne mieux sur ordinateur. Sur téléphone, la 3D se charge à la demande.The site works best on a computer. On a phone, the 3D loads on request.

Flowpoint est un concept indépendant et non sollicité de Youssef Idder. Il n'est ni commandé, ni relu, ni approuvé par PHOVA Technology. Les noms de produits appartiennent à leur propriétaire. Faits publics vérifiés le 27 octobre 2026 sur phova.com.Flowpoint is an independent, unsolicited concept by Youssef Idder. It is not commissioned, reviewed or endorsed by PHOVA Technology. Product names belong to their owner. Public facts checked on 27 October 2026 at phova.com.