Aller au contenu

Priam Lab

Avant d’ouvrir, un atelier de fabrication se présente en 3D

Priam Lab est un atelier de fabrication numérique : impression 3D, découpe et gravure laser, lettrage vinyle. Avant son ouverture, nous avons bâti sa page d’attente, avec un compte à rebours, une inscription pour être averti et une vitrine 3D où huit stations fabriquent des pièces en boucle.

Statut
Page terminée, déployée sur Cloudflare Pages
Site
priamlab.ca
Technologies
Vite · TypeScript · three.js · Cloudflare Pages · Google Apps Script
  • 8stations qui fabriquent en boucle
  • 4procédés de fabrication présentés
  • 2,5 sd’intro pour fabriquer le logo
  • 0ressource d’un autre site au chargement

Le contexte

Priam Lab est un atelier de fabrication numérique au Québec, dont l’ouverture est prévue le 1er décembre 2026. Il fabriquera des pièces uniques, des cadeaux personnalisés et de petites séries : pièces de remplacement, objets gravés, lettrage de vitrine ou de véhicule.

Avant d’ouvrir, l’atelier voulait une page d’attente à son adresse, priamlab.ca. Elle devait montrer ce qu’il fabrique, compter les jours jusqu’à l’ouverture et recueillir les courriels des personnes qui veulent être averties le jour venu.

Les défis

  • Montrer des pièces en fabrication, en 3D, sans retarder l’affichage du texte.
  • Garder l’animation fluide sur un téléphone modeste comme sur un ordinateur.
  • Rester utile pour tous : sans 3D, avec moins de mouvement, au clavier ou avec un lecteur d’écran.
  • Recueillir des courriels sans service d’infolettre, sans témoin ni traceur.

Ce que nous avons bâti.

  • Le texte d’abord, la 3D ensuite

    Le titre, la présentation, le compte à rebours et le formulaire sont écrits en HTML, présents dès le premier affichage. La vitrine 3D se charge ensuite, sans jamais retarder le texte.

  • Huit stations en action

    Autour d’un symbole infini, huit stations fabriquent en boucle un vase, un engrenage, un sous-verre gravé, un cake-topper et d’autres pièces. On fait tourner le manège au doigt, à la souris ou au clavier.

  • Un logo fabriqué à l’ouverture

    En 2,5 s, une tête lumineuse trace l’infini, les couches s’empilent et un balayage laser révèle le nom. L’intro ne joue qu’une fois par session, et on peut la passer d’un clic ou d’une touche.

  • Une qualité qui s’adapte

    Si l’animation ralentit, la page baisse d’elle-même la résolution, puis retire les étincelles et la poussière. L’animation s’arrête quand l’onglet est caché ou que la vitrine sort de l’écran.

  • Une page pour tout le monde

    Sans 3D possible, un message prend sa place et le reste fonctionne. Avec moins de mouvement, la page démarre en pause. Les boutons font au moins 44 px et la pièce choisie est annoncée aux lecteurs d’écran.

  • Les inscriptions dans un Google Sheet

    Le courriel passe par une petite fonction serveur qui l’ajoute, sans doublon, dans un Google Sheet privé. Quand le serveur confirme l’inscription, la vitrine lance des confettis aux couleurs des procédés.

Ce que la page ne fait jamais

  • Charger une police ou un script d’un autre site
  • Déposer un témoin ou un traceur
  • Annoncer une inscription réussie sans la réponse du serveur
  • Montrer au navigateur le secret du Google Sheet
  • Jouer l’intro pour qui a demandé moins de mouvement

Les résultats

resultats.txt
  1. $ priam rapport --projet
  2. 80 tests unitaires et 17 scénarios de bout en bout, joués sur ordinateur et sur téléphone, couvrent le compte à rebours, le formulaire, la 3D et ses replis.
  3. Aucune ressource d’un autre site au chargement, ce qu’un test de bout en bout vérifie : les polices sont hébergées avec la page.
  4. Environ 8 ko de JavaScript compressé au premier affichage, hors 3D ; le build échoue au-delà de 60 ko.
  5. Sans 3D, avec moins de mouvement ou au clavier, la page reste utilisable : chacun de ces cas a son test de bout en bout.

Les solutions utilisées

Autres études de cas

Parlons de votre projet.

Racontez-nous ce qui vous fait perdre du temps. Une première rencontre, sans engagement, suffit souvent à voir ce qui est possible.

Nous joindre1 888 697-7426

↑↓ naviguerEntrée ouvrir/ ou Ctrl K rechercher