Perfectly Hooked

Une boutique de 23 pièces, une galerie de 14 images et boucles, et une page pour demander une commande sur mesure.

L’entreprise appartient à quelqu’un d’autre. Les photos, les noms et les prix viennent de son site d’origine et ne sont pas encore confirmés.

Le site n’est pas lancé : les paiements et les demandes sur mesure sont construits, mais désactivés.

Un seul site devait remplir trois rôles : vendre les pièces, montrer le travail fait main et recevoir une demande de pièce sur mesure.

L’entreprise a fourni les photos, les vidéos et les textes : rien ne pouvait donc être inventé pour combler un manque. La disponibilité n’a pas été fournie, alors les pièces indiquent « Ask about availability » ; les frais de livraison ne sont pas inventés, alors le panier dit que la livraison est convenue après la commande.

Chaque effet emprunte au crochet : des images révélées par des rangs qui balaient l’écran, un fil tracé le long de la page quand on défile, un menu travaillé comme des rangs de mailles.

Rien n’est inventé. Une pièce absente de la liste de prix de l’entreprise n’a pas de prix et porte un nom descriptif ; et quand une commande ou une demande ne peut pas encore être prise, le site le dit et propose WhatsApp au lieu de faire semblant.

Un prix n’est jamais cru sur la foi du navigateur. Le navigateur n’envoie que ce qui a été commandé ; le serveur retrouve les noms et les prix, et vérifie la signature du prestataire de paiement avant de croire à un paiement.

Les demandes sur mesure sont enregistrées avec la sécurité au niveau des lignes activée et aucun accès public, les photos de référence étant dans un espace privé ; le formulaire n’annonce le succès qu’une fois que la base de données a confirmé l’enregistrement.

Le mouvement respecte le visiteur. Les personnes qui ont activé « Réduire les animations » gardent un fondu doux, et un interrupteur « Full animations » permet à quelqu’un dont le téléphone est réglé sur ce mode de rétablir les effets.

Les cookies sont un choix simple, pas un mur : une ligne fine, deux boutons et un lien dans le pied de page pour changer d’avis.

La photographie d’abord. Des angles droits, une page ivoire au grain fin, le bordeaux comme seul accent.

Sur ordinateur, un fil de laine pend le long de l’en-tête.

Next.js, TypeScript et Tailwind, avec GSAP pour le mouvement et Three.js pour le fil. Le fil ne se charge que sur les grands écrans avec une souris : les téléphones ne téléchargent aucun code 3D.

Toucher une photo de l’Atelier la transforme en eau. « Stitch your name » crochète ce que vous tapez.

Le paiement ne laisse jamais le navigateur fixer un prix : le serveur le recalcule.

Les pages publiques sont générées à l’avance et mises en cache ; seules la page de retour du paiement et les routes d’API s’exécutent à la demande.

Les originaux restent intacts et les versions web sont générées : des photos en AVIF ou WebP avec un aperçu flou, et des vidéos en boucles silencieuses qui ne se chargent qu’à l’approche de l’écran et se mettent en pause quand elles en sortent.

Les bases sont là : un lien d’évitement, un focus visible, des formulaires étiquetés dont les erreurs sont annoncées, et des boîtes de dialogue natives pour le panier, le menu et la visionneuse d’images.

Framework

Next.js 16, React 19, TypeScript

Animation

GSAP, Three.js, WebGL

Backend

Supabase, Paystack

Code source

Dépôt privé

« Stitch your name » crochète le mot que vous tapez, rang après rang. Les photos de l’Atelier s’ouvrent dans une visionneuse.

Il fonctionne et attend son propriétaire. Pas encore public : les images sont des captures du site tournant en local.

Ses propres notes consignent une vérification sur la version de production : le plus grand affichage à environ une seconde, aucun décalage de mise en page, et environ 300 ko de JavaScript sur la page d’accueil.

Le reste est à confirmer par l’entreprise : les noms et les prix associés à l’œil, la disponibilité et la livraison, et les clés qui activent les paiements et les demandes.