Seiko Mod
Concept de boutique en ligne de montres
Un concept interactif de boutique de montres : narration cinématique au défilement, catalogue de produits et configurateur de montre sur mesure. Réalisé en HTML, CSS et JavaScript avec un développement assisté par l’IA (Claude Code), sous ma direction créative et technique.
Concept indépendant, non affilié à Seiko et non commandé par Seiko. Panier en mémoire seulement et commande sur mesure simulée : rien n’est enregistré ni envoyé.
Nature
Concept indépendant
Statut
Non déployé publiquement
Technologies principales
HTML5 · CSS3 · JavaScript · Canvas 2D
Le projet.
Seiko Mod est un concept personnel de boutique en ligne pour des montres automatiques assemblées sur mesure (des « mods » construits autour de mouvements Seiko de la série NH : styles Datejust, GMT et plongée), avec des prix fictifs en dollars canadiens.
Sa pièce maîtresse est une page d’accueil cinématique pilotée par le défilement. Le site comprend aussi un catalogue filtrable, une page produit, un panier en tiroir et une demande de montre sur mesure en 9 étapes avec aperçu des photos d’inspiration. C’est un projet uniquement front-end : il n’y a pas de serveur, et les formulaires comme le paiement sont simulés.
Mon rôle.
- 01Concept et design du site
- 02Développement front-end
- 03Expérience interactive
- 04Animation pilotée par le défilement
- 05Expérience de catalogue
- 06Configurateur de montre sur mesure
- 07Design responsive
- 08Développement assisté par l’IA avec Claude Code
Fonctionnalités clés.
- Séquence cinématique de 193 images pilotée par le défilement, avec quatre compositions de texte en fondu enchaîné et une intro jouée une seule fois
- Catalogue avec filtres par collection (collections vides désactivées), tri et nombre de résultats
- Gabarit unique de page produit : fiche technique, accordéons et produits similaires
- Panier en tiroir : ajout, quantité, retrait et totaux
- Recherche instantanée
- Demande sur mesure en 9 étapes : cartes d’options visuelles, pastilles de couleur de cadran, photos en glisser-déposer, validation par étape et barre de progression
- Mise en page responsive (1440, 1200, 992, 768 et 480 px) et mode mouvement réduit
Technologies.
Site d’origine
- HTML5
- CSS3 (jetons de design, Grid, Flexbox, clamp(), :has(), backdrop-filter)
- JavaScript vanilla, sans framework ni dépendance
- Canvas 2D
- requestAnimationFrame
- IntersectionObserver
- localStorage (panier)
- Google Fonts : Inter
Ressources et outils
- WebP
- Séquence de 193 images tirée d’une vidéo 4K HEVC
- Python 3 et Pillow (préparation des images)
- Bancs de test dans le navigateur
Aperçu dans ce portfolio
- React
- TypeScript
- Next.js (App Router)
- CSS isolé par requêtes de conteneur
Développement assisté par l’IA. Claude Code comme assistant, la direction de mon côté.
Claude Code faisait partie de mon flux de travail pour l’implémentation, les itérations et le débogage : il traduisait en code ma direction (concept, mise en page, mouvement, structure des textes, fonctionnalités), que je révisais ensuite par rondes successives de revue et de rétroaction.
Le concept, les décisions de design, les révisions et l’expérience finale sont les miens. Je n’ai pas écrit chaque ligne de code à la main. Le portage React et Next.js présenté ici a aussi été produit avec Claude Code, à partir de mon site existant.
Points forts.
Des images plutôt qu’une vidéo
La vidéo source en 4K HEVC était trop lente à parcourir au défilement et illisible dans Firefox. Elle a été convertie en images WebP dessinées sur un canvas, plus légères que la vidéo d’origine.
Défilement lissé
Défilement, progression, image cible : un lissage exponentiel dans une seule boucle requestAnimationFrame, mise en pause hors de l’écran.
Textes calés sur l’image
Chaque scène a son propre voile de lisibilité, qui apparaît juste avant le texte. Sur un écran vertical, l’image est dessinée en bandeau centré.
Une seule couleur d’accent
Un fond presque noir, un halo bleu acier tiré de l’image de fond et des montres posées directement sur le fond, sans cartes ni bordures.
Accessibilité
Mode statique avec prefers-reduced-motion, panneaux masqués retirés de l’ordre de tabulation et états exposés en ARIA.
Statut
Non déployé publiquement.
Seiko Mod est un projet de portfolio : il n’est présenté qu’à travers l’aperçu interactif de cette page.
À savoir
- Projet de portfolio indépendant : il n’est ni affilié à Seiko Watch Corporation, ni approuvé ou commandé par elle, et ce n’est pas un travail client pour Seiko. Les images de montres de marque Seiko servent uniquement à illustrer l’idée ; « Seiko » et les marques associées appartiennent à leurs propriétaires respectifs.
- Dans l’aperçu, le panier reste en mémoire, la commande sur mesure est simulée et les photos ajoutées ne quittent pas le navigateur.
Projet suivant
Tous les projetsGarderie Mes Meilleurs Souvenirs
Site vitrine d’une garderie éducative
Site vitrine chaleureux et très visuel pour une garderie éducative, conçu comme un album de « souvenirs imprimés » : photos en tirages inclinés, illustrations originales et palette tirée du logo. Réalisé avec Astro et TypeScript dans un flux de travail assisté par l’IA (Claude Code), sous ma direction créative.
